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

【实现功能】

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

【实现原理/步骤】

 一、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