preface

Recently, I changed my job, and of course I have to show myself in a new company. Besides, I have a lot of things on hand, so I don’t have much time to write anything. However, I met a problem worth writing about the H5 project in wechat recently, so I took a break to record it.

start

The newly developed page needs to be authorized by wechat, and the steps are as follows:

  1. Get the user’s appId(of course, this is all done by the back end, which only asks for one interface)

  2. Front after get the appId, via the appId get WeChat authorisation code, https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId} & redirect_uri = ${enco deURIComponent(window.localtion.href)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

  3. In the redirected address, wechat will bring the code, and the front end will take this code to exchange the user’s information.

The problem

  1. Authorization information only needs to be picked up once. This kind of information generally does not change often, so you do not need to take it every time, but you cannot save it for a long time, or the information will be inaccurate.

  2. How can we judge that the authorization has been granted? We can only judge by the code in the URL. In this way, there will be a problem.

  3. If a user opens the page, the address directly to copy out another person can access, this time will be the problem with the above situation, some people really did), and this situation is a bit similar as above, but why do I have to separate out, because this article is quite different from the above in solving

The solution

  1. It is appropriate to cache authorization information with time stamps for one week.

  2. When authorization is required, it is necessary to have a code, so we judge in the code that if there is a code in the URL, we will not go through the authorization process of wechat.

  3. If light judge don’t walk without a code authorization process will have a problem, is someone to open the page, copy address directly to the second person to use, as he came in, the address bar code, if this time again so, have a problem, the code has been used, so is to judge whether this code is valid, I The solution is:

    1. Use localStroge to save the code as normal flow passes.

    2. Before going through the process, take this code from localStroge, if not, I will think it is the first time he came in, his code is invalid, save this code, go through the authorization again, get the new code, and after going through the process, write the new code into localStroge again for the next use .

    3. At this time, there is another problem, if he refreshes the current page, at this time, the code in this page, the code in the URL also has, so at this time, I need to add another judgment, if the local code is the same as the code in the URL, I think you are refreshing, I re-authorize, discard the previous code.

The end of the

The above is my summary of the project to deal with the authorization of some experience and plan, I hope to help you, have a better idea can also comment a wave.