【微信小程序】wx.login实现用户登录

2024-07-17 03:53| 来源: 网络整理| 查看: 265

【实现功能】

之前用手机号授权的方式实现登录，现在重新整理成笔记

【实现原理/步骤】一、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://blog.csdn.net/qq_33514421/article/details/81706299

【本文地址】

公司简介

联系我们