实现小程序一键注册加登录
实现逻辑：
参考微信
登录流程时序
- 首先调用微信的登录接口 wx.login，获取临时登录凭证 code。
- 把code传给后端，后端会调用微信的code2Session获取session_key、openid，然后返回给前端，因为前端是不能直接请求code2Session获取参数。
- 掉用后端接口，把openid给后端，查看当前微信是否被注册。
- 假如已经注册，获取token，直接登录。
- 假如没有注册，需要通过微信提供方法，获取手机号。
- 此时手机号是加密的，需要调用微信提供的方法，解密手机号，前端后端都可以，加密方式为base64，微信提供了方法，java未提供，可以自己写。
- 手机号绑定微信，注册加登录。后端逻辑为，手机号已注册，执行绑定微信然后返回token登录；手机号未注册，执行用户手机号+微信号注册然后返回token登录。
html 部分
<button type="default" @tap="appLoginWx">微信手机号一键登录</button>
<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhone" v-if="showPhone">授权手机号</button>
js部分
// 微信登录
async appLoginWx() {
try {
this.wechatInfo = await this.getInfo(); // 授权用户信息
this.login(); // 登录
} catch (e) {
if (e.errMsg === 'getUserProfile:fail auth deny') {
// 未授权
} else {
// 获取用户信息失败
}
}
},
// 微信已注册直接登录
async login() {
try {
let loginInfo = await this.userLogin(); // 微信的登录
this.userInfo = await this.getSession(loginInfo.code);
// 校验微信有没有被注册
let check = {
identifier: this.userInfo.openid,
plant: 'weixin',
};
this.checkWechat = await checkUser(check);
// 微信已注册
if (this.checkWechat.data) {
// 已注册，获取token然后跳转主页
let tokenParams = {
identifier: this.userInfo.openid,
plant: 'weixin',
grantType: 'wechat',
};
getTokenByWechat(tokenParams).then(res => {
if (res.code === 200) {
// 缓存 token
// 缓存 跳转登录
}
});
// 微信未注册,打开授权手机号界面
} else {
this.showPhone = true
}
} catch (e) {}
},
// 微信未注册手机号注册加登录
async getPhone(e) {
// 获取手机号成失败 return
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
// 请授权
return;
}
try {
// 获取明文手机号
let params = {
data: e.detail.encryptedData,
iv: e.detail.iv,
sessionKey: this.userInfo.sessionKey,
};
let phoneInfo = await getPlainTextPhone(params);
// 无论手机号注册与否，都绑定微信，未注册时要获取用户微信昵称
bindWechat(data).then(res => {
if (res.code === 200) {
// 获取 token
// 跳转登录
}
});
} catch (e) {
}
},
// 后端获取session_key、openid接口
getSession(code) {
return new Promise((resolve, reject) => {
getSessionHand({ code})
.then(res => {
resolve(res.data);
}
});
});
},
// 获取用户授权信息
getInfo() {
return new Promise((resolve, reject) => {
// 获取用户授权信息
wx.getUserProfile({
lang: 'zh_CN',
desc: '获取用户信息',
success: userInfo => {
resolve(userInfo);
},
fail: err => {
reject(err);
},
});
});
},
// 微信的用户登录信息
userLogin() {
return new Promise((resolve, reject) => {
wx.login({
provider: 'weixin',
success: loginInfo => {
resolve(loginInfo);
},
fail: err => {
reject(err);
},
});
});
},
补充：
在点击登录前的引导页，session_key 校验
// 验证 session_key 是否过期
wx.checkSession({
success: res => {
const token = xxx 缓存;
if (token) {
// session_key 、 token没有过期，重新获取用户信息跳转到首页
} else {
// token 过期，到登录页
}
},
fail: err => {
// session_key 过期，到登录页
}
})
