微信小程序登录流程整理
最近在开发微信小程序，发现小程序的登录流程和PC端略有差异，于是抽时间整理了一下登录流程。
登录流程时序
首先，简单介绍下小程序登录的几个步骤。
1、点击登录按钮
2、获取微信sessionKey数据
1）调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2）调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。
3、获取用户信息的加密数据（调用前需要 用户授权 scope.userInfo）
1）wx.getSetting() 获取用户的当前授权设置
2）wx.getUserInfo() 获取用户信息， object.success 回调函数的返回值如下：
4、调用后端登录接口，绑定用户。
wx.getSetting() 调用成功返回结果如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| authSetting | AuthSetting | 用户授权结果 |
| subscriptionsSetting | SubscriptionsSetting | 用户订阅消息设置，接口参数withSubscriptions值为true时才会返回。 |
wx.getUserInfo() 调用成功返回结果如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| userInfo | UserInfo | 用户信息对象，不包含 openid 等敏感信息 |
| rawData | string | 不包括敏感信息的原始数据字符串，用于计算签名 |
| signature | string | 使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 用户数据的签名验证和加解密 |
| encryptedData | string | 包括敏感数据在内的完整用户信息的加密数据，详见 用户数据的签名验证和加解密 |
| iv | string | 加密算法的初始向量，详见 用户数据的签名验证和加解密 |
| cloudID | string | 敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据 |
整个登录流程的js代码如下：
1、点击登录按钮
loginClick() {
if (this.userName == "" || this.password == "") {
WechatUtil.showToast("请输用户名密码");
return;
}
wx.showLoading({
title: "正在登录中..." });
this.login(this.userName, this.password);
wx.hideLoading();
},
async login() {
// 1、获取微信sessionKey数据
let res = await this.getWxSessionByCode();
if (res.code !== 0) {
wx.showToast({
title: res.message, icon: "none" });
return false;
}
let wxSessionInfoVO = res.value;
let sessionKey = wxSessionInfoVO.sessionKey;
let openId = wxSessionInfoVO.openId;
// 2、获取用户信息的加密数据
let getUserInfoRes = await this.getUserInfoFromWx();
let userInfo = getUserInfoRes.userInfo;
if (!userInfo) {
WechatUtil.showToast("获取用户信息失败");
return false;
}
//3、绑定用户，调用后端登录接口
let accountByEncryData = {
appId: this.$store.state.appId, //小程序appId
loginName: this.userName, //用户名
password: this.password, //密码
sessionKey: sessionKey,
encryptedData: getUserInfoRes.encryptedData, //wx.getUserInfo的返回值 加密数据
iv: getUserInfoRes.iv //wx.getUserInfo的返回值 加密算法的初始向量
};
let successd = await this.loginByAccountAndEncryData(accountByEncryData);
return successd;
}
2、获取微信sessionKey数据
根据getWxCode返回的code，调用后端接口获取openid和session_key
// 获取微信sessionKey和openId
async getWxSessionByCode() {
const wxCodeRes = await this.getWxCode();
const params = {
code: wxCodeRes.code,
appId: this.$store.state.appId
};
const res = await loginService.getWxSessionByCode(params);
return res;
}
接口返回的数据结构如下：
{
code: 0,
message: "操作成功"
value: {
openId: "obXSv4rgXCppd1MBHFXDyNAhZz7k"
sessionKey: "4ti+o+fgFITR2DnpcHAIgg=="
unionId: null
}
}
调用微信接口获取登录凭证（code），通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等
// 获取登录凭证code 有效期5分钟，且只能使用一次
getWxCode() {
return new Promise((resolve, reject) => {
let reqObj = {
success: res => {
resolve(res);
},
fail: res => {
reject(res);
}
};
wx.login(reqObj);
});
}
3、 获取用户加密信息
包含加密数据UnionId，需要提前进行用户授权 、并且调过wx.login接口
async getUserInfoFromWx() {
try {
// 获取用户是否授权微信 获取用户信息
let settingRes = await this.getAuthorizeSetting();
if (!settingRes.authSetting["scope.userInfo"]) {
WechatUtil.showToast("授权失败");
return null;
}
return new Promise((resolve, reject) => {
let getUserInfoOpt = {
withCredentials: true,
success: res => {
resolve(res);
},
fail: res => {
reject(res);
}
};
// 必须是在用户已经授权的情况下调用
wx.getUserInfo(getUserInfoOpt);
});
} catch (e) {
WechatUtil.showToast("微信服务器异常");
}
}
wx.getUserInfo官网介绍
获取用户的授权设置。返回值中只会出现小程序已经向用户请求过的权限。
// 获取用户是否授权微信 获取用户信息
getAuthorizeSetting() {
return new Promise((resolve, reject) => {
let reqObj = {
success: res => {
resolve(res);
},
fail: res => {
reject(res);
}
};
wx.getSetting(reqObj);
});
}
wx.getSetting官网介绍
4、调用后端登录接口，绑定用户
async loginByAccountAndEncryData(params) {
let res = await loginService.loginByAccountAndEncryData(params);
if (res.code != 0) {
WechatUtil.showToast(res.message, 1000);
return false;
}
this.$store.state.userId = res.value;
this.$store.state.logouted = false;
wx.setStorageSync("userId", res.value);
wx.reLaunch({
url: "/pages/home/main" }); //登录成功跳转首页
},