解决微信OAuth2.0网页授权只能设置一个回调域名的问题

5054 4 1年前 sgfoot 转载

**目录导航**

[TOC]

## 使用方法
* 前往微信公众平台->接口权限->网页授权获取用户基本信息->修改，填写授权回调页面域名，例如www.abc.com

* 在www.abc.com域名下部署get-weixin-code.html，不一定是根目录，例如：http://www.abc.com/xxx/get-weixin-code.html

* 假设你的http://www.xyz.com/hello-world.html这个页面需要获取微信授权，那么你应该使用以下地址来获取授权：

* http://www.abc.com/xxx/get-weixin-code.html?appid=XXXX&scope=snsapi_base&state=hello-world&redirect_uri=http%3A%2F%2Fwww.xyz.com%2Fhello-world.html

* 这样最终就会跳转到这样一个地址：http://www.xyz.com/hello-world.html?code=XXXXXXXXXXXXXXXXX&state=hello-world，从而你就拿到了授权code以及自定义的state参数了

## scope 两种用法

* snsapi_base 为静默授权,一般用于只获取openid
* snsapi_userinfo 非静默,会弹出窗口,需要用户点击同意,一般用于获取用户信息

## 源码
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信登录</title>
</head>
<body>
<script>
    var GWC = {
        version: '1.1.1',
        urlParams: {},
        appendParams: function(url, params) {
            if (params) {
                var baseWithSearch = url.split('#')[0];
                var hash = url.split('#')[1];
                for (var key in params) {
                    var attrValue = params[key];
                    if (attrValue !== undefined) {
                        var newParam = key + "=" + attrValue;
                        if (baseWithSearch.indexOf('?') > 0) {
                            var oldParamReg = new RegExp('^' + key + '=[-%.!~*\'\(\)\\w]*', '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;
        },
        getUrlParams: function() {
            var pairs = location.search.substring(1).split('&');
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');
                if (pos === -1) {
                    continue;
                }
                GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1));
            }
        },
        doRedirect: function() {
            var code = GWC.urlParams['code'];
            var appId = GWC.urlParams['appid'];
            var scope = GWC.urlParams['scope'] || 'snsapi_base';
            var state = GWC.urlParams['state'];
            var isMp = GWC.urlParams['isMp']; //isMp为true时使用开放平台作授权登录，false为网页扫码登录
            var baseUrl;
            var redirectUri;
            if (!code) {
                baseUrl = "https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect";
                if(scope == 'snsapi_login' && !isMp){
                    baseUrl = "https://open.weixin.qq.com/connect/qrconnect";
                }
                //第一步，没有拿到code，跳转至微信授权页面获取code
                redirectUri = GWC.appendParams(baseUrl, {
                    'appid': appId,
                    'redirect_uri': encodeURIComponent(location.href),
                    'response_type': 'code',
                    'scope': scope,
                    'state': state,
                });
            } else {
                //第二步，从微信授权页面跳转回来，已经获取到了code，再次跳转到实际所需页面
                redirectUri = GWC.appendParams(GWC.urlParams['redirect_uri'], {
                    'code': code,
                    'state': state
                });
            }
            location.href = redirectUri;
        }
    };
    GWC.getUrlParams();
    GWC.doRedirect();
</script>
</body>
</html>
```

## 下载
[![get-weixin-code.zip](/static/editormd/images/attachicons/zip.gif)get-weixin-code.zip](http://blog.sgfoot.com/uploads/201801/5a60012d28e60_5a60012d.zip "get-weixin-code.zip")

## 源码
[https://github.com/yezihack/GetWeixinCode](https://github.com/yezihack/GetWeixinCode)

#微信开发

你可能感兴趣的文章

{{item.title}}