微信公众号授权登录配置

会员授权登录 使用文档
会员授权登录 使用文档

第一步,登入认证的微信服务号

访问 https://mp.weixin.qq.com

1.png

第二步,将 AppID 和 AppSecret 填写至后台

1.png

第三步,配置 JS 域名

访问:公众号管理后台-设置与开发-公众号设置-功能设置-网页授权域名


  • 如果网站访问地址是 http://example.com 就配置域名 example.com。
  • 如果网站访问地址是 http://www.example.com 就配置 www.example.com。

常见问题

公众号微信授权登录多个域名如何实现?

问题背景

早些年微信公众号授权登录只能绑定一个域名,如果你的网站有多个域名,那么就只能选择一个域名进行授权登录,这样就会导致用户在其他域名下无法使用微信授权登录。

后来增加到了2个,现在好像最多是3个。

如果超过3个域名,那么就需要用一些别的方法来实现了。

微信授权登录原理

微信授权登录的流程如下:

  1. 用户访问第三方应用或网站,并点击微信登录按钮。
  2. 第三方应用生成授权请求URL,并将用户重定向到该URL。
  3. 用户在微信客户端中打开授权请求URL,微信验证用户身份并显示授权页面。
  4. 用户确认授权登录。
  5. 微信将用户重定向回第三方应用,并附带授权凭证。
  6. 第三方应用后端接收到回调请求继续进行其他操作

在跳转到微信授权登录界面过程中,微信会检查当前域名是否在微信开放平台中配置过,如果没有配置过,那么就会提示“该域名未授权”。

解决办法

以需要在 a.comb.com 两个域名下实现微信授权登录,现在在微信开放平台中只能配置 a.com

在网站 a.com 中创建一个微信授权登录代理页面,作为转发,操作后的流程如下:

  1. 用户访问 b.com 点击授权登录,跳转到 a.com 的微信授权登录代理页面。
  2. a.com 的微信授权登录代理页面生成授权请求URL,并将用户重定向到该URL。
  3. 用户在微信客户端中打开授权请求URL,微信验证用户身份并完成授权。
  4. 微信将用户重定向回 a.com 的微信授权登录代理页面,并附带授权凭证。
  5. a.com 的微信授权登录代理页面接收到回调请求,将授权凭证转发给 b.com

将以下「代理文件参考代码」保存为 wechat_proxy.html,确保 http://a.com/wechat_proxy.html 可以访问到该文件。

b.com 网站微信授权登录配置中,将授权回调域名代理设置为 http://a.com/wechat_proxy.html

a.com 可以是任何系统,但是 b.com 需要是 ModStart 系统,因为目前只有 ModStart 系统对微信授权登录代理转发做代码逻辑处理。

代理文件参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>授权登录中...</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta content="always" name="referrer"/>
</head>
<body>
<div style="text-align:center;color:#999;line-height:100px;">
    授权登录中...
</div>
<div id="oauthProxyRedirectButton" style="text-align:center;background:#CCC;color:#333;line-height:100px;display:none;">
    Redirect Now
</div>
<script>
    var OauthProxy = {
        version: '1.0.0',
        parseUrl: function (url) {
            url = url || window.location.href;
            var parser = document.createElement("a");
            parser.href = url;
            var param = {};
            var pairs = (parser.search || '?').substring(1).split('&');
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');
                if (pos === -1) {
                    continue;
                }
                param[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1));
            }
            return {
                protocol: parser.protocol,
                host: parser.host,
                hostname: parser.hostname,
                port: parser.port,
                pathname: parser.pathname,
                hash: parser.hash,
                search: parser.search,
                origin: parser.origin,
                param: param,
            };
        },
        buildUrl: function (urlInfo) {
            var part = [];
            part.push(urlInfo.protocol);
            part.push('//');
            part.push(urlInfo.host);
            part.push(urlInfo.pathname);
            var param = [];
            for (var k in urlInfo.param) {
                param.push(encodeURIComponent(k) + '=' + encodeURIComponent(urlInfo.param[k]));
            }
            if (param.length > 0) {
                part.push('?');
                part.push(param.join('&'));
            }
            if (urlInfo.hash) {
                part.push(urlInfo.hash);
            }
            return part.join('');
        },
        log: function (label, json) {
            json = json || {};
            console.log('>>>>> OauthProxy - ' + label + ' ' + JSON.stringify(json, null, 4));
        },
        redirect: function (url) {
            var oauthProxyDebug = (localStorage.getItem('oauthProxyDebug') ? true : false);
            if (oauthProxyDebug) {
                window.__oauthProxyRedirect = url;
                document.querySelector('#oauthProxyRedirectButton').style.display = 'block';
            } else {
                window.location.href = url;
            }
        },
        doProcess: function () {

            var ele = document.querySelector('#oauthProxyRedirectButton');
            if (ele) {
                ele.addEventListener('click', function () {
                    window.location.href = window.__oauthProxyRedirect;
                });
            }

            var urlInfo = OauthProxy.parseUrl(), redirectTo, i;
            var oauthProxyRedirect = localStorage.getItem('oauthProxyRedirect');

            OauthProxy.log('urlInfo', urlInfo);
            OauthProxy.log('oauthProxyRedirect', oauthProxyRedirect);
            var proxy = urlInfo.param['_proxy'] || '';
            if (proxy) {
                OauthProxy.log('Proxy Mode');
                var targetInfo = OauthProxy.parseUrl(proxy);
                OauthProxy.log('targetInfo', targetInfo);
                var redirectKeys = ['redirect_uri'];
                var found = false;
                for (i = 0; i < redirectKeys.length; i++) {
                    var k = redirectKeys[i];
                    if (k in targetInfo.param) {
                        OauthProxy.log('redirectKey', k);
                        localStorage.setItem('oauthProxyRedirect', targetInfo.param[k]);
                        targetInfo.param[k] = urlInfo.origin + urlInfo.pathname;
                        found = true;
                        break;
                    }
                }
                if (found) {
                    OauthProxy.log('targetInfo New', targetInfo);
                    redirectTo = OauthProxy.buildUrl(targetInfo);
                    OauthProxy.log('redirectTo', redirectTo);
                    OauthProxy.redirect(redirectTo);
                } else {
                    OauthProxy.log('not found redirectKey');
                }
                return true;
            } else if (oauthProxyRedirect) {
                OauthProxy.log('Redirect Mode');
                var redirectInfo = OauthProxy.parseUrl(oauthProxyRedirect);
                OauthProxy.log('redirectInfo', redirectInfo);
                var mergeKeys = ['protocol', 'host', 'pathname', 'hash'];
                for (i = 0; i < mergeKeys.length; i++) {
                    urlInfo[mergeKeys[i]] = redirectInfo[mergeKeys[i]];
                }
                OauthProxy.log('urlInfo New', urlInfo);
                redirectTo = OauthProxy.buildUrl(urlInfo);
                OauthProxy.log('redirectTo', redirectTo);
                localStorage.removeItem('oauthProxyRedirect');
                OauthProxy.redirect(redirectTo);
                return true;
            }
            OauthProxy.log('Unknown Mode');
            return false;
        }
    };
    OauthProxy.doProcess();
</script>
</body>
</html>
更新: 2024-02-28 19:33:40
QQ
微信