進行微信公眾號內(nèi)應用開發(fā)一年多了，最近不是很忙，就想起整理下自己用的東西。所以今天介紹下微信網(wǎng)頁授權登錄實現(xiàn)。一呢，幫助以后自己快速回憶；二呢，幫助剛接觸的同行。
需求：如果用戶在微信客戶端中訪問第三方網(wǎng)頁，公眾號可以通過微信網(wǎng)頁授權機制，來獲取用戶基本信息，進而實現(xiàn)業(yè)務邏輯。
準備：開發(fā)者需要先到公眾平臺官網(wǎng)中的“開發(fā) - 接口權限 - 網(wǎng)頁服務 - 網(wǎng)頁帳號 - 網(wǎng)頁授權獲取用戶基本信息”的配置選項中，修改授權回調(diào)域名。
開門見山，直接開始吧。
第一步：用戶同意授權，獲取code（前端發(fā)起）
在確保微信公眾賬號擁有授權作用域（scope參數(shù)）的權限的前提下（服務號獲得高級接口后，默認擁有scope參數(shù)中的snsapi_base和snsapi_userinfo），引導關注者打開如下頁面：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect?
若提示“該鏈接無法訪問”，請檢查參數(shù)是否填寫錯誤，是否擁有scope參數(shù)對應的授權作用域權限。
參數(shù)說明：
參考鏈接(請在微信客戶端中打開此鏈接體驗):
scope為snsapi_base（不需要用戶授權）
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
scope為snsapi_userinfo（需要用戶授權）
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
用戶同意授權后
如果用戶同意授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE。
code說明 ： code作為換取access_token的票據(jù)，每次用戶授權帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。
第二步：通過code換取網(wǎng)頁授權access_token（后端）
請求方法：
獲取code后，請求以下鏈接獲取access_token： ?https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
參數(shù)說明：
我們看到鏈接中帶有公眾號的secret參數(shù)，以及獲取到的access_token安全級別都非常高，必須只保存在服務器，不允許傳給客戶端。后續(xù)刷新access_token、通過access_token獲取用戶信息等步驟，也必須從服務器發(fā)起。、
返回說明
正確時返回的JSON數(shù)據(jù)包如下：
{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }
第三步：刷新access_token(如果需要，后端)
由于access_token擁有較短的有效期，當access_token超時后，可以使用refresh_token進行刷新，refresh_token有效期為30天，當refresh_token失效之后，需要用戶重新授權。
請求方法：
獲取第二步的refresh_token后，請求以下鏈接獲取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
返回說明
正確是返回的JSON數(shù)據(jù)包如下：
{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }
第四步：拉取用戶信息（需scope為snsapi_userinfo，后端）
如果網(wǎng)頁授權作用域為snsapi_userinfo，則此時開發(fā)者可以通過access_token和openid拉取用戶信息了。
請求方法
http：GET（請使用https協(xié)議） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
參數(shù)說明
返回說明
正確時返回的JSON數(shù)據(jù)包如下：
{ ? ?"openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl": ? ?"http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ
4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ? ? ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
上面的步驟是我從微信開發(fā)文檔copy過來的。不一樣的是我要總結下我們的前后端實現(xiàn)的大體步驟。第一步是前端發(fā)起，由于安全需要和數(shù)據(jù)存儲二、三、四步都由后端實施：
1、前端打開? ?https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect? 鏈接（具體參數(shù)賦值看上面），微信會返回code參數(shù)，并跳轉redirect_uri的鏈接，code作為url參數(shù)。
2、前端把這個code作為數(shù)據(jù)調(diào)用后端登錄接口，后端拿到code，加上appid和secret參數(shù) 請求??https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code? 來獲取access_token,同時拿到openid。
3.后端會先判斷數(shù)據(jù)庫里有沒有該openid，如果有的話，后端將數(shù)據(jù)（用戶信息）返回到前端；如果沒有，則請求??https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code? 獲取用戶信息，返回給前端并存在數(shù)據(jù)庫里。
微信網(wǎng)頁授權文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
