微信掃描二維碼登錄網(wǎng)站是微信開放平臺(tái)下網(wǎng)站應(yīng)用的一種接口實(shí)現(xiàn)的功能。微信開放平臺(tái)的網(wǎng)址是https://open.weixin.qq.com

準(zhǔn)備工作

網(wǎng)站應(yīng)用微信登錄是基于OAuth2.0協(xié)議標(biāo)準(zhǔn)構(gòu)建的微信OAuth2.0授權(quán)登錄系統(tǒng)。

在進(jìn)行微信OAuth2.在進(jìn)行微信OAuth2.0授權(quán)登錄接入之前，在微信開放平臺(tái)注冊(cè)開發(fā)者帳號(hào)，并擁有一個(gè)已審核通過(guò)的網(wǎng)站應(yīng)用，并獲得相應(yīng)的AppID和AppSecret，申請(qǐng)微信登錄且通過(guò)審核后，可開始接入流程。

授權(quán)流程說(shuō)明

微信OAuth2.0授權(quán)登錄讓微信用戶使用微信身份安全登錄第三方應(yīng)用或網(wǎng)站，在微信用戶授權(quán)登錄已接入微信OAuth2.0的第三方應(yīng)用后，第三方可以獲取到用戶的接口調(diào)用憑證（access_token），通過(guò)access_token可以進(jìn)行微信開放平臺(tái)授權(quán)關(guān)系接口調(diào)用，從而可實(shí)現(xiàn)獲取微信用戶基本開放信息和幫助用戶實(shí)現(xiàn)基礎(chǔ)開放功能等。

微信OAuth2.0授權(quán)登錄目前支持authorization_code模式，適用于擁有server端的應(yīng)用授權(quán)。該模式整體流程為：

1.1. 第三方發(fā)起微信授權(quán)登錄請(qǐng)求，微信用戶允許授權(quán)第三方應(yīng)用后，微信會(huì)拉起應(yīng)用或重定向到第三方網(wǎng)站，并且?guī)鲜跈?quán)臨時(shí)票據(jù)code參數(shù)；

2.2. 通過(guò)code參數(shù)加上AppID和AppSecret等，通過(guò)API換取access_token；

3.3. 通過(guò)access_token進(jìn)行接口調(diào)用，獲取用戶基本數(shù)據(jù)資源或幫助用戶實(shí)現(xiàn)基本操作。

獲取access_token時(shí)序圖：

第一步：請(qǐng)求CODE

第三方使用網(wǎng)站應(yīng)用授權(quán)登錄前請(qǐng)注意已獲取相應(yīng)網(wǎng)頁(yè)授權(quán)作用域（scope=snsapi_login），則可以通過(guò)在PC端打開以下鏈接：https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

若提示“該鏈接無(wú)法訪問(wèn)”，請(qǐng)檢查參數(shù)是否填寫錯(cuò)誤，如redirect_uri的域名與審核時(shí)填寫的授權(quán)域名不一致或scope不為snsapi_login。

參數(shù)說(shuō)明

返回說(shuō)明

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

redirect_uri?code=CODE&state=STATE

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

redirect_uri?state=STATE

請(qǐng)求示例

登錄一號(hào)店網(wǎng)站應(yīng)用

https://passport.yhd.com/wechat/login.do

打開后，一號(hào)店會(huì)生成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

微信用戶使用微信掃描二維碼并且確認(rèn)登錄后，PC端會(huì)跳轉(zhuǎn)到

https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

為了滿足網(wǎng)站更定制化的需求，我們還提供了第二種獲取code的方式，支持網(wǎng)站將微信登錄二維碼內(nèi)嵌到自己頁(yè)面中，用戶使用微信掃碼授權(quán)后通過(guò)JS將code返回給網(wǎng)站。

JS微信登錄主要用途：網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄，無(wú)需跳轉(zhuǎn)到微信域下登錄后再返回，提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實(shí)現(xiàn)辦法：

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

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

步驟2：在需要使用微信登錄的地方實(shí)例以下JS對(duì)象：

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

參數(shù)說(shuō)明

第二步：通過(guò)code獲取access_token

通過(guò)code獲取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

參數(shù)說(shuō)明

返回說(shuō)明

正確的返回：

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

錯(cuò)誤返回樣例：

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

刷新access_token有效期

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

1.1. 若access_token已超時(shí)，那么進(jìn)行refresh_token會(huì)獲取一個(gè)新的access_token，新的超時(shí)時(shí)間；
2.2. 若access_token未超時(shí)，那么進(jìn)行refresh_token不會(huì)改變access_token，但超時(shí)時(shí)間會(huì)刷新，相當(dāng)于續(xù)期access_token。

refresh_token擁有較長(zhǎng)的有效期（30天），當(dāng)refresh_token失效的后，需要用戶重新授權(quán)。

請(qǐng)求方法

獲取第一步的code后，請(qǐng)求以下鏈接進(jìn)行refresh_token：

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

參數(shù)說(shuō)明

返回說(shuō)明

正確的返回：

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

錯(cuò)誤返回樣例：

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

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

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

1.1. access_token有效且未超時(shí)；

2.2. 微信用戶已授權(quán)給第三方應(yīng)用帳號(hào)相應(yīng)接口作用域（scope）。

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

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

接口調(diào)用方法可查閱《微信授權(quán)關(guān)系接口調(diào)用指南》

F.A.Q

1. 什么是授權(quán)臨時(shí)票據(jù)（code）？

答：第三方通過(guò)code進(jìn)行獲取access_token的時(shí)候需要用到，code的超時(shí)時(shí)間為10分鐘，一個(gè)code只能成功換取一次access_token即失效。code的臨時(shí)性和一次保障了微信授權(quán)登錄的安全性。第三方可通過(guò)使用https和state參數(shù)，進(jìn)一步加強(qiáng)自身授權(quán)登錄的安全性。

2. 什么是授權(quán)作用域（scope）？

答：授權(quán)作用域（scope）代表用戶授權(quán)給第三方的接口權(quán)限，第三方應(yīng)用需要向微信開放平臺(tái)申請(qǐng)使用相應(yīng)scope的權(quán)限后，使用文檔所述方式讓用戶進(jìn)行授權(quán)，經(jīng)過(guò)用戶授權(quán)，獲取到相應(yīng)access_token后方可對(duì)接口進(jìn)行調(diào)用。

3. 網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中style字段作用？

答：第三方頁(yè)面顏色風(fēng)格可能為淺色調(diào)或者深色調(diào)，若第三方頁(yè)面為淺色背景，style字段應(yīng)提供"black"值（或者不提供，black為默認(rèn)值），則對(duì)應(yīng)的微信登錄文字樣式為黑色。相關(guān)效果如下：

若提供"white"值，則對(duì)應(yīng)的文字描述將顯示為白色，適合深色背景。相關(guān)效果如下：

4.網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中href字段作用？

答：如果第三方覺(jué)得微信團(tuán)隊(duì)提供的默認(rèn)樣式與自己的頁(yè)面樣式不匹配，可以自己提供樣式文件來(lái)覆蓋默認(rèn)樣式。舉個(gè)例子，如第三方覺(jué)得默認(rèn)二維碼過(guò)大，可以提供相關(guān)css樣式文件，并把鏈接地址填入href字段

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

相關(guān)效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論