微信開放平台開發——網頁微信掃碼登錄（OAuth2.0）

1、OAuth2.0

　　OAuth（開放授權）是一個開放標准，允許用戶讓第三方應用訪問該用戶在某一網站上存儲的私密的資源（如照片，視頻，聯系人列表），而無需將用戶名和密碼提供給第三方應用。

　　允許用戶 提供一個令牌， 而不是用戶名和密碼來訪問他們存放在特定服務提供者的數據。每一個令牌授權一個特定的網站（例如，視頻編輯網站)在特定的時段（例如，接下來的2小時內）內訪問特定的資源（例如僅僅是某一相冊中的視頻）。這樣，OAuth允許用戶授權第三方網站訪問他們存儲在另外的服務提供者上的信息，而不需要分享他們的訪問許可或他們數據的所有內容。

2、目標

　　我們這里主要模擬使用OAuth2.0，用戶通過掃描我們網頁應用的二維碼並進行授權登錄來獲取用戶的基本信息的過程。詳細的接口相關信息可以在微信開放平台上查看： https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

3、前期准備（獲取微信開發者權限）

　　我們這里主要講的是網站（Web）應用，網站應用微信登錄是基於OAuth2.0協議標准構建的微信OAuth2.0授權登錄系統(即上面的協議)。在微信客戶端授權登錄(獲取用戶信息）的可以查看: http://www.cnblogs.com/0201zcr/p/5131602.html

　　在進行微信OAuth2.在進行微信OAuth2.0授權登錄接入之前，在微信開放平台注冊開發者帳號，並擁有一個已審核通過的網站應用，並獲得相應的AppID和AppSecret，申請微信登錄且通過審核后，可開始接入流程。

3.1、注冊開發者賬號

　　可以在 https://open.weixin.qq.com/ 這里申請開發的賬號。由於是騰訊的網頁，這里可以直接通過 QQ號進行登錄。

3.2、提交網站應用審核

　　在已經登錄的界面中選擇“管理中心”——》網站應用——》創建網站應用

 　　將會彈出下面的界面

　　填寫過后，還有有一個頁面需要填寫，提交一份紙質版申請書掃描件（會提供模板，我們下載再來填寫后，需蓋章，簽名），配置回調域名（掃碼登錄后會跳轉的頁面）等。

　　之后提交審核即可，等微信審核通過，我們即可獲得我們需要的網頁應用的 appid和AppSecret，並配置后回調的域名了（這三樣是我們開發所必須的）。

3.3、開發者資質認證

　　由於我們這里要使用微信登錄的接口，所以我們還需要向微信提出認證，只有認證了才能使用微信那些高級的接口。未認證的如下圖所示

 　　認證之后是這樣子的：

 　  我現在暫時沒有找到可以向公眾賬號那樣子的測試賬號的申請。如果有知道怎么可以申請到測試賬號的高手，希望能賜教一下。

　　接下來，我們就可以開始我們的網頁微信掃碼登錄開發了。

4、授權流程說明

　　微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網站，在微信用戶授權登錄已接入微信OAuth2.0的第三方應用后，第三方可以獲取到用戶的接口調用憑證（access_token），通過access_token可以進行微信開放平台授權關系接口調用，從而可實現獲取微信用戶基本開放信息和幫助用戶實現基礎開放功能等。

　　微信OAuth2.0授權登錄目前支持authorization_code模式，適用於擁有server端的應用授權。該模式整體流程為：

1. 第三方發起微信授權登錄請求，微信用戶允許授權第三方應用后，微信會拉起應用或重定向到第三方網站，並且帶上授權臨時票據code參數；
2. 通過code參數加上AppID和AppSecret等，通過API換取access_token；
3. 通過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操作。

 　　獲取access_token時序圖：

 

5、獲取網頁的二維碼

　　當我們通過微信的認證，獲取到了 appid和AppSecret，並配置了回調的域名。我們就已經可以獲取屬於我們網頁的二維碼了，獲取的方式很簡單，只需打開一個微信的鏈接，加上我們的appid和回調域名即可在網頁上面打開二維碼，用戶用微信客戶端掃碼並授權登錄之后即會跳轉到我們配置的回調域名下。

注意：

1、這里填寫的是域名（是一個字符串），而不是URL，因此請勿加http://等協議頭；
2、授權回調域名配置規范為全域名，比如需要網頁授權的域名為：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鑒權

5.1、請求url說明

　　第三方使用網站應用授權登錄前請注意已獲取相應網頁授權作用域（scope=snsapi_login），則可以通過在PC端打開以下鏈接：

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

 

 參數說明

參數	是否必須	說明
appid	是	應用唯一標識（前面認證網頁應用中獲得）
redirect_uri	是	重定向地址，需要進行UrlEncode（前面認證網頁應用中獲得）
response_type	是	填code
scope	是	應用授權作用域，擁有多個作用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login即可
state	否	用於保持請求和回調的狀態，授權請求后原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數，可設置為簡單的隨機數加session進行校驗

 返回說明

 　　用戶 允許授權后，將會重定向到redirect_uri的網址上，並且 帶上code和state參數

redirect_uri?code=CODE&state=STATE

 　　若用戶禁止授權，則重定向后不會帶上code參數，僅會帶上state參數

redirect_uri?state=STATE

5.2、事例：

　　一號店的微信二維碼鏈接如下：

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

 　　將其復制到瀏覽器中打開即可獲得一號店的二維碼，二維碼頁面如下：

　　通過使用微信客戶端的掃一掃功能，掃描該二維碼，即會跳轉到上面填寫redirect_uri所在的地址上。假如用戶同意授權，這里就獲得了微信返回的code參數了。

6、獲取用戶信息

　　假如前面已經獲得code。我們可以通過code參數去獲取用戶openid和access_token,進而獲得用戶的信息。

6.1、通過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參數
grant_type	是	填authorization_code

返回說明

正確的返回：

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

參數	說明
access_token	接口調用憑證
expires_in	access_token接口調用憑證超時時間，單位（秒）
refresh_token	用戶刷新access_token
openid	授權用戶唯一標識
scope	用戶授權的作用域，使用逗號（,）分隔
unionid	當且僅當該網站應用已獲得該用戶的userinfo授權時，才會出現該字段。

錯誤返回樣例：

{"errcode":40029,"errmsg":"invalid code"}

注意：

• code參數的超時時間是5分鍾，且每次請求的code參數的值都不一樣。
• access_token的超時時間是32分鍾。

6.2、通過access_token獲取用戶的基本信息

獲取的前提條件

• access_token有效且為超時；
• 微信用戶已授權給第三方應用賬號相應接口作用域（scope)【在二維碼生成連接那里填寫】

對於接口作用域（scope），能調用的接口有以下：

授權作用域（scope）	接口	接口說明
snsapi_base	/sns/oauth2/access_token	通過code換取access_token、refresh_token和已授權scope
	/sns/oauth2/refresh_token	刷新或續期access_token使用
	/sns/auth	檢查access_token有效性
snsapi_userinfo	/sns/userinfo	獲取用戶個人信息

 

　　使用snsapi_base作用域的授權是掃碼之后無需用戶點擊授權，掃碼后直接跳轉，用戶感覺不到授權了，但這種授權方式能獲取的數據量有限，這里我們要獲取用戶的基本信息，我們需要使用snsapi_userinfo授權。使用snsapi_userinfo授權，掃碼后出現類似於下面的授權界面

　　此接口用於獲取用戶個人信息。開發者 可通過OpenID來獲取用戶基本信息。特別需要注意的是， 如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取用戶基本信息中的unionid來區分用戶的唯一性，因為只要是同一個微信開放平台帳號下的移動應用、網站應用和公眾帳號，用戶的unionid是唯一的。換句話說，同一用戶，對同一個微信開放平台下的不同應用，unionid是相同的。請注意，在用戶修改微信頭像后，舊的微信頭像URL將會失效，因此開發者應該自己在獲取用戶信息后，將頭像圖片保存下來，避免微信頭像URL失效后的異常情況。

　　

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

 參數說明

參數	是否必須	說明
access_token	是	調用憑證（上一個請求中獲得）
openid	是	普通用戶的標識，對當前開發者帳號唯一（上一個請求中獲得）
lang	否	國家地區語言版本，zh_CN 簡體，zh_TW 繁體，en 英語，默認為zh-CN

返回說明

正確的Json返回結果：

{ 
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1", 
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

參數	說明
openid	普通用戶的標識，對當前開發者帳號唯一
nickname	普通用戶昵稱
sex	普通用戶性別，1為男性，2為女性
province	普通用戶個人資料填寫的省份
city	普通用戶個人資料填寫的城市
country	國家，如中國為CN
headimgurl	用戶頭像，最后一個數值代表正方形頭像大小（有0、46、64、96、132數值可選，0代表640*640正方形頭像），用戶沒有頭像時該項為空
privilege	用戶特權信息，json數組，如微信沃卡用戶為（chinaunicom）
unionid	用戶統一標識。針對一個微信開放平台帳號下的應用，同一用戶的unionid是唯一的。

錯誤的Json返回示例:

{ 
"errcode":40003,"errmsg":"invalid openid"
}

7、總結 

　　最近着手開發了微信網頁掃碼登錄和公眾號授權登錄收獲頗豐，兩者的開發很類似。以下是我個人摸索過程中發現的兩者的異同：

• 兩者都可以通過微信客戶端掃碼授權的方式，讓第三方頁面獲得微信用戶的一些基本信息（昵稱、性別、所在地、在微信唯一標示等……）。他們都是通過提供一個鏈接讓用戶授權的方式。但網頁版需要在頁面打開二維碼之后授權，而公眾號則需要用戶先關注了我們的公眾號，然后點開公眾號里面的鏈接，確認授權即可。
• 網頁掃碼登錄需要將授權的鏈接（二維碼鏈接）在網頁中打開、而公眾號授權登錄的鏈接必須要微信客戶端中打開。
• 無論網頁掃碼登錄還是在公眾號中授權登錄，都是通過授權的方式獲得一個code參數，之后通過code參數獲取access_token和openid和通過access_token和openid去獲取用戶的基本信息的請求鏈接是一樣的。
• 在開發公眾號授權登錄的過程中，我發現了有測試賬號的提供，足以滿足我們的測試和開發，但在開發網頁掃碼時，暫時未發現哪里能獲取測試賬號，我是通過申請獲取的。（希望知道哪里有測試賬號的請求高手賜教）。

 公眾賬號授權登錄：http://www.cnblogs.com/0201zcr/p/5131602.html

微信公眾號群發消息：http://www.cnblogs.com/0201zcr/p/5866296.html

　　  致謝：感謝您的閱讀！

ps：接后端外包開發