網(wǎng)站使用微信登錄的開發(fā)指南與使用方法教程

網(wǎng)站使用微信登錄的開發(fā)指南與使用方法教程【珠海企業(yè)網(wǎng)站建設電話】微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網(wǎng)站，在微信用戶授權登錄已接入微信OAuth2.0的第三方應用后，第三方可以獲取到用戶的接口調(diào)用憑證（access_token），通過access_token可以進行微信開放平臺授權關系接口調(diào)用，從而可實現(xiàn)獲取微信用戶基本開放信息和幫助用戶實現(xiàn)基礎開放功能等。

以下資料來源于微信公眾號官方網(wǎng)站，如需了解最新【網(wǎng)站使用微信登錄的開發(fā)指南與使用方法教程】，請登錄微信公眾號官方網(wǎng)站瀏覽。

準備工作

網(wǎng)站應用微信登錄是基于OAuth2.0協(xié)議標準構(gòu)建的微信OAuth2.0授權登錄系統(tǒng)。
在進行微信OAuth2.在進行微信OAuth2.0授權登錄接入之前，在微信開放平臺注冊開發(fā)者帳號，并擁有一個已審核通過的網(wǎng)站應用，并獲得相應的AppID和AppSecret，申請微信登錄且通過審核后，可開始接入流程。

授權流程說明

微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網(wǎng)站，在微信用戶授權登錄已接入微信OAuth2.0的第三方應用后，第三方可以獲取到用戶的接口調(diào)用憑證（access_token），通過access_token可以進行微信開放平臺授權關系接口調(diào)用，從而可實現(xiàn)獲取微信用戶基本開放信息和幫助用戶實現(xiàn)基礎開放功能等。
微信OAuth2.0授權登錄目前支持authorization_code模式，適用于擁有server端的應用授權。該模式整體流程為：

1. 第三方發(fā)起微信授權登錄請求，微信用戶允許授權第三方應用后，微信會拉起應用或重定向到第三方網(wǎng)站，并且?guī)鲜跈嗯R時票據(jù)code參數(shù)；
2. 通過code參數(shù)加上AppID和AppSecret等，通過API換取access_token；
3. 通過access_token進行接口調(diào)用，獲取用戶基本數(shù)據(jù)資源或幫助用戶實現(xiàn)基本操作。

第一步：請求CODE

第三方使用網(wǎng)站應用授權登錄前請注意已獲取相應網(wǎng)頁授權作用域（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
若提示“該鏈接無法訪問”，請檢查參數(shù)是否填寫錯誤，如redirect_uri的域名與審核時填寫的授權域名不一致或scope不為snsapi_login。

參數(shù)說明

返回說明

用戶允許授權后，將會重定向到redirect_uri的網(wǎng)址上，并且?guī)蟘ode和state參數(shù)

redirect_uri?code=CODE&state=STATE

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

redirect_uri?state=STATE

請求示例

登錄一號店網(wǎng)站應用
https://passport.yhd.com/wechat/login.do
打開后，一號店會生成state參數(shù)，跳轉(zhuǎn)到
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端會跳轉(zhuǎn)到
https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e
為了滿足網(wǎng)站更定制化的需求，我們還提供了第二種獲取code的方式，支持網(wǎng)站將微信登錄二維碼內(nèi)嵌到自己頁面中，用戶使用微信掃碼授權后通過JS將code返回給網(wǎng)站。
JS微信登錄主要用途：網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄，無需跳轉(zhuǎn)到微信域下登錄后再返回，提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實現(xiàn)辦法：

步驟1：在頁面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步驟2：在需要使用微信登錄的地方實例以下JS對象：

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

參數(shù)說明

第二步：通過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

參數(shù)說明

返回說明

正確的返回：

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

參數(shù)說明

錯誤返回樣例：

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

刷新access_token有效期

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

1. 若access_token已超時，那么進行refresh_token會獲取一個新的access_token，新的超時時間；
2. 若access_token未超時，那么進行refresh_token不會改變access_token，但超時時間會刷新，相當于續(xù)期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

參數(shù)說明

返回說明

正確的返回：

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

參數(shù)說明

錯誤返回樣例：

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

注意：

1、Appsecret 是應用接口使用密鑰，泄漏后將可能導致應用數(shù)據(jù)泄漏、應用的用戶數(shù)據(jù)泄漏等高風險后果；存儲在客戶端，極有可能被惡意竊?。ㄈ绶淳幾g獲取Appsecret）；
2、access_token 為用戶授權第三方應用發(fā)起接口調(diào)用的憑證（相當于用戶登錄態(tài)），存儲在客戶端，可能出現(xiàn)惡意獲取access_token 后導致的用戶數(shù)據(jù)泄漏、用戶微信相關接口功能被惡意發(fā)起等行為；
3、refresh_token 為用戶授權第三方應用的長效憑證，僅用于刷新access_token，但泄漏后相當于access_token 泄漏，風險同上。

建議將secret、用戶數(shù)據(jù)（如access_token）放在App云端服務器，由云端中轉(zhuǎn)接口調(diào)用請求。

第三步：通過access_token調(diào)用接口

獲取access_token后，進行接口調(diào)用，有以下前提：

1. access_token有效且未超時；
2. 微信用戶已授權給第三方應用帳號相應接口作用域（scope）。

對于接口作用域（scope），能調(diào)用的接口有以下：

其中snsapi_base屬于基礎接口，若應用已擁有其它scope權限，則默認擁有snsapi_base的權限。使用snsapi_base可以讓移動端網(wǎng)頁授權繞過跳轉(zhuǎn)授權登錄頁請求用戶授權的動作，直接跳轉(zhuǎn)第三方網(wǎng)頁帶上授權臨時票據(jù)（code），但會使得用戶已授權作用域（scope）僅為snsapi_base，從而導致無法獲取到需要用戶授權才允許獲得的數(shù)據(jù)和基礎功能。

F.A.Q

1. 什么是授權臨時票據(jù)（code）？
   答：第三方通過code進行獲取access_token的時候需要用到，code的超時時間為10分鐘，一個code只能成功換取一次access_token即失效。code的臨時性和一次保障了微信授權登錄的安全性。第三方可通過使用https和state參數(shù)，進一步加強自身授權登錄的安全性。

2. 什么是授權作用域（scope）？
   答：授權作用域（scope）代表用戶授權給第三方的接口權限，第三方應用需要向微信開放平臺申請使用相應scope的權限后，使用文檔所述方式讓用戶進行授權，經(jīng)過用戶授權，獲取到相應access_token后方可對接口進行調(diào)用。

3. 網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中style字段作用？
   答：第三方頁面顏色風格可能為淺色調(diào)或者深色調(diào)，若第三方頁面為淺色背景，style字段應提供"black"值（或者不提供，black為默認值），則對應的微信登錄文字樣式為黑色。

若提供"white"值，則對應的文字描述將顯示為白色，適合深色背景。

4.網(wǎng)站內(nèi)嵌二維碼微信登錄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;}