那些年用node接入微信走过的坑之（四）---微信扫码登录第三方网站

序言

随着微信使用者不断增多，很多网站使用了微信扫码登录功能，这里做一个简单的实现。

第三方网页授权和微信网页端授权

这两个笔者当初区分了好久，有什么区别和联系呢？

相同点：

两者的过程基本是类似的，都是通过appId和secret和code首先获取access_token(注意这里的access_token跟通用api调取token是不一样的 )，然后通过access_token和openId获取用户基本信息进行操作，比如说登录。

不同点：

微信网页授权，一般情况下在微信端打开的页面，出现如下授权方式的，如图

。

第三方网页授权一般是，比腾讯的易迅


。

授权的界面也是不同的。

实现

###微信网页授权

首先我们要有自己的公众号，查看appId和secret

1. 跳转链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yourId&redirect_uri=yourUrl&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

2.生成链接 yourUrl + &code=xxxxxxxx，这个链接我们可以哪里进行获取用户信息，比如openId。

第三方网页授权登录

首先我
4000
们要在微信开发平台中建立一个网页应用（重要）

两种方式，一种是直接使用微信页面，一种是将微信页面（ifram）嵌入到我们自己的网页中来，我采用第二种

首先在页面生成ifram。关键代码如下

wxInit: function () {
!function (a, b) {
function d(a) {
var e, c = b.createElement("iframe"),
d = "https://open.weixin.qq.com/connect/qrconnect?appid=" + a.appid + "&scope=" + a.scope + "&redirect_uri=" + a.redirect_uri + "&state=" + a.state + "&login_type=jssdk";
d += a.style ? "&style=" + a.style : "",
d += a.href ? "&href=" + a.href : "",
c.src = d,
c.frameBorder = "0",
c.allowTransparency = "true",
c.scrolling = "no",
c.width = "300px",
c.height = "400px",
e = b.getElementById(a.id),
e.innerHTML = "",
e.appendChild(c)
}

a.WxLogin = d
}(window, document);
//初始化
var obj = new WxLogin({
id: "login_container",
appid: "yourId",
scope: "snsapi_login",
redirect_uri: encodeURIComponent("http://www.idianbang.cn/user/login"),
state: Math.ceil(Math.random() * 1000),
style: "black",
href: ""
});
}

2.跟上一步一样，生成链接 yourUrl + &code=xxxxxxxx，这个链接我们可以哪里进行获取用户信息，比如openId。

最后做一些处理比如说登录

就是获取用户信息，对用户进行登录或者注册的操作

function getWXUser(req, res) {
var code = req.body.code;
var type = req.body.type || 0;
var appid, appsecret;

if (parseInt(type) == 0) {
appid = constant.WX_WEB_OPEN_APPID;
appsecret = constant.WX_WEB_OPEN_APPSECRET;
} else {
appid = constant.WX_OPEN_APPID;
appsecret = constant.WX_OPEN_APPSECRET;
}
AV.Cloud.httpRequest({
method: 'GET',
url: 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appid + '&secret=' + appsecret + '&code=' + code + '&grant_type=authorization_code',
success: function (httpResponse) {
var data = JSON.parse(httpResponse.data)
var access_token = data.access_token;
var openid = data.openid;
//获取unionid
AV.Cloud.httpRequest({
method: 'GET',
url: 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token + '&openid=' + openid,
success: function (httpResponse) {
var data = JSON.parse(httpResponse.data)
data.access_token = access_token
res.send({
'code': 0,
'data': data
})
},
error: function (httpResponse) {
res.error({
"code": httpResponse.status,
"message": httpResponse.data.error + httpResponse.data.error_description
});
}
});

},
error: function (httpResponse) {
res.error({
"code": httpResponse.status,
"message": httpResponse.data.error + httpResponse.data.error_description
});
}
});
}

结语：

这里有一个梗，微信用户在不同平台的openId是不一样的，这里就要注意了，如果您要使用网页第三方登录和微信客户端授权登录，是两个应用，同一用户的openId是不一样的，你可以和我们一样使用unionid来生成用户和登录，这样就不会有太多的问题了，否则产生两个用户。

不过还有一种方式是只用公众号授权方式，典型的是石墨文档，想了解的朋友可以去体验下是怎么实现的，有空可以把这个改成那种方式，体验可能更好一些吧。

ITDogFire –sky