前言

"每一個不曾起舞的日子，都是對生命的辜負。" —— 尼采

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

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

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

三方平臺代公眾號發(fā)起授權

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

普通公眾號授權

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

開發(fā)接入流程

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

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

非微信瀏覽器掃碼授權方案

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

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

需準備三方平臺賬號
如下：（需在項目注入wxlogin.js文件）
流程圖同上（無需跳出當前項目）

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


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


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

參數(shù)說明

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