Recently, I have been doing the H5 login of the third-party application of enterprise Micro. Now I will sort out the whole process

  1. Constructing an authorization link

  • First of all, as a service provider, we need to construct the authorization links of third-party applications
  • Appid: indicates the ID of the third-party application

  1. Get the code authorization to log in

  • After authorization, we get the code and log in to our system. At this time, the interface will tell us which enterprise authorized application according to the code

  1. Initialize the JS SDK

  • Get the parsed enterprise ID and our own application ID to initialize the JS SDK

Questions Note:

Note: here because we have changed the domain name in the development, the initialization of js SDK, has been submitted to the 80001 error, solution: third-party applications modify the application configuration, modify trusted domain name here Did not need to delete the reinstall third-party applications online, has launched the need to submit audit on-line modified configuration will only take effect

The process is as follows:

The code is as follows:

// Implement a parameter method to intercept URL search const getUrlSearchParams = key => {const searUrlStr = window.location.search const paramStr = searUrlStr.split('? ')[1] const searchParams = new URLSearchParams(paramStr) const val = searchparams.get (key) return val} GetUrlSearchParams Mounted (){const code = getUrlSearchParams('code') if(code){// Run the login logic...... // Initialize js-sdk......... }else{ window.location.replace(AuthUrl) } }Copy the code

Episode one: Go Online

After more than a week of development, the project was successfully launched. Emm felt there was no problem with the login process I wrote, and secretly felt pleased.

Episode two: Why are our logins so slow

The leader compared the application of other companies and found that our application was too poor and the login was very slow. It took half a day to reach the home page. Emm, since the leadership is here to find us personally, let’s sacrifice the next stroke to optimize

  • Caches login state: Caches login information in localStorage
  • Login failure reauthorization
  • Split interface: since we are involved in poster sharing, we need to use the avatar, but the avatar of wechat will have cross-domain problems, so we return Base64 in the login interface, so the response time will be a little long, so we use a separate interface to fetch the avatar
  • Skeleton screen design: let the user can first see some static Ui, dynamic Ui to do a skeleton placeholder, say goodbye to a turn

Emm, look to have no what problem, that line, after the leadership sees the effect, put up a thumb 👍🏻

The third episode: enterprise micro enterprise switch, let me hair volume — (reduce)

Login optimization just went online soon, the project leader ran over, cool, how to switch the enterprise login information or before the enterprise

Yi, I asked him at that time, why do not switch enterprises to log in again? This may be the first reaction when people are attacked, the question was put out to 😄. Later I thought about it, it turned out that I had cached my login information and credentials. Clear cache login and slow, do not clear, switch enterprises and affected, too difficult. Fortunately, there is no way out, thought of a solution is: if the JSSDK initialization error, re-authorization, because the initialization of the credentials information is associated with the enterprise, oh roar, some truth. JSSDK initialization in the place added, error capture authorization, if there is a cache, and the error is the corresponding status code, re-authorization! Ok, soon I finished writing, online, the person in charge shouted: fast male… .

Episode 4: Test sister crazy

Early in the morning, the test sister came to me: why did I quit my enterprise wechat account and change it to someone else’s? Why did H5 display my information? I: can’t solve, how do I know you switched account number! Then test little sister is I hate the injustice, after thinking it is true, should not, should be vigorously hate ~

  • Clearing cache time: Log in again
  • Why is it not cleared when you log in again? The original little sister is using the PC workbench to enter, Wo Day ah, this micro bug ah, PC did not remove

Slipper solution: if it is a PC, the workbench entered, then clear the cache, re-walk the authorization logic!