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

来源：互联网发布：黑马程序员每天演讲编辑：程序博客网时间：2024/04/29 15:58

序言

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

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

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

相同点：
两者的过程基本是类似的，都是通过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。

第三方网页授权登录

首先我们要在微信开发平台中建立一个网页应用（重要）
两种方式，一种是直接使用微信页面，一种是将微信页面（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

0 0