微信小程序授权登陆

微信小程序登录授权

我们在项目中，登录，授权页面，都必须要传递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

第二步：

登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入公司数据库）—>进行登录
将登录弹框封装成一个模板，进行引用
首先封装好请求接口文件 

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
}
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
}

具体实现步骤

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

<view wx:else class="header-box">
  <image class="avatar" src="/images/nologin2.png"></image>
	<van-button plain custom-class="btn" size="small" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="processLogin">立即登录</van-button>
</view>
<!-- getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 -->

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()
            
          })
      }
    })
  },

4.登陆成功触发onShow()

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

5.获取用户详细信息

//获取用户详情信息
  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 
        })
      }
    })
  },

6.退出登录

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

7.检测登录状态和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
}