前言

"每一個(gè)不曾起舞的日子，都是對(duì)生命的辜負(fù)。" —— 尼采

網(wǎng)站接入微信授權(quán)方案解析

微信內(nèi)授權(quán)實(shí)現(xiàn)方案&pc端使用微信授權(quán)實(shí)現(xiàn)方案

微信內(nèi)授權(quán)實(shí)現(xiàn)方案

三方平臺(tái)代公眾號(hào)發(fā)起授權(quán)

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&component_appid=ComponentAPPID#wechat_redirect

普通公眾號(hào)授權(quán)

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

參數(shù)說(shuō)明：

開(kāi)發(fā)接入流程

1. 微信公眾號(hào)配置授權(quán)域名（根據(jù)接入方式不同獲取不同配置入口不同）
   公眾號(hào)：「設(shè)置與開(kāi)發(fā)」-「功能設(shè)置」-「網(wǎng)頁(yè)授權(quán)域名」
   三方平臺(tái)：「三方平臺(tái)應(yīng)用列表」- 「應(yīng)用詳情」 -「開(kāi)發(fā)資料」-「公眾號(hào)開(kāi)發(fā)域名」

2. 準(zhǔn)備回調(diào)中間頁(yè)，微信授權(quán)成功會(huì)攜帶參數(shù)跳轉(zhuǎn)中間頁(yè)

3. 處理接收微信返回code，用于后續(xù)登錄/用戶(hù)信息同步等能力

非微信瀏覽器掃碼授權(quán)方案

1.打開(kāi)鏈接方式（官方提供一）

通過(guò)添加跳轉(zhuǎn)事件，將參數(shù)替換跳轉(zhuǎn)至登錄頁(yè)--微信內(nèi)掃一掃功能--前端接收通知并登錄

// 添加跳轉(zhuǎn)鏈接地址
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

2.使用微信chat-login方式（官方提供二）

1. 需準(zhǔn)備三方平臺(tái)賬號(hào)

2. 如下：（需在項(xiàng)目注入wxlogin.js文件）

3. 流程圖同上（無(wú)需跳出當(dāng)前項(xiàng)目）

// 網(wǎng)頁(yè)應(yīng)用需注入wxlogin.js文件
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>


// 網(wǎng)站應(yīng)用內(nèi)設(shè)置 設(shè)置二維碼容器
<div id="wechat_container"></div>


// 登錄二維碼
const login = new WxLogin({
  id: 'wechat_container',
  appid: APPID, // 根據(jù)實(shí)際情況填寫(xiě)
  scope: 'snsapi_login',
  redirect_uri: '回調(diào)地址',
  state: new Date().getTime() + '',
  href: '' // 二維碼樣式重置，需轉(zhuǎn)換base64
})

參數(shù)說(shuō)明

3.使用微信公眾號(hào)授權(quán)方式

1. 準(zhǔn)備一個(gè)h5頁(yè)面，作為中間授權(quán)使用（?必須使用微信環(huán)境打開(kāi)）

2. pc端制作登錄二維碼（?二維碼地址指向h5授權(quán)頁(yè)面）

3. pc端接收登錄通知（?確認(rèn)用戶(hù)是否同意微信授權(quán)）

4. 已授權(quán)/未授權(quán)處理對(duì)應(yīng)登錄流程

注：授權(quán)頁(yè)面需攜帶用戶(hù)標(biāo)識(shí)，會(huì)話(huà)id等參數(shù)用于登錄等后續(xù)操作

以上方案區(qū)別

相同點(diǎn)：以上方案均需借助三方平臺(tái)實(shí)現(xiàn)，都已實(shí)現(xiàn)解決掃碼登錄
不同點(diǎn)：1需跳出本頁(yè)面，部分業(yè)務(wù)場(chǎng)景不滿(mǎn)足，2，3方案為內(nèi)置二維碼形式，無(wú)需跳出頁(yè)面在本頁(yè)面即可完成登錄邏輯，3方案主要為公司內(nèi)業(yè)務(wù)場(chǎng)景使用（多租戶(hù)模式）

官方文檔參考地址：

公眾號(hào)網(wǎng)頁(yè)授權(quán)地址：developers.weixin.qq.com/doc/offiacc…
三方平臺(tái)代公眾號(hào)授權(quán)地址： developers.weixin.qq.com/doc/oplatfo…
qq登錄接入?yún)⒖嫉刂罚?wiki.connect.qq.com/%e6%94%be%e…