Original is not easy, I hope you can pay attention to us, and then easily point a praise ~~

This article was first published on the blog of the front end team of The Political Cloud: illustrated and illustrated, it unveils the mystery of “single sign-on”

concept

Single sign-on (SSO) is one of the most popular solutions for enterprise business integration. It is used between multiple application systems. Users only need to log in once to access all trusted application systems.

Front is introduced

  1. The same origin policy restricts how documents or scripts loaded from the same source can interact with resources from another source, requiring the same protocol, port, and host.
  2. HTTP is an application-layer protocol for distributed, collaborative, and hypermedia information systems. HTTP is a stateless protocol, so the server has no way of knowing the identity of the client from the network connection alone. So how do you identify the client? Each client is given a pass and is required to carry it on each visit so that the server can identify the client by the pass. The most common solution is cookies.
  3. Cookies are a mechanism by which the client saves user information on the client’s hard disk. The server can respond to the messageSet-CookieThe header field information or the clientdocument.cookieIs set and sent to the server with each request. The child domain name can obtain the parent domain name Cookie.
  4. Session is an abstract concept used to track sessions and identify multiple HTTP requests from the same client. Cookie is only a kind of implementation scheme with good universality. Usually, a Cookie named SessionID (the name can be customized for easy description, and this name is used in this paper) is set. Each request carries the Cookie, and the background service can rely on this SessionID value to identify the client.

Single System Login

Before introducing single sign-on, let’s take a look at some of the main processes that occur when accessing an application that requires login in the browser, as shown in the following figure:

The following is a comic form, which is expected to make readers better understand:

Depends on the Cookie set after login, which is carried with each subsequent access so that the background service can identify the current login user.

digression

How does the backend know which user is using the SessionID?

  1. Database storage association: Associate SessionID with data information and store it in Redis, mysql and other databases.
  2. Data encryption and direct storage: for example, in JWT mode, user data is decrypted directly from SessionID value (in this mode, Cookie names are mostly Token names).

Multiple system login problems

With the domain name

When accessing the page under the same domain name, the Cookie will be carried normally as in the single system login, and the background service can directly obtain the corresponding SessionID value. It makes no difference whether the background service is single service or multiple service.

Different subdomains

Cookies are not shared between subdomains, but each subdomain can obtain the cookies of the parent domain name, that is, app.demo.com and news.demo.com can obtain the cookies of the demo.com domain name. Therefore, cookies can be set on the parent domain name to achieve the effect of sub-domain name sharing. That is, when users log in under the domain name app.demo.com, cookies named SessionID can be set under the domain name Demo.com. When the user accesses news.demo.com, the background service can also obtain the SessionID to identify the user.

Completely different domain name

By default, cookies cannot be shared directly between different domains.

The front end is cross-domain with cookies

If you only want to obtain the login status of the current user during an asynchronous request, you can send a cross-domain request to the previously logged domain name and configure the following attributes:

xhrFields: {
  withCredentials: true
}
Copy the code

This allows the Cookie of the target domain name to be carried with the request and the service of the target domain name to recognize the current user.

However, the interface of the target domain name must support CORS access. For security purposes, browsers do not support the use of wildcard * when CORS enables withCredentials. You need to specify the list of domain names that can be accessed across domains.

An aside:

If only to avoid browser restrictions, to achieve the same effect as wildcard *, to reach the purpose that all domain names can be accessed, according to the visit of the Referrer parsing request source domain name, as the accessible list. However, this domain name is not recommended for security reasons. You are advised to specify an accessible domain name.

CAS

Central Authentication Service (CAS) is an open source project initiated by Yale University. It aims to provide a reliable single sign-on (SSO) method for Web application systems.

Since cross-domain retrieval is not possible, how can CAS be shared? It realizes login by jumping to intermediate domain names.

The page access process is as follows:

The following is a comic form, which is expected to make readers better understand:

The following two points need to be noted:

  1. All login processes depend on the CAS service, including user login page, ST generation, and authentication.
  2. In order to ensure the security of ST, ST is generally generated randomly without regularity. According to the CAS protocol, the ST can be used only once. Regardless of whether the ST authentication succeeds, the CAS service clears the ST from the server cache to avoid the risk of the same ST being used twice or being stolen.

Further reading

Other related content can also be briefly understood, such as single sign-on logout SLO, OAuth2.

Reference documentation

The same origin policy of the browser

The CAS protocol

, recruiting

ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 50 front-end partners, with an average age of 27, and nearly 30% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and netease, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.

If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]

Recommended reading

1024 great offering!! A review of the best of the past year

Probably the most complete collection of text overflow truncation ellipsis schemes

Move the universe! React can also “use” computed properties