微信小程序授权登陆

傷城~ 2022-12-12 02:13 185阅读 0赞

[讲解视频观看https://live.csdn.net/v/131706][https_live.csdn.net_v_131706]

#### 微信小程序登录授权 ####

我们在项目中，登录，授权页面，都必须要传递token值。  
一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。

#### token是什么？ ####

token是前端鉴权的一种方式，token由后端生成， 是有时效性的。

#### 微信小程序如何登录授权，拿到token ####

第一步：登录流程  
前端—>后端—>腾讯服务器  
wx.login—>wx.request—>后端—>小程序(腾讯)服务器  
[`小程序wx.login官方文档`https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html][wx.login_https_developers.weixin.qq.com_miniprogram_dev_api_open-api_login_wx.login.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]

第二步：  
登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入公司数据库）—>进行登录  
将登录弹框封装成一个模板，进行引用  
首先封装好请求接口文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]  
**api.js**

module.exports={ 
      "registor":"/user/wxapp/register/complex",//注册
      "login":"/user/wxapp/login",//登陆
      "userDetail":"/user/detail"//用户详细信息
    }

**fetch.js**

module.exports=(url,method,data)=>{ 
      let p=new Promise((resolve,reject)=>{ 
        wx.request({ 
          url: url,
          method:method,
          header:{ 'Content-Type': 'application/x-www-form-urlencoded'},
          data:Object.assign({ },data),
          success(res){ 
           resolve(res)
          },
          fail(err){ 
            reject(err)
          }
    
        })
      })
      return p;
    }

http.js

const api = require('./api')
    const fetch = require('./fetch')
    const baseUrl="https://api.it120.cc/tianxing";//基础域名
    //注册
    function registor(data={ }){ 
       return fetch(baseUrl+api.registor,'post',data)
    }
    
    //登陆
    function login(data){ 
      return fetch(baseUrl+api.login,'post',data)
    }
    //用户详细信息
    function userDetail(data){ 
      return fetch(baseUrl+api.userDetail,'get',data)
    }
    module.exports={ 
       registor,
       login,
       userDetail
    }

### 具体实现步骤 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 2]

1.点击封装的登录模板中的“允许”按钮，执行processLogin方法

processLogin方法：

//立即登录
      processLogin(e) { 
        console.log(e);
        if (!e.detail.userInfo) { 
          wx.showToast({ 
            title: '已取消',
            icon: 'none',
          })
          return;
        }
        // 如果有userinfo ,就调用register注册方法
        this.registor();
      },

2.如果有userInfo，就调用register注册方法，通过注册把腾讯信息写入公司数据库  
注册需要三个参数

1.  iv 加密值
2.  code
3.  encryptedData 加密数据

//注册
      registor(){ 
        let _this = this;
        //调用接口获取登录凭证（code）唯一标识（openid）及本次登录的会话密钥（session_key）
        wx.login({ 
          success: function (res) { 
            let code = res.code; // 微信登录接口返回的 code 参数，下面注册接口需要用到
            wx.getUserInfo({   //获取用户信息
              success: function (res) { 
                let iv = res.iv; //加密算法的初始向量
                let encryptedData = res.encryptedData; //完整用户信息的加密数据
                // 下面开始调用注册接口
                  http.registor({   //微信小程序用户快速注册
                    code: code,
                    encryptedData: encryptedData,
                    iv: iv
                  }).then(function (res) { 
                    console.log(res);
                    _this.login();
                  })
               
              }
            })
          }
        })
      },

3.执行登录的login方法，通过登录拿到token

//登陆
      login(page){ 
        const _this = this
        wx.login({  // 获取登陆凭证 code
          success: function (res) { 
               console.log(res)
              //调用登陆接口，传code
              http.login({ code:res.code,type:2}).then(function (res) {         
                console.log(res)
                res=res.data;
                if (res.code != 0) { 
                  // 登录错误
                  wx.showModal({ 
                    title: '无法登录',
                    content: res.msg,
                    showCancel: false
                  })
                  return;
                }
                console.log(res)
                wx.setStorageSync('token', res.data.token)
                wx.setStorageSync('uid', res.data.uid)
                
                _this.onShow()
                
              })
          }
        })
      },

1.  登陆成功触发onShow()

onShow: function () { 
       this.getUserApiInfo();
      },

1.  获取用户详细信息

//获取用户详情信息
      getUserApiInfo() { 
        console.log(10000)
        var that = this;
        //后去用户详细信息
        http.userDetail({ token:wx.getStorageSync('token')}).then(function (res) { 
          console.log(res);
          if (res.data.code == 0) { 
            // let _data = {}
            // _data.apiUserInfoMap = res.data 
            // that.setData(_data);
    
            that.setData({ 
              apiUserInfoMap:res.data.data 
            })
          }
        })
      },

1.  退出登陆

点击退出按钮
    <van-cell wx:if="{ {apiUserInfoMap}}" title="退出登录" is-link bindtap="loginOut" />
    //退出函数
      loginOut(){ 
        wx.removeStorageSync('token')
        wx.removeStorageSync('uid')
        wx.reLaunch({ 
          url: '/pages/mylogin/mylogin'
        })
      },

4.检测登录状态和token是否过期

//检测token是否过期
    //只检测登录态（检测微信返回）
    async function checkSession(){ 
      return new Promise((resolve, reject) => { 
          //通过内置方法检测
        wx.checkSession({ 
          success() { 
            return resolve(true)
          },
          fail() { 
            return resolve(false)
          }
        })
      })
    }
    // 总体检测登录状态，包括token和微信登录态 返回 true 或false
    
    //在app.js的onload生命周期通过index.checkHasLogined调用,如果过期
    
    async function checkHasLogined() { 
      //获取本地存储的token
      const token = wx.getStorageSync('token')
      //如果没有token，直接返回false
      if (!token) { 
        return false
      }
    
      //检测微信登录态
      /** * 调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期 */
      const loggined = await checkSession()
    
      //如果没有登录态，则移除token,并返回false
      if (!loggined) { 
        wx.removeStorageSync('token')
        return false
      }
    
      //检测登录token是否有效
      const checkTokenRes = await WXAPI.checkToken(token)
    
      //如果登录token无效，移除token并返回false
      if (checkTokenRes.code != 0) { 
        wx.removeStorageSync('token')
        return false
      }
      
      //如果有token并且有效，并且微信登录态也有效则返回true
      return true
    }
    
    module.exports = { 
      login: login,
      register: register,
      checkSession:checkSession,
      checkHasLogined:checkHasLogined
    }

[讲解视频观看https://live.csdn.net/v/131706][https_live.csdn.net_v_131706]

[https_live.csdn.net_v_131706]: https://live.csdn.net/v/131706
[wx.login_https_developers.weixin.qq.com_miniprogram_dev_api_open-api_login_wx.login.html]: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]: /images/20221123/764011e2594246c689a59f729a09a885.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]: /images/20221123/276f4832c9824b3a999b400b6f61d3fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 2]: /images/20221123/5b8e407179a143719f27c1abcdda0810.png