Recently, I am working on the H5 application in the wechat of the enterprise, and there is a demand for wechat authorized login. Wechat authorized login is not complicated. The whole process is as described in the document: construct webpage authorization link on the entrance page, jump to this link, wechat will redirect to the entrance page and spell the code on the URL. The front end will send the code to the back end, and the back end will call the server API provided by wechat to complete the login.

// Construct the following link to get the code argument
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect\_uri=REDIRECT\_URI&response\_type=code&scope=snsapi\ _base&state=STATE#wechat\_redirect
Copy the code

Here is a code for those who have never done it:

onload(params) { 
	// Get the code at the URL
	let code = params.code 
	if (code) { 
		// Code exists, and the calling interface passes code to the back end
	} else { 
		// Code does not exist, go to wechat page authorization logic
		
		// The url of the current page for wechat redirection
		let loc_href = window.location.href; 
		
		// Perform urlEncode processing for the current page URL as required by wechat
		loc_href = encodeURIComponent(loc_href);
		
		// Construct the link to get code
		let appId = ' ';
		
		// CorpID of enterprise wechat application or appID of wechat official account
		let wxUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
		
		// Jump link to get codelocation.href = wxUrl; }}Copy the code

After the code is written, we debug it in the wechat developer tool, and find that the page jumps back and forth between the wechat authorized link and the current page link, indicating that our code has been executing the else logic in onload, indicating that we did not get the code. Because I have done wechat web page authorization login before, I am sure that there is no problem with my code logic. The only difference is that the previous project was a multi-page application, using its own open source framework, FAST-H5Plus.

I have copied the link after wechat redirection, as follows:

http://www.xxxx.com/index.html?code=xxxxxx/#/pages/weAuth/weAuth
Copy the code

After Posting the link, WE found that there was no bug in wechat. It returned the code to us, but the spelling position was a little different

// We need it
http://www.xxx.com/index.html#/pages/weAuth/weAuth?code=xxxxx

// It is actually provided by wechat
http://www.xxx.com/index.html?code=xxxx/#/pages/weAuth/weAuth
Copy the code

The code concatenation cannot be resolved before the # sign of the route, so it cannot be retrieved by the onload callback argument.

At that time, I searched the wechat community, and there were two solutions provided by the community:

  • Use hsitory mode instead of hash routing mode
  • Use other methods to get the code value on the URL

Since the company did not intend to use history mode, it had to use the second solution, as shown below

onload(){
	// Get the code at the URL
	let code = this.getQueryVariable('code')
	if (code) {
		// Code exists, and the calling interface passes code to the back end
	} else { 
		// Code does not exist, go to wechat page authorization logic
		
		// The url of the current page for wechat redirection
		let loc_href = window.location.href; 
		
		// Perform urlEncode processing for the current page URL as required by wechat
		loc_href = encodeURIComponent(loc_href);
		
		// Construct the link to get code
		let appId = ' ';
		
		// CorpID of enterprise wechat application or appID of wechat official account
		let wxUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
		
		// Jump link to get codelocation.href = wxUrl; }}},// Get url parameters
getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }}return (false);
}
Copy the code

The problem was solved successfully by manually parsing the URL to obtain the code, and the code was returned to the back end. The login was successful and the home page was redirected.

This article should end here, but in the subsequent development, when the page needs to use wechat JSAPI, something happened.

When a page needs to use wechat JSAPI, the process is that the front end returns the current URL to the back end, and the back end returns TIMESTAMP, nonceStr, Signaure. The front end invokes the wx.config method to configure interface injection permission authentication

wx.config({
    beta: true.// This must be done otherwise the JsAPI in the form of wx.invoke calls will have problems
    debug: true.// If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
    appId: ' '.// Mandatory, corpID of enterprise wechat
    timestamp:,// Mandatory to generate the timestamp of the signature
    nonceStr: ' '.// Mandatory to generate a random string of signatures
    signature: ' '.// Mandatory, signature, see appendix - js-SDK Using permission signature algorithm
    jsApiList: [] // Mandatory, a list of JS interfaces that need to be used. Any interface to be called needs to be passed in
});

Copy the code

During developer tool debugging, the console keeps telling you that authorization failed and the signature is invalid. The description of signature generation in the document is as follows:

The rules for generating signatures are as follows: There are four parameters for signing signatures:

  • Noncestr (random string),
  • Jsapi_ticket (for details, see obtaining the Enterprise JSAPi_ticket and Obtaining the Application JSAPi_ticket interface),
  • Timestamp (timestamp),
  • Url (the URL of the current page, excluding # and the rest)

The front end just passed the URL to the back end to generate the signature, the back end students also repeatedly checked the code that there is no problem. The only thing that could be wrong is the URL that was passed.

Wechat document description URL parameter is the url of the current page, excluding # and the following part.

A normal URLhttp://www.xxx.com/index.html#pages/index/index?id=xxxxRemove the URL after the # signhttp://www.xxx.com/index.htmlBut because we are in hash mode, after wechat authorization, the URL becomes like this:http://www.xxx.com/index.html?code=xxxx#/pages/index/index?id=xxxRemove the address after the #http://www.xxx.com/index.html?code=xxxx
Copy the code

That’s where the problem most likely lies. Get rid of the url, right? And all the following characters, passed to the back end, back end to generate a signature and then execute wx.config, authorization success, problem solved!