網(wǎng)站應(yīng)用微信登錄是基于OAuth2.0協(xié)議標(biāo)準(zhǔn)構(gòu)建的微信OAuth2.0授權(quán)登錄系統(tǒng)。
網(wǎng)站接入準(zhǔn)備工作
- 微信開放平臺(tái)注冊(cè)開發(fā)者賬號(hào)，點(diǎn)擊查看操作指引；
- 微信開放平臺(tái)-管理中心-創(chuàng)建網(wǎng)站應(yīng)用并通過審核；
- 通過審核后可以獲得相應(yīng)的AppID和AppSecret；
- 應(yīng)用申請(qǐng)微信登錄且通過審核后，可開始接入流程。
微信用戶授權(quán)登錄接入微信OAuth2.0的第三方應(yīng)用后，第三方應(yīng)用可以獲取到用戶的接口調(diào)用憑證（access_token），通過access_token可以進(jìn)行微信開放平臺(tái)授權(quán)關(guān)系接口調(diào)用。那么實(shí)現(xiàn)微信授權(quán)第三方登錄的最終目的就是拿到access_token，點(diǎn)擊查看微信官方文檔說明。
如何獲取access_token
1. 請(qǐng)求CODE
第三方使用網(wǎng)站應(yīng)用授權(quán)登錄前請(qǐng)注意已獲取相應(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
這個(gè)鏈接打開后是一個(gè)帶有二維碼的頁面（如圖）：
AppId: 應(yīng)用id
scope: 網(wǎng)頁端填寫snsapi_login
redirect_uri: 用戶在微信上點(diǎn)擊允許授權(quán)后微信回調(diào)的地址，該地址的域名需要與創(chuàng)建應(yīng)用時(shí)填寫的授權(quán)域名保持一致，建議使用encodeURIComponent進(jìn)行轉(zhuǎn)碼
state: 用于保持請(qǐng)求和回調(diào)的狀態(tài)，授權(quán)請(qǐng)求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請(qǐng)求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡(jiǎn)單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)
注：若提示“該鏈接無法訪問”，請(qǐng)檢查參數(shù)是否填寫錯(cuò)誤，如redirect_uri的域名與審核時(shí)填寫的授權(quán)域名不一致或scope不為snsapi_login。
2. 用戶允許授權(quán)后，網(wǎng)頁會(huì)重定向到回調(diào)地址redirect_uri，并攜帶code和state參數(shù)，跳轉(zhuǎn)的方式可以通過傳參self_redirect: boolean控制
為true時(shí)，手機(jī)點(diǎn)擊確認(rèn)登錄后可以在 iframe 內(nèi)跳轉(zhuǎn)到 redirect_uri，為false時(shí)，手機(jī)點(diǎn)擊確認(rèn)登錄后可以在 top window 跳轉(zhuǎn)到 redirect_uri。默認(rèn)為 false。
3.獲取access_token
將code、state傳給后端，后端通過code、appId、appSecrect調(diào)用微信API獲取access_token，完成登錄，參考文檔
思考：如何在網(wǎng)頁內(nèi)實(shí)現(xiàn)內(nèi)嵌二維碼的方式實(shí)現(xiàn)微信授權(quán)登錄
-
按照上面的流程，將鏈接在網(wǎng)頁中通過iframe標(biāo)簽的方式打開，并傳遞self_redirect=true實(shí)現(xiàn)登錄后在iframe內(nèi)實(shí)現(xiàn)回調(diào)重定向。
-
官方提供的通過js的方式獲取code，但其實(shí)我發(fā)現(xiàn)最終的效果其實(shí)跟方法1幾乎一樣，通過js的方法創(chuàng)建對(duì)象其實(shí)也就是在對(duì)應(yīng)的div下插入了一個(gè)iframe標(biāo)簽，如下圖所示：
效果圖：
-
如果想僅顯示二維碼，可以設(shè)置iframe的樣式，并對(duì)外層div設(shè)置固定大小，并加上overflow:hidden文章來源：http://www.zghlxwxcb.cn/news/detail-843356.html
.login-container {
width: 200px;
height: 200px;
overflow: hidden;
iframe {
transform: scale(0.75);
margin-top: -90px;
margin-left: -50px
}
}
效果圖：
文章來源地址http://www.zghlxwxcb.cn/news/detail-843356.html
通過js的方式獲取code步驟如下：
- 頁面引入js http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js (支持https)
- 在需要使用微信登錄的地方實(shí)例以下JS對(duì)象
var obj = new WxLogin({
self_redirect:true,
id: "login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
到了這里，關(guān)于pc端web網(wǎng)站使用第三方微信登錄流程（web、js）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
