快捷導(dǎo)航

微信小程序授權(quán)登錄的優(yōu)雅處理方式

更新時(shí)間：2021年03月10日 11:49:17 作者：FTD止水

這篇文章主要給大家介紹了關(guān)于微信小程序授權(quán)登錄的優(yōu)雅處理方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

當(dāng)微信小程序項(xiàng)目中涉及到獲取用戶信息并實(shí)現(xiàn)用戶登錄時(shí)，可以通過(guò)微信官方提供的登錄能力方便地獲取微信的用戶身份標(biāo)識(shí)，快速建立小程序內(nèi)的用戶體系。官方文檔只是提供如何去調(diào)用授權(quán)登錄，如果直接原封不動(dòng)的照搬文檔來(lái)進(jìn)行代碼編寫，這樣勢(shì)必會(huì)造成代碼的維護(hù)性差，所以本篇著重介紹如果更優(yōu)雅的處理微信小程序的授權(quán)登錄。

授權(quán)登錄的基本流程

上圖是微信小程序官網(wǎng)提供的授權(quán)登錄基本流程圖，這里我只從前端開發(fā)的角度來(lái)講解一下該流程。

通過(guò)wx.login()獲取臨時(shí)登錄憑證code。
通過(guò)調(diào)用服務(wù)端提供的接口把code傳遞給服務(wù)端，然后服務(wù)端會(huì)返回給前端openid和sesstion_key。這就代表已經(jīng)成功完成授權(quán)登錄了，至于openid和sesstion_key的用途，后面再進(jìn)行講解。

大體的登錄流程搞清楚之后，就可以進(jìn)行代碼的編寫了。因?yàn)槲⑿盘峁┑腶pi接口調(diào)用不利于代碼維護(hù)，所以我借助了promise進(jìn)行封裝處理（不了解的可以看ES6文檔，里面有詳細(xì)介紹），這樣做的好處就是以后可以鏈?zhǔn)秸{(diào)用接口，也可以結(jié)合async/await（ES6語(yǔ)法）將異步接口進(jìn)行同步處理。

get/post 接口的封裝處理

在根目錄中創(chuàng)建service文件夾，用于存放與接口相關(guān)的代碼，在service文件夾創(chuàng)建一個(gè)myRequest.js文件并對(duì)小程序的get/post請(qǐng)求進(jìn)行封裝處理，代碼如下：

//get請(qǐng)求封裝(跳頁(yè)判斷)
//通過(guò)全局函數(shù)getApp可以獲取全局變量，需要全局的數(shù)據(jù)可以在根目錄下的app.js進(jìn)行設(shè)置
let app=getApp();
const myGet = (url, data)=>{
 return new Promise((resolve, reject)=>{
 wx.request({
  url: `${app.globalData.HTTP}${url}`,
  data:data,
  method:"GET",
  //這個(gè)authorization就是含有openid和sesstion_key信息的值
  header: { 'authorization': app.globalData.authorization},//獲取全局變量中的用戶信息，并放入到請(qǐng)求頭中
  success:(res)=>{
  if (res.data.code == 409) {
   //409代表用戶未進(jìn)行登錄，強(qiáng)制跳到寫好的登錄頁(yè)
   wx.navigateTo({
   url: '../login/login'
   })
  } else{
   resolve(res.data);
  }
  },
  fail:(res)=>{
  reject();
  }
 })
 })
}
//post請(qǐng)求封裝(跳頁(yè)判斷)
const myPost = (url, data) => {
 return new Promise((resolve, reject) => {
 wx.request({
  url: `${app.globalData.HTTP}${url}`,
  data: data,
  method: "POST",
  header: { 'authorization': app.globalData.authorization},
  success: (res) => {
  if (res.data.code == 409){
   wx.navigateTo({
   url: '../login/login'
   })
  }else{
   resolve(res.data);
  }
  
  },
  fail: (res) => {
  reject();
  }
 })
 })
}
module.exports = {
 myGet,
 myPost,
}

全局變量配置app.js代碼如下（注意全局變量數(shù)據(jù)會(huì)在刷新頁(yè)面或是重新進(jìn)入小程序之后初始化，并不能永久保存當(dāng)前的數(shù)據(jù)狀態(tài)）：

//app.js
App({
 onLaunch: function() {
 //這里可以根據(jù)項(xiàng)目實(shí)際需求寫一些項(xiàng)目初始化需要執(zhí)行的代碼
 },
 globalData: {
 HTTP: "https://shop.yamecent.com/",
 //我們獲取openid和sesstion_key之后，會(huì)把它存放到小程序內(nèi)存的authorization中，這樣數(shù)據(jù)不會(huì)丟失，除非刪除該小程序
 authorization: wx.getStorageSync('authorization') || "",//獲取存儲(chǔ)在小程序內(nèi)存中的authorization
 }
})

授權(quán)登錄接口封裝

這部分封裝會(huì)用到async/await，將異步接口進(jìn)行同步處理，不了解的可以參看ES6文檔說(shuō)明，在service文件夾下創(chuàng)建login.js代碼如下：

const myRequest = require('./myRequest.js');
const app = getApp();
const HTTP = app.globalData.HTTP;
//微信login接口獲取code封裝 
const myLogin=()=>{
 return new Promise((resolve, reject)=>{
 wx.login({
  success:(res)=>{
  resolve(res.code);
  },
  fail:(res)=>{
  reject(res.errMsg);
  console.log("微信登錄獲取code失敗");
  }
 })
 })
}
//獲取openid和session_key接口封裝
const getUserMsg=(myUrl,myData)=>{
 return new Promise((resolve,reject)=>{
 wx.request({
  url: myUrl,
  method: "POST",
  data: myData,
  success:(res)=>{
  if(res.data.code==500){
   //獲取失敗
   wx.showToast({
   title: res.data.msg,
   icon: 'none',
   duration: 2000,
   mask:true,
   })
   resolve(500);//失敗是返回500   
  }else{
   resolve(res.data.data);
  }  
  },
  fail:(res)=>{
  reject(res.data.msg);
  console.log("獲取openid和session_key接口失敗");  
  }
 })
 })
}

//封裝存儲(chǔ)（注意：這里的存儲(chǔ)過(guò)程是異步的）
const mySetStorage=(key,val)=>{
 return new Promise((resolve, reject) => {
 wx.setStorage({
  key: key,
  data: val,
  success: () => {
  resolve(true);
  },
  fail: () => {
  reject(false);
  }
 })
 }) 
}

//封裝獲取存儲(chǔ)
const myGetStorage=(key)=>{
 return new Promise((resolve,reject)=>{
 wx.getStorage({
  key: 'key',
  success: (res)=>{
  resolve(res.data);
  },
  fail:()=>{
  reject("獲取存儲(chǔ)失敗");
  }
 })
 })
}


//授權(quán)方法封裝
//sendData是通過(guò)授權(quán)按鈕獲取到的用戶信息，這里要作為參數(shù)傳遞給后臺(tái)來(lái)保存用戶的信息
//cb是授權(quán)登錄成功之后所要執(zhí)行的函數(shù)，具體是什么功能的函數(shù)，要根據(jù)項(xiàng)目需求而定，也可能不需要
const myAuthorize = (sendData,cb="") => {
 async function accredit() {
 wx.showLoading({
  title: '認(rèn)證中',
  mask:true
 })
 let code = await myLogin();//微信登陸獲取code接口
 sendData.code=code;
 let author = await getUserMsg(`${HTTP}auth`, sendData);//獲取后臺(tái)openid sesstion_key接口
 wx.hideLoading();
 if(author==500){
  return;
 }
 await mySetStorage("authorization", author.Authorization);//存到內(nèi)存中，進(jìn)入小程序中獲取并存入app.globalData中
 app.globalData.authorization = author.Authorization;
 typeof cb == "function" && cb(author);//回調(diào)所需要用的登陸狀態(tài)參數(shù)
 //這里可以補(bǔ)充一下其它業(yè)務(wù)邏輯，如tabbar用戶購(gòu)物車數(shù)量等邏輯
 wx.showToast({
  title: '成功授權(quán)',
  icon: 'success',
  duration: 2000,
  mask: true
 });    

 
 }
 accredit();
}

module.exports = {
 myAuthorize,
 mySetStorage,
 myGetStorage
}

授權(quán)登錄封裝好了之后再看看如何在項(xiàng)目中如何使用，由于微信小程序授權(quán)只能通過(guò)button來(lái)觸發(fā)，所以使用 button 組件，并將 open-type 指定為 getUserInfo 類型，獲取用戶基本信息。login.wxml代碼如下：

<button class='btn' open-type="getUserInfo" bindgetuserinfo='gotoLogin'>立即登錄</button>

login.js代碼如下:

// pages/login/login.js
const myRequest = require('../../common/script/myRequest.js');
const login = require('../../common/script/login.js');
const app = getApp();
const HTTP = app.globalData.HTTP;
Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 
 },
 gotoLogin: function (e) {
 let sendOjb={};//用于存放用戶信息
 if (e.detail.errMsg =="getUserInfo:ok"){
  sendOjb = { avatar: e.detail.userInfo.avatarUrl,
     nickname: e.detail.userInfo.nickName, 
     sex: e.detail.userInfo.gender,
     province: e.detail.userInfo.province, 
     city: e.detail.userInfo.city}; 
  login.myAuthorize(sendOjb,()=>{
  wx.navigateBack();//成功之后返回之前的頁(yè)面，也可以根據(jù)項(xiàng)目需求寫一些其它的邏輯
  }) 
 }else{
  
 }
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 */
 onLoad: function (options) {

 },
})