微信網頁授權登錄 OAuth2.0

如果用戶在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取用戶基本信息，進而實現業務邏輯。

　　-- 引自 微信開放文檔 

　　要接入微信授權登錄，先確保有一個公眾號，獲取微信信息，得有一個主體。開發前，需要提前准備好網頁域名的配置，在公眾平台官網中的 “開發 - 接口權限 - 網頁服務 - 網頁帳號 - 網頁授權獲取用戶基本信息” 的配置項中添加。需要注意的是，此處填寫的是域名，而非地址，去掉 http:// 類似的協議頭；域名配置只需要填寫一級域名，如 www.xx.com，而非 www.xx.com/xxx/xx.html。

　　接下來看看微信的流程

　　　　（1）引導用戶進入授權頁面同意授權，獲取code；（跳轉到微信服務頁面，然后微信服務器會將參數放在開發者指定的返回地址中）

　　　　（2）通過code換取網頁授權access_token；（拿到 code 后，向微信服務端換取access_token ）

　　　　（3）拉取用戶信息（靜默授權僅能拿到用戶的 OpenID，手動授權能獲取到 UnionID、昵稱頭像等）

　　詳細步驟

    　　　1. 獲取code。引導關注者打開如下頁面：

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

　　　　其中參數如下：

appid	公眾號的唯一標識
redirect_uri	授權后重定向的回調鏈接地址， 請使用 urlEncode 對鏈接進行處理
response_type	返回類型，請填寫code
scope	應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。並且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ）
state	重定向后會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節
#wechat_redirect	無論直接打開還是做頁面302重定向時候，必須帶此參數

　　　　兩種 scope 的區別在於，snsapi_base 屬於靜默授權，會跳轉到回調頁，對於用戶是無感知的，只能獲取用戶的 OpenID；snsapi_userinfo 屬於手動授權，會彈出一個授權彈框，用戶點擊確認后，就會跳轉到回調頁，並攜帶必要的數據。需要指出的是，若近期進行過手動授權，或者關注公眾號的用戶通過公眾號進入，會采取靜默的方式授權。

　　　　授權后，頁面跳轉至 redirect_uri/?code=CODE&state=STATE。redirect_uri 應當使用https鏈接來確保授權code的安全性。通常，我們在一個頁面上完成網頁的授權登錄，因此可以通過 STATE 來添加標識符，頁面首次加載時，進入授權流程，在跳轉 url 中的STATE 中增加一個參數，當從微信頁面再次返回時，讀取到此參數，即可判斷已經完成了步驟1，即將進入步驟2 。

　　　　2. 通過code換取網頁授權access_token 。拿到 code 后，請求以下接口獲取 access_token，若網頁授權的作用域為snsapi_base，則此步驟即可拿到 OpenID，流程到此為止。此步驟的請求，需要放在后端請求，公眾號的secret和獲取到的access_token安全級別都非常高，必須只保存在服務器，不可在前端操作，且前端操作會導致跨域。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

 

相關代碼：

function redirectWX(type){
  // type 標識符，判斷為是否進行手動授權
  var url = location.href
  url = url.replace(/code=([^\&]*)(\&|$)/, '').replace(/state=([^\&]*)(\&|$)/, '')
  var REDIRECT_URI = encodeURIComponent(url) 
  var APPID = 'wx3e*********'
  var SCOPE = 'snsapi_base'
  var STATE = 'silent'
  if(type){
    SCOPE = 'snsapi_userinfo'
    STATE = 'confirm'
  }
  var redirectUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + REDIRECT_URI + '&response_type=code&scope=' + SCOPE + '&state=' + STATE + '#wechat_redirect'

  location.replace(redirectUrl) 
}