解决，微信网页开发，网页授权域名数量不足问题

小鱼儿 2022-08-29 09:45 950阅读 0赞

背景：相信很多开发微信公众号的小伙伴都碰到过这个问题，微信限制我们配置网页授权域名数量，但是大部分团队肯定不止一个业务需要微信网页登录的，我们这里可以利用nginx作为代理，实现只配置一个授权域名，完成团队各种业务的微信网页登录。

## 配置流程： ##

###         第一步：设置解析一个二级域名专门用于微信网页授权。 ###

###         第二步：解析到的服务器安装并配置nginx，详细配置如下： ###

#############微信授权接口#######################
    	server{
    		listen 80;
            #该域名就是微信公众号上配置的网页授权域名
    		server_name wx.aouth.master.com;
    		location / {
    			proxy_set_header Host $host;
    	  		proxy_set_header X-Real-IP $remote_addr; 
    	  		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #如果是测试环境，则重定向到内网穿透的域名
    	  		if ( $arg_evn = test) {
    	  			rewrite  ^/(.*)$ http://$arg_pix.test.frp.master.net/$1 permanent;
    	  			break;
    	  		}
                #如果是生产环境则重定向到生产环境的h5地址域名
    	  		if ( $arg_evn = prod){
    	  			rewrite  ^/(.*)$ https://$arg_pix.h5.master.com/$1 permanent;
    	  			break;
    	  		}
    		}
            #配置微信的域名验证文件
    		location =/MP_verify_3wrrmjc6T88dAWW5.txt {
    			root /usr/local/nginx/html/h5;
    		}
    		
    	}

其中：wx.aouth.master.com就是笔者的微信网页授权域名，在微信公众号上配置这个即可，由于笔者的团队本地都用FRP软件做了内网穿透，所以在nginx中再做一个环境识别，测试环境则跳转他们各自的内网穿透域名，生产环境跳转各自业务域名。

参数：evn，用于识别环境；

参数：pix，用于设置不同的域名前缀；

这俩个参数都是在生成链接时候在redirect\_uri的参数中指定的。

### 第三步：生成网页授权链接 ###

由于生成链接中的redirect\_uri需要做UrlCode，笔者贴一个编码之前和编码之后的，方便对比。

编码之前的地址：

String url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx123456789a&redirect_uri=http://wx.aouth.master.com/views/open/wx/oauth/?evn=test&pix=master&response_type=code&scope=snsapi_base&state=test#wechat_redirect";

编码之后地址：

String url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx123456789a&redirect_uri=http%3A%2F%2Fwx.aouth.master.com%2Fviews%2Fopen%2Fwx%2Foauth%2F%3Fevn%3Dtest%26pix%3Dmaster&response_type=code&scope=snsapi_base&state=test#wechat_redirect"

###  第四步：配置完成 ###

配置完成，笔者这里是后端生成这个链接给前端用，这里贴上后端生成连接的代码：

/**
         * 获取公众号网页授权链接
         * @param id 自动注入客户ID
         * @param backPath 跳回小程序的页面PATH
         * @return
         */
        @ApiOperation(value = "获取公众号网页授权链接",notes = "返回一个链接地址，请使用web-view组件在微信内打开<br>待处理完成后跳转到小程序指定的页面")
        @GetMapping(value = "/courier/gzh/oauth/url")
        public APIEntity<WeChatJsConfig> getGzhOauthUrl(
                @RequestAttribute("JwtUserId") Integer id,
                @ApiParam(value = "跳回小程序的页面路径", required = true,example = "/pages/index/index") @RequestParam String backPath) {
            String url="https://open.weixin.qq.com/connect/oauth2/authorize?appid={}&redirect_uri={}&response_type=code&scope=snsapi_base&state=test#wechat_redirect";
            String redirectUri;
            try {
                redirectUri= URLEncoder.encode(StrUtil.format("http://wx.aouth.master.com/views/open/wx/oauth/?backPath={}&id={}&evn=prod&pix=share",backPath,id),"UTF-8");
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
                return APIEntity.fail("地址解码失败");
            }
            return APIEntity.success(StrUtil.format(url,WxApp.GZH_TCJS.getAppId(),redirectUri));
        }

笔者这里的业务是小程序打开网页完成授权登录后再跳回小程序，所以redirect\_uri还加了一些其他业务上的参数，小伙伴们可以根据自己的情况增减。