Solve the problem of insufficient number of authorized domain names in wechat web page development

Posted by myleow on Mon, 03 Jan 2022 01:10:30 +0100

Background: many buddy developers who have developed official account of WeChat have encountered this problem. WeChat has restricted the number of authorized domain names. But most of the teams definitely need more than one business to login with WeChat web pages. We can use nginx as agent to configure only one authorized domain name to complete WeChat web page login of various business teams.

Configuration process:

Step 1: set and resolve a secondary domain name for wechat web page authorization.

Step 2: install and configure nginx on the resolved server. The detailed configuration is as follows:

#############Wechat authorization interface#######################
	server{
		listen 80;
        #The domain name is the domain name authorized on WeChat official account.
		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 it is a test environment, redirect to the domain name of Intranet penetration
	  		if ( $arg_evn = test) {
	  			rewrite  ^/(.*)$ http://$arg_pix.test.frp.master.net/$1 permanent;
	  			break;
	  		}
            #If it is a production environment, redirect to the h5 address domain name of the production environment
	  		if ( $arg_evn = prod){
	  			rewrite  ^/(.*)$ https://$arg_pix.h5.master.com/$1 permanent;
	  			break;
	  		}
		}
        #Configure the domain name verification file of wechat
		location =/MP_verify_3wrrmjc6T88dAWW5.txt {
			root /usr/local/nginx/html/h5;
		}
		
	}

Including: Wx aouth. master. COM is the authorised domain name of WeChat's web page, which can be configured on WeChat official account. Because the author's team has made FRP network internal penetration through nginx software, the environment is identified in the environment. The test environment jumps their respective internal networks to penetrate the domain name, and the production environment jumps over their respective business domains.

Parameter: evn, used to identify the environment;

Parameter: pix, used to set different domain name prefixes;

These two parameters are in redirect when generating links_ URI.

Step 3: generate web authorization links

Due to generate redirect in link_ Uri needs to do UrlCode. The author posts a URL before and after coding for comparison.

Address before encoding:

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";

Address after encoding:

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"

Step 4: configuration completed

After the configuration is completed, the back-end generates this link for the front-end, and the back-end generates the connection code here:

/**
     * Access to official account web page authorization link
     * @param id Auto inject customer ID
     * @param backPath Jump back to the applet's page PATH
     * @return
     */
    @ApiOperation(value = "Access to official account web page authorization link",notes = "Return a link address, please use web-view Open component in wechat<br>After processing, jump to the page specified by the applet")
    @GetMapping(value = "/courier/gzh/oauth/url")
    public APIEntity<WeChatJsConfig> getGzhOauthUrl(
            @RequestAttribute("JwtUserId") Integer id,
            @ApiParam(value = "Jump back to the page path of the applet", 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("Address decoding failed");
        }
        return APIEntity.success(StrUtil.format(url,WxApp.GZH_TCJS.getAppId(),redirectUri));
    }

The author's business here is to open the small program, complete the authorized login, and then jump back to the small program, so redirect_uri also adds some other business parameters, which can be increased or decreased by small partners according to their own situation.

Programmer Think