一、前言
昨天小組開了個會，讓我今天實現一個微信網頁授權的功能，可以讓用戶在授權之後無需再次登錄既可進入用戶授權界面。在這之前我也從沒接觸過微信公衆號開發之類的，也不知道公衆號後臺是啥樣子的，自己所在的小組也沒有自己的認證公衆號,就在這種情況下用一天的實現微信網頁授權的功能。
二、準備工作
1.一個怎樣的項目
上面也說了我所在的小組沒有自己的認證公衆號（普通申請的公衆號是不會開放高級接口的）也就說自己申請的公衆號是無法實現這類功能的。還有一點是我們所要實現的這個微信網頁授權並不是針對某個公衆號的，而是可以讓任意公衆號可以綁定我們的程序，自己的公衆號並不需要實現微信網頁授權這個功能，就可以使用授權功能。
2.技術調研
瞭解了上面的需求，自然是針對所要用到的技術進行調研了，主要用到就是微信的一些接口，所以我們先到微信公衆平臺技術文檔查找我們需要的資料。主要如下
1.回調域名
看來上面的示意圖我們知道，這個回調域名是在給我們請求網頁授權返回code的時候用的。所以開發者需要先到公衆平臺官網中的“開發 - 接口權限 - 網頁服務 - 網頁帳號 - 網頁授權獲取用戶基本信息”的配置選項中，修改授權回調域名。
請注意，這裏填寫的是域名（是一個字符串），而不是URL，因此請勿加 http:// 等協議頭； 另外授權回調域名配置規範爲全域名，比如需要網頁授權的域名爲：www.qq.com，配置以後此域名下面的頁面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth2.0鑑權。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com無法進行OAuth2.0鑑權
2.獲取授權
在這裏官方提供了兩種授權方式"snsapi_base"和"snsapi_userinfo"，他們都可以獲取用戶基本信息，但是既然提供兩種方式肯定有不一樣的地方。下面就介紹一下
- 相同點:都可以獲取用戶的基本信息
- 不同點:"snsapi_userinfo"發起的網頁授權，需要用戶手動同意纔可以繼續（如果用戶已關注公衆號則爲靜默模式，像snsapi_base一樣不會彈出提示），而"snsapi_base"授權不需要,比前者少了①②兩步；"snsapi_userinfo"授權獲取用戶基本信息不需要關注，而"snsapi_base"授權需要關注纔可獲取到
注意：上面有一個加粗標識的地方，因爲我在這裏在了一個跟頭。下面爲"snsapi_base"未關注公衆號時返回的錯誤提示信息。
{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: Ftu8IA0999s106 ]"}
第一步：獲取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_url | 是 | 授權後重定向的回調鏈接地址，請使用urlEncode對鏈接進行處理 |
| response_type | 是 | 返回類型，請填寫code |
| scope | 是 | 應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到暱稱、性別、所在地。並且，即使在未關注的情況下，只要用戶授權，也能獲取其信息） |
| state | 否 | 重定向後會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節 |
| #wechat_redirect | 是 | 無論直接打開還是做頁面302重定向時候，必須帶此參數 |
下圖爲scope等於snsapi_userinfo時的授權頁面：
如果用戶同意授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE。
code說明 ： code作爲換取access_token的票據，每次用戶授權帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。
第二步：通過code換取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
參數說明
| 參數 | 是否必須 | 說明 |
|---|---|---|
| appid | 是 | 公衆號的唯一標識 |
| secret | 是 | 公衆號的appsecret |
| code | 是 | 填寫第一步獲取的code參數 |
| scope | 是 | 填寫爲authorization_code |
返回說明 - 正確時返回的JSON數據包如下：
{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }
| 參數 | 描述 |
|---|---|
| access_token | 網頁授權接口調用憑證,注意：此access_token與基礎支持的access_token不同 |
| expires_in | access_token接口調用憑證超時時間，單位（秒） |
| refresh_token | 用戶刷新access_token |
| openid | 用戶唯一標識，請注意，在未關注公衆號時，用戶訪問公衆號的網頁，也會產生一個用戶和公衆號唯一的OpenID |
| scope | 用戶授權的作用域，使用逗號（,）分隔 |
錯誤時微信會返回JSON數據包如下（示例爲Code無效錯誤）:
{"errcode":40029,"errmsg":"invalid code"}
第三步：拉取用戶信息
如果網頁授權作用域爲snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了。如果網頁授權作用域爲snsapi_base需要關注後才能拉取用戶信息
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
參數說明
| 參數 | 描述 |
|---|---|
| access_token | 網頁授權接口調用憑證,注意：此access_token與基礎支持的access_token不同 |
| openid | 用戶的唯一標識 |
| lang | 返回國家地區語言版本，zh_CN 簡體，zh_TW 繁體，en 英語 |
返回說明 - 正確時返回的JSON數據包如下：
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":"1",
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46","privilege":[ "PRIVILEGE1" "PRIVILEGE2"],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
參數說明
| 參數 | 描述 |
|---|---|
| openid | 用戶的唯一標識 |
| nickname | 用戶暱稱 |
| sex | 用戶的性別，值爲1時是男性，值爲2時是女性，值爲0時是未知 |
| province | 用戶個人資料填寫的省份 |
| city | 普通用戶個人資料填寫的城市 |
| country | 國家，如中國爲CN |
| headimgurl | 用戶頭像，最後一個數值代表正方形頭像大小（有0、46、64、96、132數值可選，0代表640*640正方形頭像），用戶沒有頭像時該項爲空。若用戶更換頭像，原有頭像URL將失效。 |
| privilege | 用戶特權信息，json 數組，如微信沃卡用戶爲（chinaunicom） |
| unionid | 只有在用戶將公衆號綁定到微信開放平臺帳號後，纔會出現該字段。 |
錯誤時微信會返回JSON數據包如下（示例爲openid無效）:
{"errcode":40003,"errmsg":" invalid openid "}
附錄
另外還有"刷新access_token"、"檢驗授權憑證（access_token）"接口這裏就不作說明了，需要了解的可以去查閱官方文檔。
3.開發
上面我們已經了大概的流程了,自己有認證公衆號的人自己就可以嘗試開發了，我這邊沒有公衆號所以是從隔壁組借來的一個“appid”然後從他們那兒代理再跳到我這邊。什麼意思呢？就是回調域名調用的是他們那邊的接口，同時我也把自己這邊寫的一個接口（用來接收OpenId和access_token）帶過去，等他那邊獲取到OpenId和access_token在通過剛纔傳的那個接口返回給我。這樣我這邊就得到OpenId和access_token了，我也在這邊獲取用戶基本信息了。
三、常見問題
1.獲取不到用戶信息 答：你看你是用的是"snsapi_base"方式授權還是"snsapi_userinfo"方式授權,前者需要關注才能獲取到用戶信息，而後者無需關注也可以獲取；也有可能是access_token過期導致獲取失敗，具體根據返回提示信息判斷。
2.關於代理的問題 答：所謂的代理就是回調域名調用的是他們那邊的接口，同時我也把自己這邊寫的一個接口（用來接收OpenId和access_token）帶過去，等他那邊獲取到OpenId和access_token在通過剛纔傳的那個接口返回給我。這樣我這邊就得到OpenId和access_token了，我也在這邊獲取用戶基本信息了。
3.微信有緩存怎麼辦 答：瀏覽器都有緩存，但是微信清理起來挺麻煩的，我們該怎麼解決這類問題？這個和PC中處理的方式一樣可以使用時間戳，或者加版本號，通過版本號判斷文件是重新拉取還是從緩存中獲取
4.兩種授權方式有什麼不同 答："snsapi_userinfo"發起的網頁授權，需要用戶手動同意纔可以繼續（如果用戶已關注公衆號則爲靜默模式，像snsapi_base一樣不會彈出提示），而"snsapi_base"授權不需要；"snsapi_userinfo"授權獲取用戶基本信息不需要關注，而"snsapi_base"授權需要關注纔可獲取到
上面大概就是我實現"微信網頁授權"功能的大致流程，歡迎大家探討指點。
參考：微信公衆平臺技術文檔