網站應用使用微信的功能主要有微信登錄和語義理解。在操作這些功能之前，需要登錄微信開放平台，創建網站應用，等待官方審核通過後，將獲得一個網站應用，如圖22-3所示。
圖22-3 網站應用
網站應用微信登錄是基於OAuth2.0協議標準構建的微信OAuth2.0授權登錄系統。
微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網站，在微信用戶授權登錄已接入微信OAuth2.0的第三方應用後，第三方應用可以獲取到用戶的接口調用憑證（access_token），通過access_token可以進行微信開放平台授權關係接口調用，從而可實現獲取微信用戶基本開放信息和幫助用戶實現基礎開放功能等。
網站應用微信登錄的流程如下。
用戶點擊方倍工作室微信登錄網站應用地址http://weixin.fangbei.org/login.php。
打開後，應用會生成state參數，並跳轉到以下鏈接。
https:// open.weixin.qq.com/connect/qrconnect?appid=wxed782be999f86e0e&redirect_uri=http%3A%2F%2Fweixin.fangbei.org%2Flogin.php&response_type=code&scope=snsapi_login&state=123#wechat_redirect
上述數據的參數說明如表22-9所示。
表22-9 網站應用微信登錄參數說明
PC網頁上將會顯示二維碼，提示用戶進行掃碼登錄，如圖22-4所示。
用戶掃瞄該二維碼後，微信將彈出確認頁面，詢問是否允許登錄，如圖22-5所示。
圖22-4 網站應用微信登錄二維碼
圖22-5 網站應用二維碼確認登錄
允許授權後，將會重定向到redirect_uri的網址上，並且帶上code和state參數。
http:// weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123
獲取第一步的code後，請求接口獲取access_token，接口地址如下。
https:// api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
上述數據的參數說明如表22-10所示。
表22-10 獲取access_token接口的參數說明
正確創建時，返回的數據示例如下。
{
"access_token": "OezXcEiiBSKSxW0eoylIeOZ0dfxvb93UyrFdwznvwUv3JkVNVV1yFvQQa3IfuyMi
4iZGDsAfe81sCaUXxyKrI-5XgCvhAS02eAC4MF2fJFl80Y9s-0h1EsuBmIVKgu0GnKhxCQ0M8G-gkQAJpzLzmQ",
"expires_in": 7200,
"refresh_token": "OezXcEiiBSKSxW0eoylIeOZ0dfxvb93UyrFdwznvwUv3JkVNVV1yFvQQa3Ifuy
MiH7dCabGFyMRtZHnHPHuEK78cf1eISYJ4y453T8pDa2tFAIJu8bFeLMBpeFSv9dgnGrK-ZfRxHzhq7IW4qevEMQ",
"openid": "oH9d2v7NmDhsFzICG63UPSIOgUcY",
"scope": "snsapi_userinfo",
"unionid": "o4wcnwx0BVC4F_hSl5qCd5rC4Jps"
}
上述數據的參數說明如表22-11所示。
表22-11 獲取access_token接口返回參數說明
最後可以通過Access Token和OpenID獲取用戶的基本信息。接口地址如下。
https:// api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
上述接口的參數說明如表22-12所示。
表22-12 獲取用戶基本信息接口的參數說明
正確提交時，返回的數據示例如下。
{
"openid": "oH9d2v7NmDhsFzICG63UPSIOgUcY",
"nickname": "方倍",
"sex": 0,
"language": "zh_CN",
"city": "",
"province": "",
"country": "CN",
"headimgurl": "http:// wx.qlogo.cn/mmopen/pburdzLK7PUTcFw3ozK52Gravkznno51DSjnq
nzsG6WzJLUOtadGBYYSVqh5YDicdawxrD6hHoR96OcyyDWAEgA/0",
"privilege": ,
"unionid": "o4wcnwx0BVC4F_hSl5qCd5rC4Jps"
}
上述數據的參數說明如表22-13所示。
表22-13 獲取用戶基本信息接口返回參數說明
至此，移動應用就完成了微信用戶的登錄過程，並獲得了用戶的個人基本信息。
為了滿足網站更定制化的需求，微信開放平台提供了第二種獲取code的方法，支持網站將微信登錄二維碼內嵌到自己的頁面中，用戶使用微信掃碼授權後通過JS將code返回給網站。網站內嵌二維碼微信登錄使網站用戶在網站內就能完成登錄，無須跳轉到微信下登錄後再返回，提升了微信登錄的流暢性與成功率。網站內嵌二維碼微信登錄只需要在頁面內引入JS文件，然後在需要微信登錄的地方實例化JS對像即可。其實現代碼如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
5 </head>
6 <body>
7 <span></span>
8 <script src="https:// res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.
js"></script>
9 <script>
10 var obj = new WxLogin({
11 id: "login_container",
12 appid: "wxed782be999f86e0e",
13 scope: "snsapi_login",
14 redirect_uri: encodeURIComponent("http:// " + window.location.host +
"/login.php"),
15 state: Math.ceil(Math.random*1000),
16 style: "black",
17 href: ""});
18 </script>
19 </body>
20 </html>
上述代碼中，第8行為引入JS庫文件，第10～17行為JS對像參數的定義。
JS對像參數的定義如表22-14所示。
表22-14 JS對像參數定義
