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!