子戈信息

图片展示

微信小程序登录流程全解析,带您更深入了解微信小程序

发表时间: 2021-10-25 09:35:37

微信官方文档有小程序的登录流程时序图,本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂,实际上只是不同的接口调用、字段返回,整个过程有3方在参与:小程序、开发者服务器、微信服务器。

微信官方文档有小程序的登录流程时序图,本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂,实际上只是不同的接口调用、字段返回,整个过程有3方在参与:小程序、开发者服务器、微信服务器。

首先,看一下微信官方时序图:

根据上面的图,可以分为以下几步:

第1步 - 小程序:小程序前端调用wx.login得到code,再传给开发者服务器。

code是临时登录凭证,有效期为5分钟、只能使用一次,每次调用wx.login,都会返回不同的code。把code、appid、appsecret一起传到开发者服务器,由它调用微信接口换取相关信息。如果需要检验账号和密码,那么除了上述这3个参数,还可以加上账号密码,一起请求开发者服务器。

appid和appsecret需要在「小程序后台->开发->开发管理->开发设置->开发者ID」找到。这2者必须属于当前小程序,如果拿其它小程序的开发者ID则会出现报错。

appid和appsecret:

开发者服务器接口地址必须为https协议,域名必须经过ICP备案,同时需要在「小程序后台->开发->开发管理->开发设置->服务器域名」 提前配置(测试环境除外)。为了安全起见,建议用POST的请求方式。

开发者服务器域名配置:

wx.request的超时时间默认为60秒,为了避免用户因网络异常或服务器问题等待回包太久,可以在app.json设置wx.request的超时时间,超时则触发fail回调。

"networkTimeout": {
"request": 3000
}

代码示例(为了方便演示,把密钥放到了前端请求):

wx.login({
success: (res) => {
var code = res.code;
var app_id = "你的app_id";
var app_secret = "你的app_secret";
wx.request({
url: "开发者服务器接口地址",
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
//完整写法是app_id:app_id,这是简写
app_id, app_secret, code
},
success: (res) => {
console.log("打印返回结果", res)
}
})
}
})

第2步 - 开发者服务器:调用微信服务器接口,得到openid、session_key、unionid。unionid需要满足一定条件才能返回,在本文不展开。在这个步骤,如果出现错误的话,微信服务器会返回errcode(错误码)。此外,在这个过程校验账号和密码之后,可以把账号密码等信息和openid进行绑定。

微信服务器接口地址:

https://api.weixin.qq.com/sns/jscode2session?appid=&secret=&js_code=&grant_type=authorization_code

服务器代码示例:

$app_id=$_POST['app_id'];
$app_secret=$_POST['app_secret'];
$code=$_POST['code'];
$url='https://api.weixin.qq.com/sns/jscode2session?appid='.$app_id.'&secret='.$app_secret.'&js_code='.$code.'&grant_type=authorization_code';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER,0);
curl_setopt($ch, CURLOPT_POST, 1);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

控制台打印:

从上面可以看到,微信服务器返回了openid和session_key。openid为用户在当前小程序的***标识,不同用户在小程序的openid不同,用户删除小程序、清空缓存不改变openid;session_key为开发者服务器和微信服务器的会话密钥,用于加解密数据,随着用户越频繁地使用小程序,session_key的有效期会越长。

第3步 - 开发者服务器:根据微信服务器返回的信息,自定义登录态。openid和session_key因为涉及到数据隐私,所以不直接发往小程序,而是在开发者服务器根据这2者自定义登录态,也就是定义token,再通过wx.setStorage把token写入本地数据缓存。至于怎么定义token,不同语言和不同项目的写法不一样,在这不再展开。

不同小程序有各自的本地缓存空间,彼此之间是分隔的,每个缓存空间大小是10M,如果超出10M再写入数据时,会触发fail回调。当然同一个设备的不同微信用户之间的缓存也是分隔的。

在第1步的代码,我们加上存储token的语句:

wx.login({
success: (res) => {
var code = res.code;
var app_id = "你的app_id";
var app_secret = "你的app_secret";
wx.request({
url: "开发者服务器接口地址",
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
app_id, app_secret, code
},
success: (res) => {
console.log("打印返回结果", res);
//存储到全局变量中,方便调用
this.globalData.token = res.token;
//把token放在本地缓存
wx.setStorage({
key: "token",
data: res.token
})
}
})
}
})

当用户再次打开小程序时,就带上storage请求开发者服务器(在app.js定义),判断登录态有没有过期,而不用每次打开小程序都要重新登录:

onLaunch: function () {
var that = this;
//从本地缓存同步获取token
var token = wx.getStorageSync("token");
if (token && token.length) { //判断是否有token
//验证token是否有效
wx.request({
url: "开发者服务器检验token的接口地址",
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
token
},
success: (res) => {
if (res.status == "correct") {//假设token正确
//返回登录状态,存储到全局变量中,方便调用
this.globalData.token = res.token;
} else {
that.login()//重新登录,假设wx.login放到login()
}
}
})
} else {//如果没有token
that.login()//重新登录,假设wx.login放到login()
}
}

当然,如果你的登录态有效期以session_key为准,那么可以用wx.checkSession检查session_key有没有过期。wx.checkSession示例:

onLaunch: function() {
wx.checkSession({
success() {
//session_key没过期,返回登录状态
},
fail() {
// session_key过期,重新登录
}
})
}



Q&A



Q1:wx.login需要用户点击按钮授权吗? 

A:不需要,这个行为是静默的,用户层面不会有感知。 

Q2:wx.login返回的code只有5分钟的时效性,这样的好处是什么?

A:对于侵略者来说,想要在5分钟之内列举所有code,然后频繁请求开发者服务器试图获取真实用户信息,这无疑难度加大、容易被识别。 

Q3:AppId和AppSecret都是隐私数据吗?会不会涉及安全风险? 

A:AppId是公开信息,不会涉及安全风险,用户查询AppId的路径为「小程序右上角->小程序名称->更多资料->AppId」;AppSecret是隐私数据,不应该被公开泄露,一旦泄露需要到小程序后台重置。


微信小程序登录流程全解析,带您更深入了解微信小程序
微信官方文档有小程序的登录流程时序图,本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂,实际上只是不同的接口调用、字段返回,整个过程有3方在参与:小程序、开发者服务器、微信服务器。
长按图片保存/分享

在线表单

  • 姓名 *

  • 电话 *

  • 留言

免费试用

Top

© 2010-2021 上海子戈信息科技有限公司 版权所有

沪ICP备19012659号

友情链接:  抖音推广   SEO快排  宣传片制作  食品经营许可证  代缴社保  抖音企业认证

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
热线电话
021-20960009
上班时间
周一到周五
E-mail地址
contact@zigetech.com
扫一扫二维码
二维码
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了