微信小程序之微信登陆 —— 微信小程序教程系列,计算机移动应用开发

news/2024/8/26 12:36:49 标签: 架构, 移动开发, android

success: function(res) {

console.log(res);

if (res.code) {

//发起网络请求

//doSomething

} else {

console.log(‘获取用户登录态失败!’ + res.errMsg)

}

},

fail: function(){

console.log(“启用wx.login函数,失败!”);

},

complete:function(){

console.log(“已启用wx.login函数”);

}

});

TIPS:

上面这段代码的console.log(res);输出wx.login(OBJECT)的success成功回调函数返回值res的内容如下:

情况一:

出现这个code:”the code is a mock one”是在项目没有使用appid的情况下返回的,正常不是返回这个的!!

19956127-879eed415de95969.png

情况二:

项目在绑定appID后才能成功返回登录态,正确的登陆态如下图所示:

![19956127-1ecc60015d9d2d6b.png](https://ss.csdn.net/p?https://upload-i
mages.jianshu.io/upload_images/19956127-1ecc60015d9d2d6b.png)

第二步:将登陆态code发送给第三方服务器(即自家的服务器)

19956127-afea600c3601eae4.png

上面通过wx.login(OBJECT)获取了登录态后,接下来就是将code发送给第三方服务器

我们先看看微信登陆的序时图:

序时图所示,通过wx.login()获取了code后,就使用wx.request()发送code给第三方服务器(也就是自家的服务器)

下面用代码来进行讲解这一步如何操作

示例:官方示例

把wx.login获取到的res.code返回值,直接以参数的形式,发起网络请求发送登陆态给自家服务器

js:

//调用登录

wx.login({

success: function(res) {

console.log(res);

if (res.code) {

//就是在这里发起网络请求,使用wx.request(),将登陆态发送给自家的服务器上

wx.request({

url: ‘https://test.com/onLogin’,

data: {

code: res.code

},

method: ‘POST’,

header: {‘content-type’: ‘application/json’},

success: function(data){

}

})

} else {

console.log(‘获取用户登录态失败!’ + res.errMsg)

}

},

fail: function(){

console.log(“启用wx.login函数,失败!”);

},

complete:function(){

console.log(“已启用wx.login函数”);

}

});

如何使用微信小程序发起网络请求?

请看如下教程:微信小程序的网络请求 ——微信小程序教程系列(14)

第三步:code 换取 session_key和openid

登陆态发送给自家的服务器后,接下来就是后台进行操作。

下面我把 自家的服务器简称 后台,方便阅读(你知道我说的后台指的是我们自己的服务器,而不是微信的服务器就行)。

后台接收到登陆态后,由后台发起网络请求给微信服务器

备注:后台没有语言要求!!任意一门后台语言都可以。

接口地址:

https://api.weixin.qq.com/sns/jscode2session

参数说明:

19956127-78e77c1487202bf9.png

备注:

appid和secret登陆微信公众平台,打开设置——开发设置,即可获取(app secret需要生成)。

19956127-9387bede14df9933.png

grant_type是固定写法,值为authorization_code即可。

返回结果:

19956127-ab9949e46a3999e0.png

后台发送请求成后,腾讯服务器会返回session_key 和 openid,如下图:

成功返回的结果

19956127-0e484ceb640aba43.png

失败返回的结果

19956127-a354e1cc300afde9.png

第四步:生成3rd_session返回给客户端

第四步也是做后台中的操作!!

此时把微信服务器返回的session_key 和 openid保留在后台中,由于考虑安全性的问题,不要直接返回给客户端。

然后用操作系统提供的随机数算法生成一个新的session,微信把它叫做3rd_session。(注意:这个session要有足够的长度,建议有2^128种组合,即长度为16B;设置一定的时效性)

以3rd_session为名作为key,返回的session_key和openid作为值,保存在后台上。

最后只需要在后台,返回一个3rd_session给客户端即可。

以后客户端部分,就使用这个3rd_session发送给后台,后台接收3rd_session获取对应的session_key和openid,再通过session_key和openid判断对应的用户返回该用户相关的数据

备注:小程序用这种方法来代替浏览器自身发送的cookie,因为web的做法是服务器A会保存起访问登录接口的这个cookie到session中,当你再次访问其他接口的时候,服务器A首先会判断这个session,是否是之间的cookie从而知道是不是对应的用户。(http协议是一种短链接的关系,其特点是客户端发起请求链接到服务端,服务端返回数据,链接断开!因此之间是不会有任何数据的储存。)

示例:接上示例

js:

wx.login({

success: function(res) {

console.log(res);

if (res.code) {

wx.request({

url: ‘https://test.com/onLogin’,

data: {

code: res.code

},

method: ‘POST’,

header: {‘content-type’: ‘application/json’},

// 在发送请求成功的部分,返回的数据是后台返回的3rd_session

success: function(data){

console.log(data)

}

})

} else {

console.log(‘获取用户登录态失败!’ + res.errMsg)

}

},

fail: function(){

console.log(“启用wx.login函数,失败!”);

},

complete:function(){

console.log(“已启用wx.login函数”);

}

});

PS:

要是阅读到这里,有不明之处,请叫上后台的小伙伴一起过来阅读这篇文章

第三步,和第四步,要交给后台的同事去处理!!!

第五步:客户端保存3rd_session

回到客户端的工作了。

从第四步后台返回的3rd_session后,需要将3rd_session存入缓存中。

小程序提供了保存到本地缓存的api,使用非常简单。

(1)wx.setStorage(OBJECT)

传入key和data即可。

19956127-4b4a0fe0c39d1053.png

(2)wx.setStorageSync(KEY,DATA)

19956127-ed53c1ff95ed6ac3.png

第六步:获取用户信息

19956127-650d224e01e23833.png

相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html

示例:接上示例

js:

wx.login({

success: function(res) {

console.log(res);


http://www.niftyadmin.cn/n/1720051.html

相关文章

kmp详解(详尽版)(重拾笔记)

又是考试考到了板子,看出是Kmp板子题后心态直接炸裂然后题意看错暴力打错。。。 就是知识点理解掌握的并不扎实就像exgcd一样课下自己推了一遍理解透了考试现推也能打但是理解不透,记得再熟也会打不出来尴尬。 一直认为Kmp简单而且理解透了回去在看全是细…

机器视觉-相机镜头光源介绍及选型-10相机分类

相机分类 1.1.分类 感光芯片:有CCD和CMOS两种 模拟相机:用于电视和监控,通用性好、成本低,分辨率低、采集速度慢,易受噪声干扰 数字相机:输出标准:IEEE1394;USB2.0;DCOM3;RS-644 LVDS;Came…

微信小程序开发之——获取系统信息,2021阿里、网易、京东等大厂最新Android面试题

用户字体大小 {{result.fontSizeSetting}} 客户端基础库版本 {{result.SDKVersion}} 设备性能等级 {{result.benchmarkLevel}} 设备方向 {{result.deviceOrientation}} 允许微信使用相册 {{result.albumAuthorized}} 允许微信使用摄像头 {{result.cameraAuthorized}} 允许…

为什么开发人员对于PHP语言褒贬不一

PHP 语言,作为服务器端开发的脚本语言,在网站开发方面非常有名。从1995年 Rasmus Lerdorf 创建之后,W3Techs 的调查显示在已知的服务端编程语言中,PHP 占了82%。其中不乏WordPress,Facebook 这种公司。PHP 语言&#x…

关于标准android中视频播放器中的快进和快退的步长时间设置

文件 :frameworks/base/core/java/android/widget/MediaController.java private View.OnClickListener mRewListener new View.OnClickListener() {public void onClick(View v) {int pos mPlayer.getCurrentPosition();pos - 5000; // millisecondsmPlayer.seek…

dump数据方法

//media.vt.dumpdata //Pvmi_mio_comm_ril.cpp

CentOS在VMware中的安装

1、启动VMware 2、新建一台虚拟机,选择典型 3、选择稍后安装操作系统 4、选择引导系统为Linux,系统版本为Centos 5、选择安装位置 6、选择最大磁盘容量 7、点击自定义硬件,进行硬件设置 8、 9、启动程序,安装系统 10、选择中文&am…

机器视觉-相机镜头光源介绍及选型-11.采集卡

采集卡 1.1.定义: 将视频信号经AD转换成电脑可用数字格式,经PCI总线实时传到内存和显存。 采集卡传送数据采用PCI Master Burst方式,图像传送速度高达40MB/S,实现图像到内存可靠实时传送, 几乎不占用CPU时…