正文

微信授权登录网页设计

发布时间：2023-03-21 02:21:23 稿源：创意岭阅读： 236 问大家

大家好！今天让创意岭的小编来大家介绍下关于微信授权登录网页设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

本文目录:

1、微信OAuth4.0授权回调页面域名设置问题怎么解决？
2、网站应用接入微信登录
3、用微信打开用ecshop 做的手机网站，怎么实现用微信帐号直接登录手机网站，如图：
4、如何进入微信公众平台授权登录界面？

微信授权登录网页设计

一、微信OAuth4.0授权回调页面域名设置问题怎么解决？

当下的解决方案是引入一个新的非常简单的应用来作为微信授权的代理服务，可以这么做：

1. 把公众号的网页授权接口域名设置成另外一个子域名，如proxy.your.com；

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

php_weixin_proxy下的index.php是一个很简单的php文件，你可以直接查看源码了解它的实现方式。因为当前项目的环境，我采用php来完成这个代理服务实现，实际上，你完全可以用任意平台语言来完成类似的功能。

当其它业务需要发起微信授权时，将授权请求先发到proxy.your.com，然后proxy.your.com会把这个请求转发到微信；

当用户同意授权后，proxy.your.com会收到微信的授权回调，并把回调结果（code、state参数）原封不动地再返回给最开始发起授权的业务。

唯一的区别在于，在不使用proxy.your.com的时候，你从应用发起微信授权的链接应该是这样的：

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端跟移动端的授权地址是不一样的，而后面的链接是发送个proxy.your.com的，所以需要多加个参数告诉它在转发给授权申请给微信的时候，是用PC端还是移动端的授权地址。

1. 用户从我们的应用触发需要授权的操作，比如点击微信登录；

2. 应用收到这种用户请求后，将用户重定向到微信提供的一个授权页面：

或

3. 用户通过微信扫码（PC端授权，上边左图）或者点击确认按钮（移动端授权，上边右图）告知微信，授权应用访问自己的微信账号信息；

4. 微信收到用户的授权许可后，生成授权码，并把它作为参数回调至应用的某个页面；

5. 应用的回调页面在接收到微信的回调请求后，拿到其中的授权码，并通过微信官方提供的access token api接口获取access token；

6. 最后通过access token以及微信官方提供的另一个userinfo api接口就能获取到用户的微信账号信息。

为了实现这个过程，首先要为应用申请一个微信公众号，并将应用最终部署的域名设置到微信公众号设置里面的授权回调页面域名这个选项里面。微信官方对这个选项的说明如下：

关于网页授权回调域名的说明

1、在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；

2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：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、如果公众号登录授权给了第三方开发者来进行管理，则不必做任何设置，由第三方代替公众号实现网页授权即可

由此可见，这个规则极其严格。如果说我们的应用最终部署的时候只有一个域名，那么这种规则不会有什么问题；但是考虑到将来应用的复杂性，我们可能在应用设计之初就会对应用做拆分，然后不同的业务采用不同的二级域名来部署。比如一个带有交易的应用，你可能会把登录注册，交易管理和常规业务都独立出来，然后采用以下的方式来部署它们：

www.your.com 部署常规业务；

trade.your.com 部署交易管理的业务；

passport.your.com 部署登录注册的业务；

在这种模式下，如果集成微信登录和微信支付，前面说的授权回调页面域名的规则就会给应用带来问题。在这里：至少可以确认trade.your.com和passport.your.com都需要前面的介绍的用户微信授权，但是它们是两个不同的子域名，而且我们只有一个公众号；根据授权回调页面域名的原则，它只能用一个域名，并且只有回调地址的域名与该设置完全相同，才能成功发起微信授权，否则就会提示rediret_uri参数错误或者引发无法回调的问题。

那么这种情况该如何处理？

当下的解决方案是引入一个新的非常简单的应用来作为微信授权的代理服务，可以这么做：

1. 把公众号的网页授权接口域名设置成另外一个子域名，如proxy.your.com；

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

当其它业务需要发起微信授权时，将授权请求先发到proxy.your.com，然后proxy.your.com会把这个请求转发到微信；

当用户同意授权后，proxy.your.com会收到微信的授权回调，并把回调结果（code、state参数）原封不动地再返回给最开始发起授权的业务。

唯一的区别在于，在不使用proxy.your.com的时候，你从应用发起微信授权的链接应该是这样的：

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，也就是代理的授权回调域名；

整体方案思路：

小结：

这个方案我测试过，是行的通的。虽然说引入了代理服务，增加了一次重定向操作，不过由于这个授权请求并不是所有请求都需要，所以实际上也不会对用户体验产生多大的影响，但是从架构上来说，它的好处很明显，能够配合着应用的拆分逻辑，集成同一个公众号的登录及支付功能，不必为每个子应用都单独申请一个公众号来开发了（这种方式从业务上来说也不合理，一个公司哪需要运营那么多公众号）。

二、网站应用接入微信登录

1.网站接入微信登录的好处

网站接入微信登录，微信登录使网站可以免除注册的流程，并充分利用庞大的微信用户群来实现快速传播；网站接入微信登录后，用户只需要使用手机扫码就可登录，简化用户注册流程，更有效率的提高转化用户流量。

2.站接入微信登录之前需要申请

接入微信登录前，网站需首先进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权；我们以瓴码官网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();//获取状态值

window.sessionStorage.setItem('state', state )//暂存状态值

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 ,//用于保持请求和回调的状态，授权请求后原样带回给第三方；该参数可应用于防止csrf攻击（跨站请求伪造攻击）

});

5.网站前端微信登录授权成功之后的处理

window.onmessage = function(e) {//微信登录授权成功后，官网触发该消息

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) {//向云端发送第三登录事件,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(['获取微信信息失败！状态码：'+ response.statusCode]);

}

);

}

7.微信登录和QQ登录的区别

微信登录可以内嵌网站登录页面，也可以打开微信登录授权页面，QQ登录不可以内嵌网站登录授权页面，必须打开QQ登录授权页面，如果是打开微信或QQ登录授权页面，则登录授权成功后必须关闭该页面。

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

三、用微信打开用ecshop 做的手机网站，怎么实现用微信帐号直接登录手机网站，如图：

首先你申请个微信公众号

首先配置回调域名
构造请求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进行关联也可以使用开放平台的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": []

}