【实现功能】
之前用手机号授权的方式实现登录，现在重新整理成笔记
【实现原理/步骤】
一、wx.login
(1)前端通过wx.login()获取登录凭证code，每次调用的code均不同，有效时间5分钟，每个code可验证一回
(2)前端通过wx.request(我这里是用封装好的request.login)将code发送给后端
(3)后端将appid，appSecret（密钥）和code发送给微信接口服务去校验登录凭证，成功后会返回session_key(会话信息记录)和openid(用户唯一标识)
ps:前面的 appid，appSecret（密钥）可以在微信公众号平台获取
(4)用户登录成功后，后端将openid和session_key保存，生成一个自定义登录态的token(令牌)响应回去给前端。
(5)通过token可以查询openid和session_key，前端将返回的token进行缓存，小程序下次请求只要携带着token就可以证明已经登录。
(6)在app.js中检测用户是否已经登录
pages/login/login.js
onLoad() {
wx.login({
// 调用接口获取登录凭证（code）
success: (Result) => {
// 向后台发起request.login请求,用code换取用户登录态信息openid,存储为token;
request.login({
code: Result.code
}).then((token) => {
// 存储用户登录态信息token
wx.setStorageSync('token', token)
}) .catch(error => {
console.log("换取登录态token失败：",error)
});
},
fail:(res)=> { console.log("获取登录凭证code失败！",res) }
})
},app.js
App({
//配置全局变量（多页面使用）
globalData: {
// 登录信息
token: ''
},
// 登录检测：token
checkLogin() {
//全局变量或缓存中存在token，直接赋值，否则重新登录
var token = this.globalData.token
if (!token) {
token = wx.getStorageSync('token')
if (token) {
this.globalData.token = token;
} else {
wx.showToast({
title: '请登录',
icon: 'none'
})
setTimeout(() => {
wx.reLaunch({
url: '/pages/login/login',
})
}, 2000);
}
}
},
onLaunch() {
// 登录检测：token
this.checkLogin(),
},
})
微信小程序实现用户登录（详）_微信小程序登录_灵魂学者的博客-CSDN博客
二、一键获取用户微信手机号并登录
（1） getUserInfo
微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发。
（2）button触发
步骤1：需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，通过 bindgetphonenumber 事件获取回调信息；
步骤2：将 bindgetphonenumber 事件回调中的动态令牌code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。
ps：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。
pages/login/login.js
// 二、一键登录获取手机号和token
getPhoneNumber(e) {
let that = this
if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
// 用户拒绝手机号授权
wx.showToast({
title: '以游客身份进入',
icon: 'error'
})
setTimeout(() => {
wx.switchTab({
url: '/pages/home/home',
})
}, 2500)
} else {
//同意授权,保存手机号解密所需的code
wx.showToast({
title: '您已经同意授权登录',
})
this.setData({
PhoneNumberSecret: e.detail.code,
})
if(e.detail.code && this.data.OpenId){
// 手机号解密的promise请求
request.getPhoneNumber({
Code: that.data.PhoneNumberSecret,
OpenId: that.data.OpenId
}).then((res) => {
wx.setStorageSync('phoneNumber', res.data)
}).catch(error => {
console.log("request.getPhoneNumber请求失败：",error)
})
}
}
},
注意
从基础库2.21.2开始，对步骤2中换取手机号信息的方式进行了安全升级，上述为新方式使用指南。（旧方式目前可以继续使用，但建议开发者使用新方式，以增强小程序安全性）另外，新方式不再需要提前调用
wx.login进行登录
参考链接：https://blog.csdn.net/cheng2290/article/details/102550829/
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html文章来源：https://www.toymoban.com/news/detail-713941.html
原文链接：https://blog.csdn.net/qq_33514421/article/details/81706299 文章来源地址https://www.toymoban.com/news/detail-713941.html
到了这里，关于【微信小程序】wx.login实现用户登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
