微信网页授权域名大于2个的解决方法

问题说明

经常对接微信的朋友都知道，微信授权需要在微信公众号后台配置，网页授权域名。然而微信限制只能配置两个，如果一个公众号多个厂商进行开发，就会导致不够用的情况，虽然一般的公众号不会有这个情况，但是医院的公众号经常就有这种情况。例如掌上医院是一家厂商，预约又是一个厂商，智能导诊功能，又是一个厂商，所以需要配置多个授权地址的需求，

在做微信公众号做网页授权，提示 redirect_uri域名与后台配置不一致 ，然后去微信后台配置网页授权域名，发现微信限制最多配置2个。

解决方法

直接看我的Nginx配置，应该一看就懂。

server {  
    listen       80;
    server_name  wechat-oauth2.gsh456.cn 
  
    # 微信验证文件，因/根目录已经配置重定向了，这个文件就按需写全名  
    location /MP_xxxx.txt {  
        root /var/nginx/html/;
    }  
  
    # 重定向URI，一级目录是域名  
    location / {  
        return 302 http:/$request_uri;
    }  
}
server {  
    listen       443 ssl;
    server_name  wechat-oauth2.gsh456.cn 
    #证书配置
    ... 
  
    # 微信验证文件，因/根目录已经配置重定向了，这个文件就按需写全名  
    location /MP_xxxx.txt {  
        root /var/nginx/html/;
    }  
  
    # 重定向URI，一级目录是域名  
    location / {  
        return 302 https:/$request_uri;
    }  
}

不用额外服务，在你的nginx加上这个简单的配置就够了，能支持无数量限制的业务域名使用。

写个列子解释一下，比如要做微信网页授权的业务网站是： tool.gsh456.cn

第一步： 拼接授权链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=%s&redirect_uri=%s&response_type=code&scope=%s&state=%s#wechat_redirect

其它appid、scope、state自行填自己的实际值，重点是redirect_uri参数，链接一级目录使用业务域名，写成下面这个形式：

https://wechat-oauth2.gsh456.cn/tool.gsh456.cc/wxauth/callback

最后跳转微信授权的链接是：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=https%3A%2F%2Fwechat-oauth2.gsh456.cn%2Ftool.gsh456.cc%2Fwxauth%2Fcallback&response_type=code&scope=scope&state=state#wechat_redirect

第二步： 跳转微信接收回调

上面的链接跳转微信，微信回调拼接code的链接就是：

https://wechat-oauth2.gsh456.cn/tool.gsh456.cn/wxauth/callback?code=xxxxx&state=xxx

因这个域名已经在网页授权域名里配置过了，所以能正常跳转接收code。

第三步： Nginx重定向到业务服务

结合第二步的链接再看我贴的Nginx配置文件内容

location / {  
	return 302 https:/$request_uri;  
}

在Nginx里做302重定向（301也可以）跳转到业务链接。

注意这里的https:/不是写错了，故意这么写的。因$request_uri值是/tool.gsh456.cn/wxauth/callback?code=xxxxx&state=xxx,开头已经确定有一个/了。

所以这里Nginx做302的最终链接是：

https://tool.gsh456.cn/wxauth/callback?code=xxxxx&state=xxx

到这里，就完成了，整个链接都是你业务服务的。

业务域名tool.gsh456.cn没有加到微信网页授权域名中，也正常拿到code与state了。后续就是继续获取openid与AccessToken了。

前端 #问题

另外还有一个问题，就是 有时候vue写的前端地址上面有 #，导致微信跳转的时候丢失了，可以尝试下面的方案。大概就是 把# 换成 jinhao进行代替。

nginx配置文件

map $request_uri $modified_uri {
    # 将 $request_uri 中的第一个 /jinhao/ 替换为 /#/
    ~^(?<prefix>/.*?)jinhao(?<suffix>/.*)$ $prefix#$suffix;
    # 若无匹配，保持原 URI
    default $request_uri;
}
server {
    listen 80;
    server_name example.com;

    location / {
        # 重定向到 HTTPS，并使用修改后的 URI
        return 302 http://$host$modified_uri;
    }
}
server {
    listen 443 ssl;
    server_name example.com;

    location / {
        # 重定向到 HTTPS，并使用修改后的 URI
        return 302 http://$host$modified_uri;
    }
}

例如 原地址是

https://wechat-oauth2.gsh456.cn/https://tool.gsh456.cc/#/wxauth/callback

微信的跳转地址就是

https://wechat-oauth2.gsh456.cn/tool.gsh456.cc/jinhao/wxauth/callback