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

序言

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

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

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

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

不同点：

1. 微信网页授权，一般情况下在微信端打开的页面，出现如下授权方式的，如图 。
2. 第三方网页授权一般是，比腾讯的易迅
   。
   授权的界面也是不同的。

实现

###微信网页授权

首先我们要有自己的公众号，查看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）嵌入到我们自己的网页中来，我采用第二种

1. 首先在页面生成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