微信小程序登錄授權(quán)

我們?cè)陧?xiàng)目中，登錄，授權(quán)頁面，都必須要傳遞token值。
一般商品詳情頁面的商品收藏，加入購物車。購物車頁面都需要傳遞token。

token是什么？

token是前端鑒權(quán)的一種方式，token由后端生成， 是有時(shí)效性的。

微信小程序如何登錄授權(quán)，拿到token

第一步：登錄流程
前端—>后端—>騰訊服務(wù)器
wx.login—>wx.request—>后端—>小程序(騰訊)服務(wù)器
小程序wx.login官方文檔https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

第二步：
登錄---->檢測是否注冊(cè)—>沒有注冊(cè)先獲取用戶信息進(jìn)行注冊(cè)（寫入公司數(shù)據(jù)庫）—>進(jìn)行登錄
將登錄彈框封裝成一個(gè)模板，進(jìn)行引用
首先封裝好請(qǐng)求接口文件

var API_BASE_URL = 'https://api.it120.cc'
var subDomain = 'mydomainname'   //專屬域名
let request = (url, needSubDomain, method, data) => {
  const _url = API_BASE_URL + (needSubDomain ? '/' + subDomain : '') + url
  return new Promise((resolve, reject) => {
    wx.request({
      url: _url,
      method: method,
      data: data,
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success(request) {
        resolve(request.data)
      },
      fail(error) {
        reject(error)
      },
      complete(aaa) {
        // 加載完成
      }
    })
  })
}

/**
 * 小程序的promise沒有finally方法，自己擴(kuò)展下
 */
Promise.prototype.finally = function (callback) {
  var Promise = this.constructor;
  return this.then(
    function (value) {
      Promise.resolve(callback()).then(
        function () {
          return value;
        }
      );
    },
    function (reason) {
      Promise.resolve(callback()).then(
        function () {
          throw reason;
        }
      );
    }
  );
}

具體實(shí)現(xiàn)步驟

1.點(diǎn)擊封裝的登錄模板中的“允許”按鈕，執(zhí)行processLogin方法

<button class="jbn_login" bindgetuserinfo="processLogin" open-type="getUserInfo">允許</button>
<!-- getUserInfo 獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息 -->

processLogin方法：

const WXAPI = require('apifm-wxapi');
const index = require('../../utils/index.js')
  processLogin(e) {
    console.log(e.detail.userInfo)
    if (!e.detail.userInfo) {
      wx.showToast({
        title: '已取消',
        icon: "none"
      })
      return 
    }
    // 如果有userinfo ,就調(diào)用register注冊(cè)方法
    index.register(this)
  },

2.如果有userInfo，就調(diào)用register注冊(cè)方法，通過注冊(cè)把騰訊信息寫入公司數(shù)據(jù)庫
注冊(cè)需要三個(gè)參數(shù)

1. iv 加密值
2. code
3. encryptedData 加密數(shù)據(jù)

async function register(page) {
  let _this = this;
  wx.login({
    success: function (res) {
      let code = res.code; // 微信登錄接口返回的 code 參數(shù)，下面注冊(cè)接口需要用到
      wx.getUserInfo({
        success: function (res) {
          let iv = res.iv;
          let encryptedData = res.encryptedData;
          let referrer = '' // 推薦人
          let referrer_storge = wx.getStorageSync('referrer');
          if (referrer_storge) {
            referrer = referrer_storge;
          }
          // 下面開始調(diào)用注冊(cè)接口
          WXAPI.register_complex({
            code: code,
            encryptedData: encryptedData,
            iv: iv,
            referrer: referrer
          }).then(function (res) {
            console.log(res)
            _this.login(page);
          })
        }
      })
    }
  })
}

3.執(zhí)行登錄的login方法，通過登錄拿到token

async function login(page) {
  const _this = this
  wx.login({
    success: function (res) {
      WXAPI.login_wx(res.code).then(function (res) {
        if (res.code == 10000) {
          // 去注冊(cè)
          _this.register(page)
          return;
        }
        if (res.code != 0) {
          // 登錄錯(cuò)誤
          wx.showModal({
            title: '無法登錄',
            content: res.msg,
            showCancel: false
          })
          return;
        }
        wx.setStorageSync('token', res.data.token)
        wx.setStorageSync('uid', res.data.uid)
        if (page) {
          page.onShow()
        }
      })
    }
  })
}

4.檢測登錄狀態(tài)和token是否過期

//檢測token是否過期
//只檢測登錄態(tài)（檢測微信返回）
async function checkSession(){
  return new Promise((resolve, reject) => {
      //通過內(nèi)置方法檢測
    wx.checkSession({
      success() {
        return resolve(true)
      },
      fail() {
        return resolve(false)
      }
    })
  })
}
// 總體檢測登錄狀態(tài)，包括token和微信登錄態(tài) 返回 true 或false

//在app.js的onload生命周期通過index.checkHasLogined調(diào)用,如果過期

async function checkHasLogined() {
  //獲取本地存儲(chǔ)的token
  const token = wx.getStorageSync('token')
  //如果沒有token，直接返回false
  if (!token) {
    return false
  }

  //檢測微信登錄態(tài)
  /**
   * 調(diào)用成功說明當(dāng)前 session_key 未過期，調(diào)用失敗說明 session_key 已過期
   */
  const loggined = await checkSession()

  //如果沒有登錄態(tài)，則移除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并且有效，并且微信登錄態(tài)也有效則返回true
  return true
}

module.exports = {
  login: login,
  register: register,
  checkSession:checkSession,
  checkHasLogined:checkHasLogined
}