微信扫码授权回调

1,349 阅读1分钟

1、由于只要一个回调地址,通过本页面作为中间页,判断然后跳转到不同的域名。假如我们有多个地址需要做微信扫码登录,比如我们的研发环境,测试环境,生产环境都需要做微信扫码登陆,但又不想给研发测试环境做外网的端口映射,那么可以使用这种方式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>微信登陆</title>
</head>

<body>
    <script>
        function getUrlParams(key) {
            var args = {};
            var pairs = location.search.substring(1).split('&');
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');
                if (pos === -1) {
                    continue;
                }
                args[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1));
            }
            return args[key];
        }
        function getRealRedirectUrl(env) {
            var realRedirectUrl = 'http://yw.chouxiaowa.cn/plugins/salesman/pc/index/middle_page';
            if ('dev' == env) {
                realRedirectUrl = 'http://yw.chouxiaowa.cn';
            } else if ('test' == env) {
                realRedirectUrl = 'http://192.168.1.10:30080';
            } else if ('pre-prod' == env) {
                realRedirectUrl = 'http://yw.chouxiaowa.cn';
            }
            return realRedirectUrl;
        }
        function appendParams(params, url) {
            var baseWithSearch = url.split('#')[0];
            var hash = url.split('#')[1];
            for (var i = 0; i < params.length; i++) {
                if (params[i].value !== undefined) {
                    var newParam = params[i].key + "=" + params[i].value;
                    if (baseWithSearch.indexOf('?') > 0) {
                        var oldParamReg = new RegExp(params[i].key + '=[-\\w]{0,40}', 'g');
                        if (oldParamReg.test(baseWithSearch)) {
                            baseWithSearch = baseWithSearch.replace(oldParamReg, newParam);
                        } else {
                            baseWithSearch += "&" + newParam;
                        }
                    } else {
                        baseWithSearch += "?" + newParam;
                    }
                }
            }
            if (hash) {
                url = baseWithSearch + '#' + hash;
            } else {
                url = baseWithSearch;
            }
            return url;
        }
        var code = getUrlParams('code');
        var appId = getUrlParams('appid');
        var scope = getUrlParams('scope') || 'snsapi_login';
        var state = getUrlParams('state') || Math.random();
        var env = getUrlParams('env');
        var request = getUrlParams('request') || '/plugins/salesman/pc/index/middle_page';
        var redirectUrl;
        if (!code) {
            redirectUrl = appendParams([{
                key: 'appid',
                value: appId
            }, {
                key: 'redirect_uri',
                value: encodeURIComponent(location.href)
                // value: encodeURIComponent("http://kj.chouxiaowa.cn/plugins/organization/pc/pub/ywy_login")
            }, {
                key: 'response_type',
                value: 'code'
            }, {
                key: 'scope',
                value: scope
            }, {
                key: 'state',
                value: state
            }], 'https://open.weixin.qq.com/connect/qrconnect');
        } else {
            redirectUrl = appendParams([{ key: 'code', value: code }, {
                key: 'state',
                value: state
            }], getRealRedirectUrl(env)); //  + request
        }
        // console.log(redirectUrl, redirectUrl.split("="), request, env)
        location.href = redirectUrl;
   // window.close();
    </script>
</body>

</html>

2、可以使用第三方插件,将微信二维码内嵌到本页面

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
function get_wx_qrcode(appid, redirect_uri) {
    //从微信的开发文档不难看出回调域名需要经过encodeURIComponent处理
    var obj = new WxLogin({
        self_redirect: false, //值为true时,直接在二维码的弹窗中进行页面跳转及其余操作,
        id: "login_container", //需要承载二维码的容器id  
        appid,
        scope: "snsapi_login", //网页授权,目前网页只有这一种方式,静默授权
        redirect_uri, //回调域名(地址前部分是项目域名,后部分loginSuccess是微信需要跳转的路径(vue中的路由名称))
        // redirect_uri: encodeURIComponent(location.origin),     //回调域名(地址前部分是项目域名,后部分loginSuccess是微信需要跳转的路径(vue中的路由名称))
        state: Math.random(),
        style: "white",
        href: ""
    });
}