vue WeChat official account authorization page gets openid, cross domain

WeChat official account development needs to get users' openid, according to WeChat official account. Official documents Note: the following preparations need to be done

1. Developers need to modify the authorized callback domain name in the configuration option of "development - Interface permission - Web Service - web account - Web authorization to obtain basic user information" on the official website of the public platform. Please note that this is the domain name. Note: cannot be an ip address

If the domain name authorization is not configured, wechat will return a redirect uuri error when authorizing the callback.

2. The configuration domain name requires that wechat provides accessible files in the web server, so a web server is also needed, as shown in the following figure


Step 1: jump to the authorization page and get the code

 let urlNow=encodeURIComponent(window.location.href);
// Let scope ='snsapi ﹣ userinfo '; / / snsapi ﹣ userinfo non silent authorized user has snsapi ﹣ base silent authorized user has no perception  

let url= ''+'/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+urlNow+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
window.location.href = url

The page that will be redirected after the authorization is successful will have code parameters. Get the code through the following code. The code will be updated every 5 minutes. Please do not save.

getUrlKey:function(name){//Get url parameters
    return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;

Step 2. Exchange code for openid

      this.openid =;

Step 3. Solve the first two problems

3.1 since there is no domain name in the local test, natapp can be used to map the temporary domain name to the local. Reference resources

3.2 after configuration, you need to configure the web server. Here I use tomcat, Download Tomcat and install it.

Open the Tomcat directory and enter the webapps directory, create a new folder: myapp, create a WEB-INF folder in the directory, and create a new web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns=""



The text files downloaded from WeChat official account are placed in the myapp folder and configured in the WeChat developer tools domain name. Click save

Step 4. vue packaging

Configure in vue.config.js before packaging (Vue cli is used here).

  publicPath: process.env.NODE_ENV === 'production'
    ? '/myapp/'
    : '/',

Execute npm run build

Put the packed ones into the myapp folder of tomcat

The directory structure is as above.

Start Tomcat, the start command of mac: sudo sh. /


5. cross domain

Due to wechat restrictions, wechat authorization page must be opened in wechat development tools. Because the api of local service and wechat interface has cross domain problems, the following commands can be called to open wechat development tools during local debugging:

open -a /Applications/ --args --disable-web-security --user-data-dir --allow-running-insecure-content

Or use Nginx to solve cross domain problems.

Input in wechat development tool:

47 original articles published, 7 praised, 20000 visitors+
Private letter follow

Tags: Tomcat xml Web Server JavaEE

Posted on Mon, 16 Mar 2020 20:46:29 -0700 by just me and php