微信公衆平臺開發：OAuth2.0網頁授權

微信公衆平臺最近新推出微信認證，認證後可以獲得高級接口權限，其中一個是OAuth2.0網頁授權，很多朋友在使用這個的時候失敗了或者無法理解其內容，希望我出個教程詳細講解一下，於是便有了這篇文章。

 

一、什麼是OAuth2.0

官方網站：http://oauth.net/   http://oauth.net/2/

權威定義：OAuth is An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications. 

OAuth是一個開放協議，允許用戶讓第三方應用以安全且標準的方式獲取該用戶在某一網站、移動或桌面應用上存儲的私密的資源（如用戶個人信息、照片、視頻、聯繫人列表），而無需將用戶名和密碼提供給第三方應用。

OAuth 2.0是OAuth協議的下一版本，但不向後兼容OAuth 1.0。 OAuth 2.0關注客戶端開發者的簡易性，同時爲Web應用，桌面應用和手機，和起居室設備提供專門的認證流程。

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

新浪微博API目前也使用OAuth 2.0。

原文：http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html

二、微信公衆平臺OAuth2.0授權

微信公衆平臺OAuth2.0授權詳細步驟如下：

1. 用戶關注微信公衆賬號。
2. 微信公衆賬號提供用戶請求授權頁面URL。
3. 用戶點擊授權頁面URL，將向服務器發起請求
4. 服務器詢問用戶是否同意授權給微信公衆賬號(scope爲snsapi_base時無此步驟)
5. 用戶同意(scope爲snsapi_base時無此步驟)
6. 服務器將CODE通過回調傳給微信公衆賬號
7. 微信公衆賬號獲得CODE
8. 微信公衆賬號通過CODE向服務器請求Access Token
9. 服務器返回Access Token和OpenID給微信公衆賬號
10. 微信公衆賬號通過Access Token向服務器請求用戶信息(scope爲snsapi_base時無此步驟)
11. 服務器將用戶信息回送給微信公衆賬號(scope爲snsapi_base時無此步驟)

 

 

使用的AppId和AppSecret在開發者中心-開發者ID中，可以找到。

 

 

1. 配置授權回調頁面域名

進入微信公衆平臺後臺後，依次進入開發者中心-權限表，找到網頁授權獲取用戶基本信息，

 

 

點擊右側的修改。原文：http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html

授權回調域名配置規範爲全域名並且不帶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鑑權。

這裏我們填寫方倍工作室的一個百度應用二級域名爲 mascot.duapp.com

原文：http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html

如果你的網址沒有被列入過黑名單，就會在頂部出現

然後，域名配置就成功了。

 

2. 用戶授權並獲取code

在域名根目錄下，新建一個文件，命名爲oauth2.php，其內容爲

<?php
if (isset($_GET['code'])){
    echo $_GET['code'];
}else{
    echo "NO 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	是	授權後重定向的回調鏈接地址
response_type	是	返回類型，請填寫code
scope	是	應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到暱稱、性別、所在地。並且，即使在未關注的情況下，只要用戶授權，也能獲取其信息）
state	否	重定向後會帶上state參數，開發者可以填寫任意參數值
#wechat_redirect	否	直接在微信打開鏈接，可以不填此參數。做頁面302重定向時候，必須帶此參數

應用授權作用域：由於snsapi_base只能獲取到openid，意義不大，所以我們使用snsapi_userinfo。
回調地址：填寫爲剛纔上傳後的oauth2.php的文件地址，
state參數：隨便一個數字，這裏填1

構造請求url如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth2.php&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

把這個鏈接發送到微信中，以便在微信瀏覽器中打開，這裏使用A鏈接封裝如下：

OAuth2.0網頁授權演示 
<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth2.php&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect">點擊這裏體驗</a>
技術支持 方倍工作室

在微信中顯示如下

點擊綁定後，彈出應用授權界面

選擇允許，點擊

跳轉到auth2.php頁面，執行

echo $_GET['code']

界面上顯示的就是code，這時候通過右上角按鈕中的複製鏈接，得到鏈接如下：

http://mascot.duapp.com/oauth2.php?code=00b788e3b42043c8459a57a8d8ab5d9f&state=1

我們成功得到了code了。

注意：如果在綁定的時候出現這樣的界面，就說明參數不對，需要回頭檢查一下參數

 

3. 使用code換取access_token

換取網頁授權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

code：在這裏填寫爲上一步獲得的值

構造請求url如下：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx8888888888888888&secret=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&code=00b788e3b42043c8459a57a8d8ab5d9f&grant_type=authorization_code

可以在瀏覽器中直接執行這條語句：

得到如下json數據:

{
    "access_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw",
    "expires_in": 7200,
    "refresh_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A",
    "openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc",
    "scope": "snsapi_userinfo,"
}

數據格式解讀如下：

參數	描述
access_token	網頁授權接口調用憑證,注意：此access_token與基礎支持的access_token不同
expires_in	access_token接口調用憑證超時時間，單位（秒）
refresh_token	用戶刷新access_token
openid	用戶唯一標識，請注意，在未關注公衆號時，用戶訪問公衆號的網頁，也會產生一個用戶和公衆號唯一的OpenID
scope	用戶授權的作用域，使用逗號（,）分隔

於是，我們成功的通過code換取到了access_token，以及refresh_token。

刷新access_token

官方文檔中提到了刷新access_token的功能，但這不是必須要做的，初次使用可以先忽略。

url請求方法如下：

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

參數說明

參數	是否必須	說明
appid	是	公衆號的唯一標識
grant_type	是	填寫爲refresh_token
refresh_token	是	填寫通過access_token獲取到的refresh_token參數

構造如下：

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=wx8888888888888888&grant_type=refresh_token&refresh_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A

在瀏覽器中執行得到前面同樣格式的json數據

 

4. 使用access_token獲取用戶信息

請求方法：

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

參數說明

參數	描述
access_token	網頁授權接口調用憑證,注意：此access_token與基礎支持的access_token不同
openid	用戶的唯一標識

構造url如下：

https://api.weixin.qq.com/sns/userinfo?access_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw&openid=oLVPpjqs9BhvzwPj5A-vTYAX3GLc

可以在瀏覽器中直接執行這條語句：

得到如下json數據:

{
    "openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc",
    "nickname": "刺蝟寶寶",
    "sex": 1,
    "language": "簡體中文",
    "city": "深圳",
    "province": "廣東",
    "country": "中國",
    "headimgurl": "http://wx.qlogo.cn/mmopen/utpKYf69VAbCRDRlbUsPsdQN38DoibCkrU6SAMCSNx558eTaLVM8PyM6jlEGzOrH67hyZibIZPXu4BK1XNWzSXB3Cs4qpBBg18/0",
    "privilege": []
}

參數解讀：

參數	描述
openid	用戶的唯一標識
nickname	用戶暱稱
sex	用戶的性別，值爲1時是男性，值爲2時是女性，值爲0時是未知
province	用戶個人資料填寫的省份
city	普通用戶個人資料填寫的城市
country	國家，如中國爲CN
headimgurl	用戶頭像，最後一個數值代表正方形頭像大小（有0、46、64、96、132數值可選，0代表640*640正方形頭像），用戶沒有頭像時該項爲空
privilege	用戶特權信息，json 數組，如微信沃卡用戶爲（chinaunicom）

這與我個人的微信信息是一致的

 

至此，在不輸入我的賬號及密碼的情況下，微信公衆賬號近寶獲得了我的個人信息，這些信息包括暱稱、性別、國家、省份、城市、個人頭像以及特權列表。

一個完整的OAuth2認證就完成了。

 

三、詳細演示

掃描關注下列微信公衆賬號“方倍工作室”的二維碼，回覆“授權”。

彈出獲取到的結果