前言

"每一個(gè)不曾起舞的日子，都是對生命的辜負(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)代公眾號發(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

普通公眾號授權(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ù)說明：

參數(shù)	是否必須	說明
appid	是	公眾號的唯一標(biāo)識(shí)
redirect_uri	是	授權(quán)后重定向的回調(diào)鏈接地址，請使用 urlEncode 對鏈接進(jìn)行處理
response_type	是	返回類型，請?zhí)顚慶ode
scope	是	應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地。并且，即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息）
state	否	重定向后會(huì)帶上state參數(shù)，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值，最多128字節(jié)
#wechat_redirect	是	無論直接打開還是做頁面302重定向時(shí)候，必須帶此參數(shù)
forcePopup	否	強(qiáng)制此次授權(quán)需要用戶彈窗確認(rèn)；默認(rèn)為false；
ComponentAPPID	否	三方平臺(tái)id（三方平臺(tái)代公眾號授權(quán)時(shí)此參數(shù)必須）

開發(fā)接入流程

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

準(zhǔn)備回調(diào)中間頁，微信授權(quán)成功會(huì)攜帶參數(shù)跳轉(zhuǎn)中間頁
處理接收微信返回code，用于后續(xù)登錄/用戶信息同步等能力

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

1.打開鏈接方式（官方提供一）

通過添加跳轉(zhuǎn)事件，將參數(shù)替換跳轉(zhuǎn)至登錄頁--微信內(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

參數(shù)	是否必須	說明
appid	是	應(yīng)用唯一標(biāo)識(shí)
redirect_uri	是	請使用urlEncode對鏈接進(jìn)行處理
response_type	是	填code
scope	是	應(yīng)用授權(quán)作用域，擁有多個(gè)作用域用逗號（,）分隔，網(wǎng)頁應(yīng)用目前僅填寫snsapi_login
state	否	用于保持請求和回調(diào)的狀態(tài)，授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)

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

需準(zhǔn)備三方平臺(tái)賬號
如下：（需在項(xiàng)目注入wxlogin.js文件）
流程圖同上（無需跳出當(dāng)前項(xiàng)目）

// 網(wǎng)頁應(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í)際情況填寫
  scope: 'snsapi_login',
  redirect_uri: '回調(diào)地址',
  state: new Date().getTime() + '',
  href: '' // 二維碼樣式重置，需轉(zhuǎn)換base64
})

參數(shù)說明

參數(shù)	是否必須	說明
self_redirect	否	true：手機(jī)點(diǎn)擊確認(rèn)登錄后可以在 iframe 內(nèi)跳轉(zhuǎn)到 redirect_uri，false：手機(jī)點(diǎn)擊確認(rèn)登錄后可以在 top window 跳轉(zhuǎn)到 redirect_uri。默認(rèn)為 false。
id	是	第三方頁面顯示二維碼的容器id
appid	是	應(yīng)用唯一標(biāo)識(shí)，在微信開放平臺(tái)提交應(yīng)用審核通過后獲得
scope	是	應(yīng)用授權(quán)作用域，擁有多個(gè)作用域用逗號（,）分隔，網(wǎng)頁應(yīng)用目前僅填寫snsapi_login即可
redirect_uri	是	重定向地址，需要進(jìn)行UrlEncode
state	否	用于保持請求和回調(diào)的狀態(tài)，授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)
style	否	提供"black"、"white"可選，默認(rèn)為黑色文字描述。詳見文檔底部FAQ
href	否	自定義樣式鏈接，第三方可根據(jù)實(shí)際需求覆蓋默認(rèn)樣式。

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

準(zhǔn)備一個(gè)h5頁面，作為中間授權(quán)使用（?必須使用微信環(huán)境打開）
pc端制作登錄二維碼（?二維碼地址指向h5授權(quán)頁面）
pc端接收登錄通知（?確認(rèn)用戶是否同意微信授權(quán)）
已授權(quán)/未授權(quán)處理對應(yīng)登錄流程

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

以上方案區(qū)別

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

官方文檔參考地址：

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

作者：庫課科技前端
鏈接：https://juejin.cn/post/7352831525678039055
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

該文章在 2025/1/15 12:54:47 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。