正文

微信授權(quán)登錄網(wǎng)頁(yè)設(shè)計(jì)

發(fā)布時(shí)間：2023-03-21 02:21:23 稿源：創(chuàng)意嶺閱讀： 236 問(wèn)大家

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于微信授權(quán)登錄網(wǎng)頁(yè)設(shè)計(jì)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

本文目錄:

1、微信OAuth4.0授權(quán)回調(diào)頁(yè)面域名設(shè)置問(wèn)題怎么解決？
2、網(wǎng)站應(yīng)用接入微信登錄
3、用微信打開用ecshop 做的手機(jī)網(wǎng)站，怎么實(shí)現(xiàn)用微信帳號(hào)直接登錄手機(jī)網(wǎng)站，如圖：
4、如何進(jìn)入微信公眾平臺(tái)授權(quán)登錄界面？

一、微信OAuth4.0授權(quán)回調(diào)頁(yè)面域名設(shè)置問(wèn)題怎么解決？

當(dāng)下的解決方案是引入一個(gè)新的非常簡(jiǎn)單的應(yīng)用來(lái)作為微信授權(quán)的代理服務(wù)，可以這么做：

1. 把公眾號(hào)的網(wǎng)頁(yè)授權(quán)接口域名設(shè)置成另外一個(gè)子域名，如proxy.your.com；

2. 然后把php_weixin_proxy里面的index.php部署到proxy.your.com

php_weixin_proxy下的index.php是一個(gè)很簡(jiǎn)單的php文件，你可以直接查看源碼了解它的實(shí)現(xiàn)方式。因?yàn)楫?dāng)前項(xiàng)目的環(huán)境，我采用php來(lái)完成這個(gè)代理服務(wù)實(shí)現(xiàn)，實(shí)際上，你完全可以用任意平臺(tái)語(yǔ)言來(lái)完成類似的功能。

當(dāng)其它業(yè)務(wù)需要發(fā)起微信授權(quán)時(shí)，將授權(quán)請(qǐng)求先發(fā)到proxy.your.com，然后proxy.your.com會(huì)把這個(gè)請(qǐng)求轉(zhuǎn)發(fā)到微信；

當(dāng)用戶同意授權(quán)后，proxy.your.com會(huì)收到微信的授權(quán)回調(diào)，并把回調(diào)結(jié)果（code、state參數(shù)）原封不動(dòng)地再返回給最開始發(fā)起授權(quán)的業(yè)務(wù)。

唯一的區(qū)別在于，在不使用proxy.your.com的時(shí)候，你從應(yīng)用發(fā)起微信授權(quán)的鏈接應(yīng)該是這樣的：

https://open.weixin.qq.com/connect/qrconnect?appid=xxxxx&redirect_uri=http%3A%2F%2Fpassport.your.com%2F&response_type=code&scope=snsapi_login&state=584bc87e11ff37492#wechat_redirect

用了proxy.your.com之后，這個(gè)授權(quán)鏈接就應(yīng)該是這樣的：

http://proxy.your.com/?appid=xxxxx&redirect_uri=http%3A%2F%2Fpassport.your.com%2Flogin%2Fnotify&response_type=code&scope=snsapi_base&state=584bc87e11ff37492&device=pc

后面這個(gè)鏈接跟上面的比：

1. 后面的鏈接中的host變成了proxy.your.com，也就是代理的授權(quán)回調(diào)域名；

2. 后面的多了一個(gè)device參數(shù)，這個(gè)是必要的。因?yàn)槲⑿舙c端跟移動(dòng)端的授權(quán)地址是不一樣的，而后面的鏈接是發(fā)送個(gè)proxy.your.com的，所以需要多加個(gè)參數(shù)告訴它在轉(zhuǎn)發(fā)給授權(quán)申請(qǐng)給微信的時(shí)候，是用PC端還是移動(dòng)端的授權(quán)地址。

1. 用戶從我們的應(yīng)用觸發(fā)需要授權(quán)的操作，比如點(diǎn)擊微信登錄；

2. 應(yīng)用收到這種用戶請(qǐng)求后，將用戶重定向到微信提供的一個(gè)授權(quán)頁(yè)面：

或

3. 用戶通過(guò)微信掃碼（PC端授權(quán)，上邊左圖）或者點(diǎn)擊確認(rèn)按鈕（移動(dòng)端授權(quán)，上邊右圖）告知微信，授權(quán)應(yīng)用訪問(wèn)自己的微信賬號(hào)信息；

4. 微信收到用戶的授權(quán)許可后，生成授權(quán)碼，并把它作為參數(shù)回調(diào)至應(yīng)用的某個(gè)頁(yè)面；

5. 應(yīng)用的回調(diào)頁(yè)面在接收到微信的回調(diào)請(qǐng)求后，拿到其中的授權(quán)碼，并通過(guò)微信官方提供的access token api接口獲取access token；

6. 最后通過(guò)access token以及微信官方提供的另一個(gè)userinfo api接口就能獲取到用戶的微信賬號(hào)信息。

為了實(shí)現(xiàn)這個(gè)過(guò)程，首先要為應(yīng)用申請(qǐng)一個(gè)微信公眾號(hào)，并將應(yīng)用最終部署的域名設(shè)置到微信公眾號(hào)設(shè)置里面的授權(quán)回調(diào)頁(yè)面域名這個(gè)選項(xiàng)里面。微信官方對(duì)這個(gè)選項(xiàng)的說(shuō)明如下：

關(guān)于網(wǎng)頁(yè)授權(quán)回調(diào)域名的說(shuō)明

1、在微信公眾號(hào)請(qǐng)求用戶網(wǎng)頁(yè)授權(quán)之前，開發(fā)者需要先到公眾平臺(tái)官網(wǎng)中的“開發(fā) - 接口權(quán)限 - 網(wǎng)頁(yè)服務(wù) - 網(wǎng)頁(yè)帳號(hào) - 網(wǎng)頁(yè)授權(quán)獲取用戶基本信息”的配置選項(xiàng)中，修改授權(quán)回調(diào)域名。請(qǐng)注意，這里填寫的是域名（是一個(gè)字符串），而不是URL，因此請(qǐng)勿加 http:// 等協(xié)議頭；

2、授權(quán)回調(diào)域名配置規(guī)范為全域名，比如需要網(wǎng)頁(yè)授權(quán)的域名為：www.qq.com，配置以后此域名下面的頁(yè)面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進(jìn)行OAuth4.0鑒權(quán)。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com無(wú)法進(jìn)行OAuth4.0鑒權(quán)

3、如果公眾號(hào)登錄授權(quán)給了第三方開發(fā)者來(lái)進(jìn)行管理，則不必做任何設(shè)置，由第三方代替公眾號(hào)實(shí)現(xiàn)網(wǎng)頁(yè)授權(quán)即可

由此可見，這個(gè)規(guī)則極其嚴(yán)格。如果說(shuō)我們的應(yīng)用最終部署的時(shí)候只有一個(gè)域名，那么這種規(guī)則不會(huì)有什么問(wèn)題；但是考慮到將來(lái)應(yīng)用的復(fù)雜性，我們可能在應(yīng)用設(shè)計(jì)之初就會(huì)對(duì)應(yīng)用做拆分，然后不同的業(yè)務(wù)采用不同的二級(jí)域名來(lái)部署。比如一個(gè)帶有交易的應(yīng)用，你可能會(huì)把登錄注冊(cè)，交易管理和常規(guī)業(yè)務(wù)都獨(dú)立出來(lái)，然后采用以下的方式來(lái)部署它們：

www.your.com 部署常規(guī)業(yè)務(wù)；

trade.your.com 部署交易管理的業(yè)務(wù)；

passport.your.com 部署登錄注冊(cè)的業(yè)務(wù)；

在這種模式下，如果集成微信登錄和微信支付，前面說(shuō)的授權(quán)回調(diào)頁(yè)面域名的規(guī)則就會(huì)給應(yīng)用帶來(lái)問(wèn)題。在這里：至少可以確認(rèn)trade.your.com和passport.your.com都需要前面的介紹的用戶微信授權(quán)，但是它們是兩個(gè)不同的子域名，而且我們只有一個(gè)公眾號(hào)；根據(jù)授權(quán)回調(diào)頁(yè)面域名的原則，它只能用一個(gè)域名，并且只有回調(diào)地址的域名與該設(shè)置完全相同，才能成功發(fā)起微信授權(quán)，否則就會(huì)提示rediret_uri參數(shù)錯(cuò)誤或者引發(fā)無(wú)法回調(diào)的問(wèn)題。

那么這種情況該如何處理？

當(dāng)下的解決方案是引入一個(gè)新的非常簡(jiǎn)單的應(yīng)用來(lái)作為微信授權(quán)的代理服務(wù)，可以這么做：

1. 把公眾號(hào)的網(wǎng)頁(yè)授權(quán)接口域名設(shè)置成另外一個(gè)子域名，如proxy.your.com；

2. 然后把php_weixin_proxy里面的index.php部署到proxy.your.com

唯一的區(qū)別在于，在不使用proxy.your.com的時(shí)候，你從應(yīng)用發(fā)起微信授權(quán)的鏈接應(yīng)該是這樣的：

https://open.weixin.qq.com/connect/qrconnect?appid=xxxxx&redirect_uri=http%3A%2F%2Fpassport.your.com%2F&response_type=code&scope=snsapi_login&state=584bc87e11ff37492#wechat_redirect

用了proxy.your.com之后，這個(gè)授權(quán)鏈接就應(yīng)該是這樣的：

http://proxy.your.com/?appid=xxxxx&redirect_uri=http%3A%2F%2Fpassport.your.com%2Flogin%2Fnotify&response_type=code&scope=snsapi_base&state=584bc87e11ff37492&device=pc

后面這個(gè)鏈接跟上面的比：

1. 后面的鏈接中的host變成了proxy.your.com，也就是代理的授權(quán)回調(diào)域名；

整體方案思路：

小結(jié)：

這個(gè)方案我測(cè)試過(guò)，是行的通的。雖然說(shuō)引入了代理服務(wù)，增加了一次重定向操作，不過(guò)由于這個(gè)授權(quán)請(qǐng)求并不是所有請(qǐng)求都需要，所以實(shí)際上也不會(huì)對(duì)用戶體驗(yàn)產(chǎn)生多大的影響，但是從架構(gòu)上來(lái)說(shuō)，它的好處很明顯，能夠配合著應(yīng)用的拆分邏輯，集成同一個(gè)公眾號(hào)的登錄及支付功能，不必為每個(gè)子應(yīng)用都單獨(dú)申請(qǐng)一個(gè)公眾號(hào)來(lái)開發(fā)了（這種方式從業(yè)務(wù)上來(lái)說(shuō)也不合理，一個(gè)公司哪需要運(yùn)營(yíng)那么多公眾號(hào)）。

二、網(wǎng)站應(yīng)用接入微信登錄

1.網(wǎng)站接入微信登錄的好處

網(wǎng)站接入微信登錄，微信登錄使網(wǎng)站可以免除注冊(cè)的流程，并充分利用龐大的微信用戶群來(lái)實(shí)現(xiàn)快速傳播；網(wǎng)站接入微信登錄后，用戶只需要使用手機(jī)掃碼就可登錄，簡(jiǎn)化用戶注冊(cè)流程，更有效率的提高轉(zhuǎn)化用戶流量。

2.站接入微信登錄之前需要申請(qǐng)

接入微信登錄前，網(wǎng)站需首先進(jìn)行申請(qǐng)，獲得對(duì)應(yīng)的appid與appkey，以保證后續(xù)流程中可正確對(duì)網(wǎng)站與用戶進(jìn)行驗(yàn)證與授權(quán)；我們以瓴碼官網(wǎng)http://www.zeropaas.com申請(qǐng)。

3.瓴碼官網(wǎng)前端增加相關(guān)代碼

let nowUrl = location.href;

let result = /code=(w*)&state=([0-9]*)/.exec(nowUrl);

if(result){

window.parent.postMessage(nowUrl,'*');

}

4.網(wǎng)站前端將微信登錄二維碼圖標(biāo)內(nèi)嵌至一個(gè)p中，并顯示該p

!function (a, b, c) {

function d(a) {

var c = "default";

a.self_redirect === !0 ? c = "true" : a.self_redirect === !1 && (c = "false");

var d = b.createElement("iframe"),

e = "https://open.weixin.qq.com/connect/qrconnect?appid=" + a.appid + "&scope=" + a.scope + "&redirect_uri=" + a.redirect_uri + "&state=" + a.state + "&login_type=jssdk&self_redirect=" + c + '&styletype=' + (a.styletype || '') + '&sizetype=' + (a.sizetype || '') + '&bgcolor=' + (a.bgcolor || '') + '&rst=' + (a.rst || '');

e += a.style ? "&style=" + a.style : "", e += a.href ? "&href=" + a.href : "", d.src = e, d.frameBorder = "0", d.allowTransparency = "true", d.scrolling = "no", d.width = "300px", d.height = "400px";

var f = b.querySelector('.weChatLogin_col_weChatBouncedDiv');//微信二維碼內(nèi)嵌p

f.innerHTML = "", f.appendChild(d)

}

a.WxLogin = d

}(window, document);

const state = Number(new Date()).toString();//獲取狀態(tài)值

window.sessionStorage.setItem('state', state )//暫存狀態(tài)值

const obj = new WxLogin({//實(shí)例化一個(gè)二維碼

self_redirect: true,

id: "weChatBouncedDiv",//微信二維碼圖標(biāo)內(nèi)嵌p的id

appid: "wxfb8bf3273365770a",//應(yīng)用唯一標(biāo)識(shí)

scope: "snsapi_login",

redirect_uri: "http%3a%2f%2fzeropaas.com",//回調(diào)地址

state: state ,//用于保持請(qǐng)求和回調(diào)的狀態(tài)，授權(quán)請(qǐng)求后原樣帶回給第三方；該參數(shù)可應(yīng)用于防止csrf攻擊（跨站請(qǐng)求偽造攻擊）

});

5.網(wǎng)站前端微信登錄授權(quán)成功之后的處理

window.onmessage = function(e) {//微信登錄授權(quán)成功后，官網(wǎng)觸發(fā)該消息

let url = e.data;//e.data="http://www.zeropaas.com/?code=xxx&state=xxx"

if(url.indexOf('?') != -1){

url = url.substr(url.indexOf('?'))//url="?code=xxx&state=xxx"

let arr = url.substr(1).split('&');//arr=["code=xxx","state=xxx"]

arr = arr.map(item => {

item = item.split('=')

let map = new Map()

map.set(item[0],item[1])

item = Object.fromEntries(map)

return item

})//arr=[{code:"xxx"},{state:"xxx"}]

let oldState = window.sessionStorage.getItem('state');

let newState = arr[1].state;

// loadingDiv.style.display = 'flex'

// loadingDiv.innerHTML = '正在登錄中...'

$this.showVessel('loadingDiv',true,()=>{//顯示正在登錄中

$this.sm['loading'].startModule(function () {

$this.showSubModule('loading', true, function () {

if(oldState === newState){

$this.ep.thirdLogin(0,arr[0].code,1,1,0,null,function (result) {//向云端發(fā)送第三登錄事件,code是微信登錄碼

if (result === null) {

$this.$router.push('/')//微信登錄成功，并且不要綁定手機(jī)號(hào)

} else {//微信登錄成功，并且需要綁定手機(jī)號(hào)

$this.openID = result//微信用戶ID

$this.showSubModule('loading', false, function () {}, function () {})

$this.showVessel('loadingDiv',false,()=>{},()=>{})//隱藏正在登錄中

$this.showBindingPhone()//綁定手機(jī)號(hào)

}

},function (err) {

console.log(err)

})

}

}, function () {})

},()=>{})

window.onmessage = null

}

6.網(wǎng)站云端獲取微信openid和access_token

function getOpenid_WX(appid,appSecret,code,successCB, errorCB){//獲取微信openid和token

const request = require(global.nodePath + "/node_modules/request");

let url1= 'https://api.weixin.qq.com/sns/oauth4/access_token?appid=' + appid + '&secret=' + appSecret + '&code=' + code + '&grant_type=authorization_code';

request.get(

{

url: url1,

method: "GET",

json: true,

headers: {

"Content-type": "application/json",

},function (error, response, body) {

if (response.statusCode == 200) {

let data = JSON.stringify(body, null, 4);//從一個(gè)對(duì)象解析出字符串，第三個(gè)參數(shù)是格式化縮進(jìn)格式按照四個(gè)字符縮進(jìn)

let data1 = (JSON.parse(data));

let access_token = data1.access_token;

let openid = data1.openid;

successCB(access_token,openid);

}else {

errorCB(['獲取微信信息失??！狀態(tài)碼：'+ response.statusCode]);

}

);

}

7.微信登錄和QQ登錄的區(qū)別

微信登錄可以內(nèi)嵌網(wǎng)站登錄頁(yè)面，也可以打開微信登錄授權(quán)頁(yè)面，QQ登錄不可以內(nèi)嵌網(wǎng)站登錄授權(quán)頁(yè)面，必須打開QQ登錄授權(quán)頁(yè)面，如果是打開微信或QQ登錄授權(quán)頁(yè)面，則登錄授權(quán)成功后必須關(guān)閉該頁(yè)面。

微信登錄回調(diào)地址可以指定一級(jí)根目錄或二級(jí)子目錄，比如 "http%3a%2f%2fzeropaas.com "或"http%3a%2f%2fzeropaas.com/qqLogin"， QQ登錄回調(diào)地址必須指定二級(jí)子目錄，比如 "http%3a%2f%2fzeropaas.com/qqLogin"

三、用微信打開用ecshop 做的手機(jī)網(wǎng)站，怎么實(shí)現(xiàn)用微信帳號(hào)直接登錄手機(jī)網(wǎng)站，如圖：

首先你申請(qǐng)個(gè)微信公眾號(hào)

首先配置回調(diào)域名
構(gòu)造請(qǐng)求url如下：

https://open.weixin.qq.com/connect/oauth4/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth4.php&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

頁(yè)面URL中的scope=snsapi_userinfo 表示應(yīng)用授權(quán)作用域?yàn)檎?qǐng)求用戶信息

★ 如果使用別人的AppID和AppSecret，那么獲得的OpenID是那個(gè)有高級(jí)接口權(quán)限的服務(wù)號(hào)的，這里可以通過(guò)消息回復(fù)，獲取本公眾賬號(hào)下的OpenID，帶入回調(diào)中，與另一個(gè)OpenID進(jìn)行關(guān)聯(lián)也可以使用開放平臺(tái)的UnionID功能來(lái)得到用戶在自己賬號(hào)下的OpenID 
https://open.weixin.qq.com/connect/oauth4/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth4.php?userid=oc7tbuPA9BgUCLADib5nB3k2KWWg&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

將該鏈接回復(fù)給關(guān)注用戶，用戶點(diǎn)擊后，彈出應(yīng)用授權(quán)界面

3. 回調(diào)頁(yè)面得到鏈接如下，回調(diào)url中將包含參數(shù)code

http://mascot.duapp.com/oauth4.php?code=00b788e3b42043c8459a57a8d8ab5d9f&state=1

或者 http://mascot.duapp.com/oauth4.php?userid=oc7tbuPA9BgUCLADib5nB3k2KWWg&code=00b788e3b42043c8459a57a8d8ab5d9f&state=1

4. 再使用code換取oauth4的授權(quán)access_token

url如下：

https://api.weixin.qq.com/sns/oauth4/access_token?appid=wx8888888888888888&secret=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&code=00b788e3b42043c8459a57a8d8ab5d9f&grant_type=authorization_code

獲得授權(quán)Access Token:

{

"access_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw",

"expires_in": 7200,

"refresh_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A",

"openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc",

"scope": "snsapi_userinfo,"

}

5. 再使用授權(quán)Access Token獲取用戶信息

url如下：

https://api.weixin.qq.com/sns/userinfo?access_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw&openid=oLVPpjqs9BhvzwPj5A-vTYAX3GLc

返回如下

{

"openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc",

"nickname": "刺猬寶寶",

"sex": 1,

"language": "zh_CN",

"city": "深圳",

"province": "廣東",

"country": "中國(guó)",

"headimgurl": "http://wx.qlogo.cn/mmopen/utpKYf69VAbCRDRlbUsPsdQN38DoibCkrU6SAMCSNx558eTaLVM8PyM6jlEGzOrH67hyZibIZPXu4BK1XNWzSXB3Cs4qpBBg18/0",

"privilege": []

}

獲取用戶信息完成。

最終得到用戶信息如下所示

四、如何進(jìn)入微信公眾平臺(tái)授權(quán)登錄界面？

進(jìn)入方法：

1、用戶關(guān)注微信公眾賬號(hào)。

2、微信公眾賬號(hào)提供用戶請(qǐng)求授權(quán)頁(yè)面URL。

3、用戶點(diǎn)擊授權(quán)頁(yè)面URL，將向服務(wù)器發(fā)起請(qǐng)求。

4、服務(wù)器詢問(wèn)用戶是否同意授權(quán)給微信公眾賬號(hào)(scope為snsapi_base時(shí)無(wú)此步驟)。

5、用戶同意(scope為snsapi_base時(shí)無(wú)此步驟)。

6、服務(wù)器將CODE通過(guò)回調(diào)傳給微信公眾賬號(hào)。

7、微信公眾賬號(hào)獲得CODE。

8、微信公眾賬號(hào)通過(guò)CODE向服務(wù)器請(qǐng)求Access Token。

9、服務(wù)器返回Access Token和OpenID給微信公眾賬號(hào)。

10、微信公眾賬號(hào)通過(guò)Access Token向服務(wù)器請(qǐng)求用戶信息(scope為snsapi_base時(shí)無(wú)此步驟)。

11、服務(wù)器將用戶信息回送給微信公眾賬號(hào)(scope為snsapi_base時(shí)無(wú)此步驟)。

以上就是關(guān)于微信授權(quán)登錄網(wǎng)頁(yè)設(shè)計(jì)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。