Uni-app has recently been used to develop the company’s official account project, and the licensing section has been stomped a lot. Here is a record of the whole process of local development licensing.

Generally, during login authentication, the front-end needs to pass a code to the back-end, which requires authorization. In local development, authorization is a troublesome preparation step.

1. Test number for development

1.1. Log in to the company’s official account to check the interface permissions

Make sure you have the permission here, then click Modify and fill in the company project domain name (this field is usually filled in the back end). The personal service number does not have this permission, and requires enterprise authentication

1.2. Add the wechat account used for development as the developer

1.3, apply for a test number, directly use the wechat scan code you used to develop

The test number management page is displayed. Because there is no server deployed for local development, the back-end needs to map the Intranet IP address to the Internet. Therefore, the url and token configured on the interface can be requested from the backend.

JS interface security domain name IP address to fill in your local IP address to add the port number, not HTTP.

The development of the wechat account sweep this code, sweep out the test number can be concerned about.I don’t care about anything else I didn’t mention.

1.4. Modify the address of web page authorization

Enter the local IP address and port number as usual, without HTTP.

2. Authorization code

I write in the route hook, each jump page will check authorization, unauthorized authorization first; After authorization, the user’s code is used for login verification. If the user is not registered, the registration page will jump to the information page after registration.

2.1. Check authorization

// A method to extract the user's code from the path
const getUrlParam=(name) = > { // Encapsulate method
	var reg = new RegExp("(^ | &)" + name + "= (/ ^ & *) (& | $)"); // Construct a regular expression object with the target parameters
	var r = window.location.search.substr(1).match(reg); // Match the target parameters
	if(r ! =null) return unescape(r[2]);
	return null; // Returns the parameter value

}
let code = getUrlParam('code')
Copy the code

If the code is not empty, the user is authorized. The login authentication operation is performed next. Generally, the login authentication interface of the backend is used to pass the obtained code. If code is empty, the user is not authorized, and authorization is performed.

2.2, authorization,

/ / authorization
let appid = 'xxx'  // The appID you used to register as the test number in the previous step (note: this must be the same as the appID of the wechat developer account you logged in to, i.e. the test number is used to develop)
let local = 'http://192.168.1.33:8080' // To add HTTP, add port number
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
			'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
// Login authentication
if(code){... }Copy the code

A page will pop up asking for your authorization, because I have authorized, this step will not be screenshots, authorization can continue login verification.

3. Common mistakes

3.1 The redirect_URI parameter is incorrect

The configured domain name of the authorization callback page is different from the parameter with the request. 2.2 step ⅲ. There are ports for local development. The configured callback domain name does not have a port back to Step 1 The whole process ⅳ. The account used to log in to wechat developer tool is different from the appID that requested authorization Back to Step 2.2Copy the code