js微信掃描二維碼登錄網(wǎng)站技術(shù)原理
微信掃描二維碼登錄網(wǎng)站是微信開放平臺下網(wǎng)站應(yīng)用的一種接口實(shí)現(xiàn)的功能。微信開放平臺的網(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)登錄接入之前,在微信開放平臺注冊開發(fā)者帳號,并擁有一個(gè)已審核通過的網(wǎng)站應(yīng)用,并獲得相應(yīng)的AppID和AppSecret,申請微信登錄且通過審核后,可開始接入流程。
授權(quán)流程說明
微信OAuth2.0授權(quán)登錄讓微信用戶使用微信身份安全登錄第三方應(yīng)用或網(wǎng)站,在微信用戶授權(quán)登錄已接入微信OAuth2.0的第三方應(yīng)用后,第三方可以獲取到用戶的接口調(diào)用憑證(access_token),通過access_token可以進(jìn)行微信開放平臺授權(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)登錄請求,微信用戶允許授權(quán)第三方應(yīng)用后,微信會拉起應(yīng)用或重定向到第三方網(wǎng)站,并且?guī)鲜跈?quán)臨時(shí)票據(jù)code參數(shù);
2.2. 通過code參數(shù)加上AppID和AppSecret等,通過API換取access_token;
3.3. 通過access_token進(jìn)行接口調(diào)用,獲取用戶基本數(shù)據(jù)資源或幫助用戶實(shí)現(xiàn)基本操作。
獲取access_token時(shí)序圖:
第一步:請求CODE
第三方使用網(wǎng)站應(yīng)用授權(quán)登錄前請注意已獲取相應(yīng)網(wǎng)頁授權(quán)作用域(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ù)是否填寫錯(cuò)誤,如redirect_uri的域名與審核時(shí)填寫的授權(quán)域名不一致或scope不為snsapi_login。
參數(shù)說明
參數(shù) | 是否必須 | 說明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標(biāo)識 |
redirect_uri | 是 | 重定向地址,需要進(jìn)行UrlEncode |
response_type | 是 | 填code |
scope | 是 | 應(yīng)用授權(quán)作用域,擁有多個(gè)作用域用逗號(,)分隔,網(wǎng)頁應(yīng)用目前僅填寫snsapi_login即可 |
state | 否 | 用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊(跨站請求偽造攻擊),建議第三方帶上該參數(shù),可設(shè)置為簡單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn) |
返回說明
用戶允許授權(quán)后,將會重定向到redirect_uri的網(wǎng)址上,并且?guī)蟘ode和state參數(shù)
redirect_uri?code=CODE&state=STATE
若用戶禁止授權(quán),則重定向后不會帶上code參數(shù),僅會帶上state參數(shù)
redirect_uri?state=STATE
請求示例
登錄一號店網(wǎng)站應(yī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
微信用戶使用微信掃描二維碼并且確認(rèn)登錄后,PC端會跳轉(zhuǎn)到
https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e
為了滿足網(wǎng)站更定制化的需求,我們還提供了第二種獲取code的方式,支持網(wǎng)站將微信登錄二維碼內(nèi)嵌到自己頁面中,用戶使用微信掃碼授權(quán)后通過JS將code返回給網(wǎng)站。
JS微信登錄主要用途:網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄,無需跳轉(zhuǎn)到微信域下登錄后再返回,提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實(shí)現(xiàn)辦法:
步驟1:在頁面中先引入如下JS文件(支持https):
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
步驟2:在需要使用微信登錄的地方實(shí)例以下JS對象:
var obj = new WxLogin({ id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href: "" });
參數(shù)說明
參數(shù) | 是否必須 | 說明 |
---|---|---|
id | 是 | 第三方頁面顯示二維碼的容器id |
appid | 是 | 應(yīng)用唯一標(biāo)識,在微信開放平臺提交應(yīng)用審核通過后獲得 |
scope | 是 | 應(yīng)用授權(quán)作用域,擁有多個(gè)作用域用逗號(,)分隔,網(wǎng)頁應(yīng)用目前僅填寫snsapi_login即可 |
redirect_uri | 是 | 重定向地址,需要進(jìn)行UrlEncode |
state | 否 | 用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊(跨站請求偽造攻擊),建議第三方帶上該參數(shù),可設(shè)置為簡單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn) |
style | 否 | 提供"black"、"white"可選,默認(rèn)為黑色文字描述。詳見文檔底部FAQ |
href | 否 | 自定義樣式鏈接,第三方可根據(jù)實(shí)際需求覆蓋默認(rèn)樣式。詳見文檔底部FAQ |
第二步:通過code獲取access_token
通過code獲取access_token
參數(shù)說明
參數(shù) | 是否必須 | 說明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標(biāo)識,在微信開放平臺提交應(yīng)用審核通過后獲得 |
secret | 是 | 應(yīng)用密鑰AppSecret,在微信開放平臺提交應(yīng)用審核通過后獲得 |
code | 是 | 填寫第一步獲取的code參數(shù) |
grant_type | 是 | 填authorization_code |
返回說明
正確的返回:
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }
參數(shù) | 說明 |
---|---|
access_token | 接口調(diào)用憑證 |
expires_in | access_token接口調(diào)用憑證超時(shí)時(shí)間,單位(秒) |
refresh_token | 用戶刷新access_token |
openid | 授權(quán)用戶唯一標(biāo)識 |
scope | 用戶授權(quán)的作用域,使用逗號(,)分隔 |
錯(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會獲取一個(gè)新的access_token,新的超時(shí)時(shí)間;
2.2. 若access_token未超時(shí),那么進(jìn)行refresh_token不會改變access_token,但超時(shí)時(shí)間會刷新,相當(dāng)于續(xù)期access_token。
refresh_token擁有較長的有效期(30天),當(dāng)refresh_token失效的后,需要用戶重新授權(quán)。
請求方法
獲取第一步的code后,請求以下鏈接進(jìn)行refresh_token:
參數(shù)說明
參數(shù) | 是否必須 | 說明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標(biāo)識 |
grant_type | 是 | 填refresh_token |
refresh_token | 是 | 填寫通過access_token獲取到的refresh_token參數(shù) |
返回說明
正確的返回:
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }
參數(shù) | 說明 |
---|---|
access_token | 接口調(diào)用憑證 |
expires_in | access_token接口調(diào)用憑證超時(shí)時(shí)間,單位(秒) |
refresh_token | 用戶刷新access_token |
openid | 授權(quán)用戶唯一標(biāo)識 |
scope | 用戶授權(quán)的作用域,使用逗號(,)分隔 |
錯(cuò)誤返回樣例:
{"errcode":40030,"errmsg":"invalid refresh_token"}
第三步:通過access_token調(diào)用接口
獲取access_token后,進(jìn)行接口調(diào)用,有以下前提:
1.1. access_token有效且未超時(shí);
2.2. 微信用戶已授權(quán)給第三方應(yīng)用帳號相應(yīng)接口作用域(scope)。
對于接口作用域(scope),能調(diào)用的接口有以下:
授權(quán)作用域(scope) | 接口 | 接口說明 |
---|---|---|
snsapi_base | /sns/oauth2/access_token | 通過code換取access_token、refresh_token和已授權(quán)scope |
/sns/oauth2/refresh_token | 刷新或續(xù)期access_token使用 | |
/sns/auth | 檢查access_token有效性 | |
snsapi_userinfo | /sns/userinfo | 獲取用戶個(gè)人信息 |
其中snsapi_base屬于基礎(chǔ)接口,若應(yīng)用已擁有其它scope權(quán)限,則默認(rèn)擁有snsapi_base的權(quán)限。使用snsapi_base可以讓移動端網(wǎng)頁授權(quán)繞過跳轉(zhuǎn)授權(quán)登錄頁請求用戶授權(quán)的動作,直接跳轉(zhuǎn)第三方網(wǎng)頁帶上授權(quán)臨時(shí)票據(jù)(code),但會使得用戶已授權(quán)作用域(scope)僅為snsapi_base,從而導(dǎo)致無法獲取到需要用戶授權(quán)才允許獲得的數(shù)據(jù)和基礎(chǔ)功能。
接口調(diào)用方法可查閱《微信授權(quán)關(guān)系接口調(diào)用指南》
F.A.Q
1. 什么是授權(quán)臨時(shí)票據(jù)(code)?
答:第三方通過code進(jìn)行獲取access_token的時(shí)候需要用到,code的超時(shí)時(shí)間為10分鐘,一個(gè)code只能成功換取一次access_token即失效。code的臨時(shí)性和一次保障了微信授權(quán)登錄的安全性。第三方可通過使用https和state參數(shù),進(jìn)一步加強(qiáng)自身授權(quán)登錄的安全性。
2. 什么是授權(quán)作用域(scope)?
答:授權(quán)作用域(scope)代表用戶授權(quán)給第三方的接口權(quán)限,第三方應(yīng)用需要向微信開放平臺申請使用相應(yīng)scope的權(quán)限后,使用文檔所述方式讓用戶進(jìn)行授權(quán),經(jīng)過用戶授權(quán),獲取到相應(yīng)access_token后方可對接口進(jìn)行調(diào)用。
3. 網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中style字段作用?
答:第三方頁面顏色風(fēng)格可能為淺色調(diào)或者深色調(diào),若第三方頁面為淺色背景,style字段應(yīng)提供"black"值(或者不提供,black為默認(rèn)值),則對應(yīng)的微信登錄文字樣式為黑色。相關(guān)效果如下:
若提供"white"值,則對應(yīng)的文字描述將顯示為白色,適合深色背景。相關(guān)效果如下:
4.網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中href字段作用?
答:如果第三方覺得微信團(tuán)隊(duì)提供的默認(rèn)樣式與自己的頁面樣式不匹配,可以自己提供樣式文件來覆蓋默認(rèn)樣式。舉個(gè)例子,如第三方覺得默認(rèn)二維碼過大,可以提供相關(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)效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
學(xué)習(xí)javascript面向?qū)ο?理解javascript原型和原型鏈
這篇文章主要介紹了javascript原型和原型鏈,學(xué)習(xí)javascript面向?qū)ο?,感興趣的小伙伴們可以參考一下2016-01-01實(shí)現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
下面筆者就為大家分享一篇實(shí)現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼,代碼簡潔,具有很好的參考價(jià)值,希望對大家有所幫助2017-11-11使用bootstrap插件實(shí)現(xiàn)模態(tài)框效果
今天我們選擇使用著名的 bootstrap 庫的模態(tài)框插件 modal.js 來實(shí)現(xiàn)模態(tài)框效果,同時(shí)也使大家進(jìn)一步熟悉 bootstrap 的插件使用,需要的朋友可以參考下2017-05-05JS實(shí)現(xiàn)滑動菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
這篇文章主要介紹了JS實(shí)現(xiàn)滑動菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09微信小程序setInterval定時(shí)函數(shù)新手使用的超詳細(xì)教程
平時(shí)開發(fā)中為實(shí)現(xiàn)倒計(jì)時(shí)效果可以使用setInterval即可,下面這篇文章主要給大家介紹了關(guān)于微信小程序setInterval定時(shí)函數(shù)新手使用的超詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Javascript 的addEventListener()及attachEvent()區(qū)別分析
大家都知道事件的用法就是當(dāng)某個(gè)事件(狀況)被觸發(fā)了之后就會去執(zhí)行某個(gè)Function, 尤其是Javascript, 在當(dāng)紅AJAX的催化下, 了解Javascript的Event用法更加重要, 在這里就大概介紹一下avascript的Event用法.2009-05-05js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動
這篇文章主要為大家詳細(xì)介紹了js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07