微信開放平臺開發(2) 網站應用微信登入

阿新 • • 發佈：2019-02-15

在這篇微信公眾平臺開發教程中，我們將介紹如何使用微信開放平臺介面實現微信掃碼登入的功能。

準備工作

網站應用微信登入是基於OAuth2.0協議標準構建的微信OAuth2.0授權登入系統。

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

授權流程說明

微信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時序圖：

第一步：請求CODE

登入方倍工作室微信登入網站應用

http://weixin.fangbei.org/login.php

開啟後，應用會生成state引數，跳轉到以下連結：（登入前請注意已獲取相應網頁授權作用域（scope=snsapi_login））

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

若提示“該連結無法訪問”，請檢查引數是否填寫錯誤，如redirect_uri的域名與稽核時填寫的授權域名不一致或scope不為snsapi_login。

引數說明

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

返回說明

此時，PC網站上顯示如下二維碼

使用者允許授權後，將會重定向到redirect_uri的網址上，並且帶上code和state引數

http://weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123

為了滿足網站更定製化的需求，我們還提供了第二種獲取code的方式，支援網站將微信登入二維碼內嵌到自己頁面中，使用者使用微信掃碼授權後通過JS將code返回給網站。

JS微信登入主要用途：網站希望使用者在網站內就能完成登入，無需跳轉到微信域下登入後再返回，提升微信登入的流暢性與成功率。網站內嵌二維碼微信登入JS實現辦法：

步驟1：在頁面中先引入如下JS檔案（支援https）：

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

步驟2：在需要使用微信登入的地方例項以下JS物件：

        <script>
            var obj = new WxLogin({
              id: "login_container",
              appid: "wxed782be999f86e0e",
              scope: "snsapi_login",
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
              state: Math.ceil(Math.random()*1000),
              style: "black",
              href: ""});
        </script>

引數說明

引數	是否必須	說明
id	是	第三方頁面顯示二維碼的容器id
appid	是	應用唯一標識，在微信開放平臺提交應用稽核通過後獲得
scope	是	應用授權作用域，擁有多個作用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login即可
redirect_uri	是	重定向地址，需要進行UrlEncode
state	否	用於保持請求和回撥的狀態，授權請求後原樣帶回給第三方。該引數可用於防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該引數，可設定為簡單的隨機數加session進行校驗
style	否	提供"black"、"white"可選，預設為黑色文字描述。詳見文件底部FAQ
href	否	自定義樣式連結，第三方可根據實際需求覆蓋預設樣式。詳見文件底部FAQ

完整程式碼如下

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
        <span id="login_container"></span>
        <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
        <script>
            var obj = new WxLogin({
              id: "login_container",
              appid: "wxed782be999f86e0e",
              scope: "snsapi_login",
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
              state: Math.ceil(Math.random()*1000),
              style: "black",
              href: ""});
        </script>
    </body>
</html>

頁面顯示效果如下

第二步：通過code獲取access_token

通過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": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2rCAUjXEP1_9edZdJLf3MIwii2N8cnTooDfx7nYpFRmOSZyq4gb2FNdWJr__KUqPtcfVUvg6XBTucZZ4zH6v8VQ",
    "expires_in": 7200,
    "refresh_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2lW60INlf6AK1q21rW7mJyc5yG3GZ9p1psANOKTi2EZUQXA6CnwSXxDQlJ3421tEOvCWIrJhkA8oTqjsLKYG-yg",
    "openid": "oJekJs2faTQ47FGjDOEIyOPMN97s",
    "scope": "snsapi_login",
    "unionid": "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
}

引數說明

引數	說明
access_token	介面呼叫憑證
expires_in	access_token介面呼叫憑證超時時間，單位（秒）
refresh_token	使用者重新整理access_token
openid	授權使用者唯一標識
scope	使用者授權的作用域，使用逗號（,）分隔
unionid	當且僅當該網站應用已獲得該使用者的userinfo授權時，才會出現該欄位。

錯誤返回樣例：

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

重新整理access_token有效期

access_token是呼叫授權關係介面的呼叫憑證，由於access_token有效期（目前為2個小時）較短，當access_token超時後，可以使用refresh_token進行重新整理，access_token重新整理結果有兩種：

1. 若access_token已超時，那麼進行refresh_token會獲取一個新的access_token，新的超時時間；
2. 若access_token未超時，那麼進行refresh_token不會改變access_token，但超時時間會重新整理，相當於續期access_token。

refresh_token擁有較長的有效期（30天），當refresh_token失效的後，需要使用者重新授權。

請求方法

獲取第一步的code後，請求以下連結進行refresh_token：

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引數

返回說明

正確的返回：

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

引數	說明
access_token	介面呼叫憑證
expires_in	access_token介面呼叫憑證超時時間，單位（秒）
refresh_token	使用者重新整理access_token
openid	授權使用者唯一標識
scope	使用者授權的作用域，使用逗號（,）分隔

錯誤返回樣例：

{"errcode":40030,"errmsg":"invalid refresh_token"}

注意：

1、Appsecret 是應用介面使用金鑰，洩漏後將可能導致應用資料洩漏、應用的使用者資料洩漏等高風險後果；儲存在客戶端，極有可能被惡意竊取（如反編譯獲取Appsecret）；

2、access_token 為使用者授權第三方應用發起介面呼叫的憑證（相當於使用者登入態），儲存在客戶端，可能出現惡意獲取access_token 後導致的使用者資料洩漏、使用者微信相關介面功能被惡意發起等行為；

3、refresh_token 為使用者授權第三方應用的長效憑證，僅用於重新整理access_token，但洩漏後相當於access_token 洩漏，風險同上。

建議將secret、使用者資料（如access_token）放在App雲端伺服器，由雲端中轉介面呼叫請求。

第三步：通過access_token呼叫介面

獲取access_token後，進行介面呼叫，有以下前提：

1. access_token有效且未超時；
2. 微信使用者已授權給第三方應用帳號相應介面作用域（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屬於基礎介面，若應用已擁有其它scope許可權，則預設擁有snsapi_base的許可權。使用snsapi_base可以讓移動端網頁授權繞過跳轉授權登入頁請求使用者授權的動作，直接跳轉第三方網頁帶上授權臨時票據（code），但會使得使用者已授權作用域（scope）僅為snsapi_base，從而導致無法獲取到需要使用者授權才允許獲得的資料和基礎功能。

下面是獲取使用者個人資訊，並dump出來

array(10) {
  ["openid"]=>
  string(28) "oJekJs2faTQ47FGjDOEIyOPMN97s"
  ["nickname"]=>
  string(15) "方倍工作室"
  ["sex"]=>
  int(1)
  ["language"]=>
  string(5) "zh_CN"
  ["city"]=>
  string(6) "海淀"
  ["province"]=>
  string(6) "北京"
  ["country"]=>
  string(6) "中國"
  ["headimgurl"]=>
  string(139) "http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0"
  ["privilege"]=>
  array(0) {
  }
  ["unionid"]=>
  string(28) "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
}

核心程式碼如下

F.A.Q

1. 什麼是授權臨時票據（code）？

答：第三方通過code進行獲取access_token的時候需要用到，code的超時時間為10分鐘，一個code只能成功換取一次access_token即失效。code的臨時性和一次保障了微信授權登入的安全性。第三方可通過使用https和state引數，進一步加強自身授權登入的安全性。

2. 什麼是授權作用域（scope）？

答：授權作用域（scope）代表使用者授權給第三方的介面許可權，第三方應用需要向微信開放平臺申請使用相應scope的許可權後，使用文件所述方式讓使用者進行授權，經過使用者授權，獲取到相應access_token後方可對介面進行呼叫。

3. 網站內嵌二維碼微信登入JS程式碼中style欄位作用？

答：第三方頁面顏色風格可能為淺色調或者深色調，若第三方頁面為淺色背景，style欄位應提供"black"值（或者不提供，black為預設值），則對應的微信登入文字樣式為黑色。相關效果如下：

若提供"white"值，則對應的文字描述將顯示為白色，適合深色背景。相關效果如下：

4.網站內嵌二維碼微信登入JS程式碼中href欄位作用？

答：如果第三方覺得微信團隊提供的預設樣式與自己的頁面樣式不匹配，可以自己提供樣式檔案來覆蓋預設樣式。舉個例子，如第三方覺得預設二維碼過大，可以提供相關css樣式檔案，並把連結地址填入href欄位

.impowerBox .qrcode {width: 200px;} .impowerBox .title {display: none;} .impowerBox .info {width: 200px;} .status_icon {display：none} .impowerBox .status {text-align: center;}

相關效果如下：

微信開放平臺開發(2) 網站應用微信登入

準備工作

授權流程說明

第一步：請求CODE

引數說明

返回說明

步驟1：在頁面中先引入如下JS檔案（支援https）：

步驟2：在需要使用微信登入的地方例項以下JS物件：

第二步：通過code獲取access_token

引數說明

返回說明

重新整理access_token有效期

請求方法

引數說明

返回說明

注意：

第三步：通過access_token呼叫介面

F.A.Q

1. 什麼是授權臨時票據（code）？

2. 什麼是授權作用域（scope）？

3. 網站內嵌二維碼微信登入JS程式碼中style欄位作用？

4.網站內嵌二維碼微信登入JS程式碼中href欄位作用？

相關推薦