正文

微信授權登錄網頁設計

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

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于微信授權登錄網頁設計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

本文目錄:

1、微信OAuth4.0授權回調頁面域名設置問題怎么解決？
2、網站應用接入微信登錄
3、用微信打開用ecshop 做的手機網站，怎么實現(xiàn)用微信帳號直接登錄手機網站，如圖：
4、如何進入微信公眾平臺授權登錄界面？

微信授權登錄網頁設計

一、微信OAuth4.0授權回調頁面域名設置問題怎么解決？

當下的解決方案是引入一個新的非常簡單的應用來作為微信授權的代理服務，可以這么做：

1. 把公眾號的網頁授權接口域名設置成另外一個子域名，如proxy.your.com；

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

php_weixin_proxy下的index.php是一個很簡單的php文件，你可以直接查看源碼了解它的實現(xiàn)方式。因為當前項目的環(huán)境，我采用php來完成這個代理服務實現(xiàn)，實際上，你完全可以用任意平臺語言來完成類似的功能。

當其它業(yè)務需要發(fā)起微信授權時，將授權請求先發(fā)到proxy.your.com，然后proxy.your.com會把這個請求轉發(fā)到微信；

當用戶同意授權后，proxy.your.com會收到微信的授權回調，并把回調結果（code、state參數）原封不動地再返回給最開始發(fā)起授權的業(yè)務。

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

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之后，這個授權鏈接就應該是這樣的：

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

后面這個鏈接跟上面的比：

1. 后面的鏈接中的host變成了proxy.your.com，也就是代理的授權回調域名；

2. 后面的多了一個device參數，這個是必要的。因為微信pc端跟移動端的授權地址是不一樣的，而后面的鏈接是發(fā)送個proxy.your.com的，所以需要多加個參數告訴它在轉發(fā)給授權申請給微信的時候，是用PC端還是移動端的授權地址。

1. 用戶從我們的應用觸發(fā)需要授權的操作，比如點擊微信登錄；

2. 應用收到這種用戶請求后，將用戶重定向到微信提供的一個授權頁面：

或

3. 用戶通過微信掃碼（PC端授權，上邊左圖）或者點擊確認按鈕（移動端授權，上邊右圖）告知微信，授權應用訪問自己的微信賬號信息；

4. 微信收到用戶的授權許可后，生成授權碼，并把它作為參數回調至應用的某個頁面；

5. 應用的回調頁面在接收到微信的回調請求后，拿到其中的授權碼，并通過微信官方提供的access token api接口獲取access token；

6. 最后通過access token以及微信官方提供的另一個userinfo api接口就能獲取到用戶的微信賬號信息。

為了實現(xiàn)這個過程，首先要為應用申請一個微信公眾號，并將應用最終部署的域名設置到微信公眾號設置里面的授權回調頁面域名這個選項里面。微信官方對這個選項的說明如下：

關于網頁授權回調域名的說明

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

2、授權回調域名配置規(guī)范為全域名，比如需要網頁授權的域名為：www.qq.com，配置以后此域名下面的頁面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth4.0鑒權。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com無法進行OAuth4.0鑒權

3、如果公眾號登錄授權給了第三方開發(fā)者來進行管理，則不必做任何設置，由第三方代替公眾號實現(xiàn)網頁授權即可

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

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

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

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

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

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

當下的解決方案是引入一個新的非常簡單的應用來作為微信授權的代理服務，可以這么做：

1. 把公眾號的網頁授權接口域名設置成另外一個子域名，如proxy.your.com；

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

當其它業(yè)務需要發(fā)起微信授權時，將授權請求先發(fā)到proxy.your.com，然后proxy.your.com會把這個請求轉發(fā)到微信；

當用戶同意授權后，proxy.your.com會收到微信的授權回調，并把回調結果（code、state參數）原封不動地再返回給最開始發(fā)起授權的業(yè)務。

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

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之后，這個授權鏈接就應該是這樣的：

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

后面這個鏈接跟上面的比：

1. 后面的鏈接中的host變成了proxy.your.com，也就是代理的授權回調域名；

整體方案思路：

小結：

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

二、網站應用接入微信登錄

1.網站接入微信登錄的好處

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

2.站接入微信登錄之前需要申請

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

3.瓴碼官網前端增加相關代碼

let nowUrl = location.href;

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

if(result){

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

}

4.網站前端將微信登錄二維碼圖標內嵌至一個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');//微信二維碼內嵌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({//實例化一個二維碼

self_redirect: true,

id: "weChatBouncedDiv",//微信二維碼圖標內嵌p的id

appid: "wxfb8bf3273365770a",//應用唯一標識

scope: "snsapi_login",

redirect_uri: "http%3a%2f%2fzeropaas.com",//回調地址

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

});

5.網站前端微信登錄授權成功之后的處理

window.onmessage = function(e) {//微信登錄授權成功后，官網觸發(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('/')//微信登錄成功，并且不要綁定手機號

} else {//微信登錄成功，并且需要綁定手機號

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

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

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

$this.showBindingPhone()//綁定手機號

}

},function (err) {

console.log(err)

})

}

}, function () {})

},()=>{})

window.onmessage = null

}

6.網站云端獲取微信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);//從一個對象解析出字符串，第三個參數是格式化縮進格式按照四個字符縮進

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ū)別

微信登錄可以內嵌網站登錄頁面，也可以打開微信登錄授權頁面，QQ登錄不可以內嵌網站登錄授權頁面，必須打開QQ登錄授權頁面，如果是打開微信或QQ登錄授權頁面，則登錄授權成功后必須關閉該頁面。

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

三、用微信打開用ecshop 做的手機網站，怎么實現(xiàn)用微信帳號直接登錄手機網站，如圖：

首先你申請個微信公眾號

首先配置回調域名
構造請求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

頁面URL中的scope=snsapi_userinfo 表示應用授權作用域為請求用戶信息

★ 如果使用別人的AppID和AppSecret，那么獲得的OpenID是那個有高級接口權限的服務號的，這里可以通過消息回復，獲取本公眾賬號下的OpenID，帶入回調中，與另一個OpenID進行關聯(lián)也可以使用開放平臺的UnionID功能來得到用戶在自己賬號下的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

將該鏈接回復給關注用戶，用戶點擊后，彈出應用授權界面

3. 回調頁面得到鏈接如下，回調url中將包含參數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的授權access_token

url如下：

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

獲得授權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. 再使用授權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": "中國",

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

"privilege": []

}