昨天搞了個(gè)服務(wù)器，騰訊云的輕量應(yīng)用服務(wù)器，價(jià)格還算實(shí)惠。又搞了個(gè)自己的域名，但在起名字時(shí)犯了難，想了半天都不知道叫啥，后來(lái)還是感謝對(duì)象的指點(diǎn)，哈哈哈。

擁有了自己的服務(wù)器，接下來(lái)，就可以開(kāi)始我的后端微服務(wù)學(xué)習(xí)啦，加油共勉。

一、需求分析，問(wèn)題描述

1、需求

微信掃碼授權(quán)，如果允許授權(quán)，則登錄成功，跳轉(zhuǎn)到首頁(yè)。

2、問(wèn)題

• 微信掃碼授權(quán)有幾種實(shí)現(xiàn)方式？
• 說(shuō)一下這幾種實(shí)現(xiàn)方式的原理是什么？
• vue中的微信掃碼授權(quán)登錄，與uniapp和原生小程序的微信授權(quán)登錄，它們之間有共同點(diǎn)嗎？

二、解決問(wèn)題，答案速覽

1、網(wǎng)頁(yè)跳轉(zhuǎn)式

前端只需調(diào)用后端微信登錄的接口即可。生成微信二維碼、傳遞code參數(shù)等操作都在后端處理。

2、網(wǎng)頁(yè)內(nèi)嵌式

• 在public/index.html的head標(biāo)簽中引入wxLogin.js。
• 在template中設(shè)置一個(gè)內(nèi)嵌二維碼容器，可以自定義容器的樣式。
• 創(chuàng)建WxLogin對(duì)象，配置必要參數(shù)，并通過(guò)id關(guān)聯(lián)內(nèi)嵌二維碼容器。其中，參數(shù)redirect_uri和appid最關(guān)鍵，redirect_uri配置的是掃碼授權(quán)成功后的重定向頁(yè)面地址，在重定向頁(yè)面可以拿到最最最重要的code參數(shù)。
• 在重定向頁(yè)面通過(guò)code參數(shù)請(qǐng)求后端微信登陸的接口，獲取access_token并存到本地，登錄成功跳轉(zhuǎn)首頁(yè)。此處根據(jù)業(yè)務(wù)自定義邏輯即可。

// 在public/index.html的head標(biāo)簽中引入
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

<!-- 內(nèi)嵌二維碼容器 -->
<div id="login_container"></div>


// 獲取code
var obj = new WxLogin({
      // 需要顯示內(nèi)嵌二維碼的容器id
      id: 'login_container', 
      // 應(yīng)用ID
      appid: '', 
      // 網(wǎng)頁(yè)默認(rèn)即可
      scope: 'snsapi_login', 
      // 授權(quán)成功后回調(diào)的url
      redirect_uri: encodeURIComponent(''), 
      // 可設(shè)置為簡(jiǎn)單的隨機(jī)數(shù)加session用來(lái)校驗(yàn)
      state: Math.ceil(Math.random() * 1000), 
      // 二維碼的樣式，提供"black"、"white"可選。
      style: 'black', 
      // 自定義樣式鏈接
      href: '' 
    })
  }

// 通過(guò)code請(qǐng)求接口獲取access_token
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute


let code = route.query.code
let state = route.query.state
if (code) {
  let codeForm = {
    code: code,// 關(guān)鍵
    state: state,
  }
  // 調(diào)微信登錄的后端接口
  LoginApi(codeForm).then(res => {
    localStorage.setItem('access_token', res.data.token)
    router.push('home')
  })
}

三、問(wèn)題解析，知識(shí)總結(jié)

1、微信掃碼授權(quán)登錄有幾種實(shí)現(xiàn)方式？

微信掃碼授權(quán)登錄有兩種實(shí)現(xiàn)方式：網(wǎng)頁(yè)外鏈?zhǔn)健⒕W(wǎng)頁(yè)內(nèi)嵌式。

網(wǎng)頁(yè)外鏈?zhǔn)?/h4>

在選擇帶第三方登錄方式時(shí)，點(diǎn)擊微信登錄，然后會(huì)跳轉(zhuǎn)到一個(gè)新的微信掃碼頁(yè)面。當(dāng)用戶掃碼允許授權(quán)登錄后，就會(huì)自動(dòng)關(guān)閉掃碼頁(yè)面，然后跳轉(zhuǎn)到首頁(yè)。

此方式可以算是后端處理。

網(wǎng)頁(yè)內(nèi)嵌式

在選擇帶第三方登錄方式時(shí)，點(diǎn)擊微信登錄，會(huì)在當(dāng)前頁(yè)面的某處彈出一個(gè)內(nèi)嵌的二維碼。當(dāng)用戶掃碼允許授權(quán)登錄后，就會(huì)直接跳轉(zhuǎn)到首頁(yè)。

此方式可以算是前端處理，但這種方式比較推薦，用戶體驗(yàn)比較好。

2、說(shuō)一下這幾種實(shí)現(xiàn)方式的原理是什么？

網(wǎng)頁(yè)外鏈?zhǔn)?/h4>

步驟一：用戶進(jìn)入登錄頁(yè)，在登錄頁(yè)選擇微信登陸，前端調(diào)用后端微信登錄的接口，后端會(huì)生成微信二維碼，將地址返回給前端，前端響應(yīng)后會(huì)在新頁(yè)面打開(kāi)這個(gè)二維碼地址。

步驟二：用戶用微信掃碼，當(dāng)授權(quán)成功后，就會(huì)自動(dòng)重定向到后端掃碼回調(diào)的接口?？梢宰詣?dòng)重定向到指定接口，是因?yàn)樵谏啥S碼時(shí)，回調(diào)地址填的是后端接口地址，此處區(qū)別于網(wǎng)頁(yè)內(nèi)嵌式。

步驟三：后端會(huì)在重定向掃碼回調(diào)接口中獲取到code參數(shù)，再通過(guò)code參數(shù)獲取到access_token、openid，進(jìn)而獲取用戶信息，最終返回重定向首頁(yè)地址給前端，登錄成功跳轉(zhuǎn)到首頁(yè)。其中，地址內(nèi)攜帶著access_token、openid、用戶信息等參數(shù)，前端會(huì)保存這些參數(shù)到本地存儲(chǔ)中。

網(wǎng)頁(yè)內(nèi)嵌式

步驟一：用戶進(jìn)入登錄頁(yè)，在登錄頁(yè)選擇微信登陸，然后就會(huì)在內(nèi)嵌二維碼容器中顯示出二維碼。

步驟二：用戶用微信掃碼，當(dāng)授權(quán)成功后，就會(huì)自動(dòng)重定向到中轉(zhuǎn)頁(yè)。其中，中轉(zhuǎn)頁(yè)可以是注冊(cè)頁(yè)，也可以是當(dāng)前登錄頁(yè)。

步驟三：前端在中轉(zhuǎn)頁(yè)獲取當(dāng)前路由對(duì)象的query信息，并通過(guò)請(qǐng)求接口將query信息中的code參數(shù)傳給后端。

步驟四：后端就會(huì)通過(guò)code參數(shù)獲取到access_token、openid，進(jìn)而獲取用戶信息，當(dāng)前端拿到這些參數(shù)后就會(huì)登錄成功，跳轉(zhuǎn)到首頁(yè)，并保存到本地存儲(chǔ)中。

3、vue中的微信掃碼授權(quán)登錄，與uniapp和原生小程序的微信授權(quán)登陸，它們之間有共同點(diǎn)嗎？

uniapp的微信授權(quán)登錄，主要借助uni.getUserProfile和uni.login這兩個(gè)API實(shí)現(xiàn)。getUserProfile作用是獲取用戶授權(quán)，login作用是獲取code參數(shù)。

原生小程序的微信授權(quán)登錄，主要借助wx.getUserProfile和wx.login這兩個(gè)API實(shí)現(xiàn)。getUserProfile作用是獲取用戶授權(quán)，login作用是獲取code參數(shù)。

uniapp和原生小程序的微信授權(quán)登陸的原理，和vue中的微信掃碼授權(quán)登錄基本一致，掌握其一即可。