Recently, when I was developing the management system, I encountered some minor problems in the development process because of the addition of single sign-on. After solving this problem, I also recorded the process. I felt this process was very interesting, so I decided to share it with everyone.

First, a brief introduction to single sign-on.

Single sign-on (sso)

Single sign-on (SSO), or Single Sign On for short, is one of the more popular solutions for enterprise business integration. It is defined as multiple applications in which users only need to log in once to access all trusted applications.

To sum up, my understanding of single sign-on is that there are many management systems out there. Each system has its own account system, management system and management system between the relatively independent, if an operator to operate multiple systems at the same time, can not avoid each system to their own login again. Now with single sign-on, it is equivalent to setting up a large management platform, putting all these management systems in this platform, and using one account of this platform as the account id of all management systems. Most single sign-on practices are to store the account ID in the browser cookie. This is convenient for operators not to have to log in every system, but also convenient for programmers to develop similar management system again, do not have to log in, account management and other functions.

At present, our company is doing the same, but we have encountered a big problem when maintaining the management system for many times: login

Found the problem

As described above, when developing the new management system, we do not need to do the login function any more, so from here on our login state needs single sign-on to simulate login. Here are two ways.

1. Create a temporary login page during local development, call single sign-on interface, save the returned login id in browser cookie, and then jump to the home page of the management system specified by us to complete the login operation. That is to say, this is still written in the local login, with the previous difference is that do not care about the login page style, still maintain the login page. FAIL

2. Login Operation: Use the test line or production line to log in, and copy the login identification cookie to the local to complete the simulated login. That sounds like a lot less code than the first method, but I actually added a lot of manual work. If I open the local home page address first, such as http://localhost:8080, and jump to the home page, the home page will request the interface and immediately jump to the login page when I find that your login id cookie is incorrect or not. But I don’t have a login page locally. So I need to delete or debugger the logic to jump to the login page locally. Then paste the copied login id cookie into the cookies under the domain name, and refresh or continue. If the login state fails during development, I need to repeat the operation again, which is terrible to think about. FAIL

To analyze problems

The problem is clear. Let’s break it down before we try to figure out what to do.

  1. I don’t want to write the login page again locally

  2. You don’t want to copy cookies manually

  3. Don’t want to add simulated logon code logic for native development

  4. Resolve cross-domain cookie delivery issues

Next, I’ll share how to solve these problems with chrome.

To solve the problem

Let’s start with a GIF demo

Describe how I logged into the SSO system on the server and clicked to jump to one of the management systems as normal. The login account information is determined by cookies. Then I started a service of the management system locally and jumped to my local service address http://localhost:7878. Because I did not log in locally under the domain name address, there was no account cookie naturally, so there would be a prompt message indicating that I could not get the login information and please log in. The second time I did this, I used the Chrome plugin, which copied the current address cookies to the address in the input box, and then made it look like I wanted to log in to my account for local development.

The biggest benefit of this solution for developers is that there is no need to write extra code within the management system

Let’s move on to the Chrome plugin.

Chrome plug-ins

I’m not going to go into how to write chrome plugins here, there are many tutorials on how to write Chrome plugins online, and it’s not hard.

Tell me about my thinking and the Chrome API I used

  1. Gets the current browser address chrome.tabs. GetSelected

  2. Get cookies chrome. Cookies. GetAll based on the current address

  3. Insert cookies into the specified address chrome.cookie.set

  4. Create a new window chrome.tabs. Create

The plug-in source address is at the end of the article. For local testing, you can open the Chrome browser, type Chrome :// Extensions to open the extension, click load the unzipped extension, or click Pack the extension and drag the.crx file into the extension.

conclusion

I tried a number of scenarios before finally deciding to use the Chrome plugin. For example, iframe and postMessage are not of reference value and do not meet our final requirements due to their complex codes and logic. If you have a better solution or a problem you solved using Chrome, please share with us in the comments. Welcome to scan code to follow the wechat public account “incredible front end”, every month will be technical dry goods, best practices and interesting front end skills to share with you.

Plug-in source