【微信小程序】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 

猜你喜欢

转载自blog.csdn.net/qq_54639969/article/details/132635815