微信網頁第三方登錄原理

一、微信開放平台和公眾平台的區別

• 微信公眾平台面向的是普通的用戶，比如自媒體和媒體，企業官方微信公眾賬號運營人員使用，當然你所在的團隊或者公司有實力去開發一些內容，也可以調用公眾平台里面的接口，比如自定義菜單，自動回復，查詢功能。目前大多數微信通過認證之后，都在做這個事情。
• 微信開放平台面向的開發者和第三方獨立軟件開發商。我覺得開發平台最大的開放就是微信登錄。當年騰訊沒有花大力氣去做統一登錄這個事情，導致目前各個網站都要弄一套登錄機制。好在他們現在認清了局勢。開發者或軟件開發商，通過微信開放提供的平台和接口，可以開發適合企業的電子商務網站，掃描二維碼進去一個游戲界面，然后去購買商品等。當然后續開放平台要開放支付接口，那么類似口袋通這種軟件開發廠商，就可以為大型，中小企業提供微信小店這種服務和軟件了。

微信公眾平台就是服務號訂閱號的管理開發后台。微信開發平台說得通俗一點就是實現手機軟件的內容一鍵分享朋友圈；

下面的第三方登陸就是依托於微信開放平台的功能

下面的內容建議去參考微信開放平台官方的文檔

二、開發過程

微信第三方登錄必須在微信開放平台注冊一個開發者帳號，並擁有一個已審核通過的網站應用，並獲得相應的AppID和AppSecret，申請微信登錄且通過審核后，可開始接入流程。

參考微信公眾平台開發者文檔網頁授權獲取用戶信息，微信開放平台文檔

2.1、請求CODE

2.1.1、第一種方式

　　第三方使用網站應用授權登錄前請注意已獲取相應網頁授權作用域（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 

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

參數說明

參數	是否必須	說明
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

請求示例

　　登錄一號店網站應用 https://passport.yhd.com/wechat/login.do ，打開后，一號店會生成state參數，跳轉到 

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 

微信用戶使用微信掃描二維碼並且確認登錄后，PC端會跳轉到 https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e 

 2.1.2、第二種方式

　　為了滿足網站更定制化的需求，還提供了第二種獲取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對象：

var obj = new WxLogin({
      id:"login_container", 
      appid: "", 
      scope: "", 
      redirect_uri: "",
      state: "",
      style: "",
      href: ""
});

參數說明

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

2.2、通過code獲取網頁access_token

2.2.1、獲取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	只有在用戶將公眾號綁定到微信開放平台帳號后，才會出現該字段。

錯誤返回樣例： {"errcode":40029,"errmsg":"invalid code"} 

2.2.2、刷新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雲端服務器，由雲端中轉接口調用請求。

2.3、通過access_token調用接口

獲取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屬於基礎接口，若應用已擁有其它scope權限，則默認擁有snsapi_base的權限。使用snsapi_base可以讓移動端網頁授權繞過跳轉授權登錄頁請求用戶授權的動作，直接跳轉第三方網頁帶上授權臨時票據（code），但會使得用戶已授權作用域（scope）僅為snsapi_base，從而導致無法獲取到需要用戶授權才允許獲得的數據和基礎功能。

接口調用方法可查閱《微信授權關系接口調用指南》

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;} 


相關效果如下：

 

通過code獲取access_token

接口說明

通過code獲取access_token的接口。

請求說明

http請求方式: GET

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" 
}

參數	說明
access_token	接口調用憑證
expires_in	access_token接口調用憑證超時時間，單位（秒）
refresh_token	用戶刷新access_token
openid	授權用戶唯一標識
scope	用戶授權的作用域，使用逗號（,）分隔

錯誤返回樣例：

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

刷新或續期access_token使用

接口說明

access_token是調用授權關系接口的調用憑證，由於access_token有效期（目前為2個小時）較短，當access_token超時后，可以使用refresh_token進行刷新，access_token刷新結果有兩種：

1. 1. 若access_token已超時，那么進行refresh_token會獲取一個新的access_token，新的超時時間；

2. 2.若access_token未超時，那么進行refresh_token不會改變access_token，但超時時間會刷新，相當於續期access_token。

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

請求方法

使用/sns/oauth2/access_token接口獲取到的refresh_token進行以下接口調用：

http請求方式: GET

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"
}

接口說明

檢驗授權憑證（access_token）是否有效

請求說明

http請求方式: GET

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

參數說明

參數	是否必須	說明
access_token	是	調用接口憑證
openid	是	普通用戶標識，對該公眾帳號唯一

返回說明

正確的Json返回結果：

{ 
"errcode":0,"errmsg":"ok"
}

錯誤的Json返回示例:

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

獲取用戶個人信息（UnionID機制）

接口說明

此接口用於獲取用戶個人信息。開發者可通過OpenID來獲取用戶基本信息。特別需要注意的是，如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取用戶基本信息中的unionid來區分用戶的唯一性，因為只要是同一個微信開放平台帳號下的移動應用、網站應用和公眾帳號，用戶的unionid是唯一的。換句話說，同一用戶，對同一個微信開放平台下的不同應用，unionid是相同的。

請求說明

http請求方式: GET

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

參數說明

參數	是否必須	說明
access_token	是	調用憑證
openid	是	普通用戶的標識，對當前開發者帳號唯一

返回說明

正確的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"
}

調用頻率限制

接口名	頻率限制
通過code換取access_token	1萬/分鍾
刷新access_token	5萬/分鍾
獲取用戶基本信息	5萬/分鍾