I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

Many corporate computers are bound to employees. One way to do this is to install security certificates with employee information on the system and in the browser. In this way, the employee’s office computer also represents the employee. This section introduces an SSO implementation scheme combined with the browser certificate.

The flow chart

First look at the flow chart;

The process is introduced

To access the page

The user must first access the front-end page, front-end add route access before interception for permission verification;

Refer to the following configuration:

// router.config.js // Router.config. js // { path: '/', Routes: ['src/pages/Authorized'], routes: [ { path: '/XXX', name: 'XXX', icon: 'XXX', authority: 'XXX', component: './XXX', }, ] }Copy the code

Access permissions

Authority judgment is performed in the front end Authorized;

At componentDidMount(), try calling the interface to get user information and menu permission information, such as Promise.all([getCurrentUser(), getMenuList()]);

The user information and authorization menu information are separate interfaces, so Promise. All is used, which can also be implemented in the same interface.

  • User logged in

If the user has logged in, the front-end will already have the user Token. The network request to obtain user information and menu permission information will carry the Token information.

    • After the Token valid interface is verified, the user information and menu permission information can be returned normally, and the front end can access the target page.
    • Token invalid The Token invalid interface fails to pass the verification, and SSO is performed in the front-end.
  • User not logged in

If the user does not log in and the network request for obtaining user information and menu permission information does not carry the Token information, the interface verification fails and authentication fails. No Token is displayed and SSO is performed in the front end.

Judge authority

In the network request method of the front end (general unified encapsulation processing), after determining that the authentication failure requires SSO convention Code, SSO attempts to be performed.

// request.js // The interface returns the authentication failure Code and enters SSO; if (response.data.code === 499) { RedirectSSO(); }Copy the code

SSO login

The front end tries to access the SSO system address and carries relevant parameters as required for SSO login.

You need to register in the SSO system in advance to obtain relevant parameters.

Generally, the parameters required by the SSO system, the URL for the backend of the target system to undertake SSO results, and the URL for the front-end to undertake SSO results (other parameters to be carried here are agreed with the backend of the target system) must be carried.

Such as: the window. The location. Href = https://SSO_URL? Parameters required by the SSO system &REDIRECT_URL= ADDRESS that the SSO system redirects to the target system after verification + front-end SSO connection address

SSO System Verification

The front-end network request for accessing the SSO system address carries the personal security certificate information installed on the browser for SSO system verification.

  • If the verification succeeds, the IP address REDIRECT_URL of the target system is redirected with the verification success message.
  • If the verification fails, the IP address REDIRECT_URL of the target system is redirected with a verification failure message.

Target system check

After receiving the verification result of SSO system, the target system uses the result information to query the verification result of SSO system and exchange employee information for judgment.

  • If successful, the Token of the SSO system is generated based on the employee information provided by the SSO system, and then redirected to the front-end SSO address with valid Token and employee information.
  • If it fails, it also redirects to the front-end SSO address, but does not carry the Token.

Front-end SSO result processing

Front-end SSO acceptance address obtains Token and user information returned by the back-end for judgment.

  • If the Token cannot be obtained, switch to the login page.
  • If the Token is correctly obtained, the interface is re-invoked to obtain user information and menu permission information.

To optimize the

  • Multi-environment Configuration

Since the system has production environment, test environment, and development environment, SSO registration information corresponding to different environments is different, requiring sub-system maintenance and use.

In RedirectSSO(), you can differentiate between different environments according to process.env and use different environment configurations.

  • Redirection lost the destination URL

Due to multiple redirects during SSO, URL parameters may be lost. Therefore, you can store some parameters in the front-end cache (such as localStorage) and use them after SSO results are available.