introduction
Recently, I made a WeChat webapp single-page application project. The project only needs to obtain the user's information openid; for a better user experience, the whole process makes the user unperceived. -WeChat webpage authorization section.
According to the steps of the WeChat development document, it is easy to realize the function of obtaining openid. At this point, you may be delighted, so easy! If you think that the implementation is over, then it is likely that qa will come up and show you the source of the problem on the spot (as shown below):
On the callback page redirected after authorization (such as the order page in the above example), click to return, no matter how you click, you can't return to the correct page, and it has been jumping in an endless loop here. How to solve it? A practical solution is given below.
The reason for jumping to an infinite loop
The reason for the jump to the infinite loop can be known after a little analysis. Pages in the project that require openid will silently obtain openid (it is generally recommended to obtain it in the project entry file, and then cache it for use by other pages);
For example, the openid is required on the order page above. At this time, when entering the page, it will be redirected to the WeChat authorization page:
https://open.weixin.qq.com/connect/oauth2/authorizeappid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirectAfter the authorization is successful, it will redirect to the callback link address (the order page in the above example), and will bring the code parameter. When we implement it, we location.replacereplace the order page history with the WeChat authorization page.
In total, an authorization browser history adds 1 record at a time. So what does the browser history look like after the authorization is successful?
In theory, the above process browser history should be the result shown in the following figure:
But after testing in WeChat, it is found that this is not the case, but as shown in the figure below, it is suspected that the WeChat browser has done special processing.
In this way, click the WeChat return button on the redirection page after the authorization is successful, that is, click return from the order page in the above example, and return to the order page without the code parameter, which is the order page when you first entered; however, the page If no special treatment is done, it will jump to the WeChat authorization page and then redirect to the specified callback page, i.e. the order page, after authorization again, which will cause the problem of jumping to an infinite loop, and the appearance will always stay on the order page. , cannot enter other pages specified by the project.
solution
Through the analysis of the whole process, we can know that if we do not do any processing, but only obtain the parameters carried in the url after the authorization is placed on the order page , codethere will be such an infinite loop problem. redirect_uriFor example, the order page) do something about it, and if a certain condition is met, it will not jump to the WeChat authorization page?
The answer is of course yes, an implementation scheme can be like this:
Specify a callback link redirect url for successful authorization. The domain name must be the same as the front-end business domain name, and the entire link needs to be configured in the WeChat developer background.
After entering the page specified in step 1, the front end needs to obtain the url parameter code and the code value in sessionStorage, and judge whether the WeChat authorization page needs to be redirected according to whether both codes have values.
In step 2, when the code value in both cases is empty, the front-end uses the location.replace(url) method to jump to the WeChat authorization page. After the authorization is successful, it jumps to the callback page specified in step 1. At this time, only 1 new browser history record has been added, that is, the WeChat authorized page history record.
In the callback page set in step 2, if the code parameter of the url has a value and the code value obtained by sessionStorage is null, the code parameter value of the url is stored in sessionStorage, and then history.back()
After the history.back() is executed, it will return to the page before the authorization link jump, that is, enter the order page before the jump.
Click the WeChat return button again to return to normal
The specific code implementation part is as follows:
const params = getQueryParams()
const code = sessionStorage.getItem('code')
if (!params.code && !code) {
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${yourAppId}&redirect_uri=${encodeURIComponent(location.href)}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
window.location.replace(url)
} else if(!code){
sessionStorage.setItem('code', params.code)
history.back()
}