[OIDC in Action] 2. OIDC (OpenID Connect)-based SSO (Pure JS client)

In the previous OIDC-based SSO, 4 Web sites were involved:

1. Oidc-server.dev: Unified authentication and Authorization center, SSO site with OIDC implementation.
2. A client of OIDC-CLIENT-HYBRID.DEV:OIDC, using hybrid mode.
3. Another client of oidc-client-implicit.dev:odic, using implicit mode.
4. OIDC-CLIENT-JS.DEV:OIDC another client, using implicit mode, pure static website, only JS and HTML, no server code.

Where hybrid and implicit these two sites have the ability to execute code on the server (1, login needs to do jump on the server, 2, the login state to write cookie;3, through the interface of the server to receive the passive exit notification). And JS This client is a pure static site, then it is how to handle the login and exit?

Oidc-client-js.dev the corresponding code for this web site is located in the Web.oidc.client.js folder (https://github.com/linianhui/oidc.example/tree/master /src/web.oidc.client.js):

JS Client Login

We know that in the browser JS can be directly to the page to jump, OIDC JS client is to use this to directly construct the URL of the authentication request, Then login to jump (we use oidc-client.js this open-source JS Library to handle the OIDC specification related to the operation). is the page after opening oidc-client-js.dev:

JS Client launches authentication request directly

We clicked Login.

You can see that the client side has initiated a URL to the authentication request after 2 requests have been made to the Oidc-server.dev site and submitted the request to the browser.

1. /ACCOUNT/JS: I've expanded it myself, and I've introduced its use later, and I'm ignoring it for the time being.
2. /.well-known/openid-configuration: This is the discovery service provided by OIDC, the client needs to obtain the interface address of the authentication request and other information from the JSON returned by the service.

Certification Request There is no difference between the parameters contained in the bread and the information in the previous article, which is not covered here.

Oidc-server pass data to JS Client via URL #

The browser redirects to the login page, we log in, and after successful login, we will jump to the URL specified in the Redriect_uri parameter above and use the # portion of the URL to carry the Certified information:

Http://oidc-client-js.dev/oidc/login-callback.html#Id_token=eyjhbgcioijsuzi1niisimtpzci6imi2mme2ytvlzjningjmotlhnwu3m2fkzmi1otq3njrjiiwidhlwijoislduin0.eyjuymyioje1mte3nteymjgsimv4 Cci6mtuxmtc1mtuyocwiaxnzijoiahr0cdovl29pzgmtc2vydmvylmrldiisimf1zci6impzlwnsawvudcisim5vbmnlijoizgu5ngi1ngmzndk1ngfjmjg0y 2i0nzlhy2m5zgmxmjmilcjpyxqioje1mte3nteymjgsimf0x2hhc2gioij1qnjhckvlohk4elhwr0pjog1bae1niiwic2lkijoimwq2zwqwywi0zjdhnzi2md uxmzbiyjbkyjniotdky2milcjzdwiioiiwmdawmdeilcjhdxrox3rpbwuioje1mte3nteymjgsimlkcci6imxvy2fsiiwiyw1yijpbimv4dgvybmfsil19.eu Mt0r34okdue8aesenraasorcp2ncay7eekmdm9vbwfz8bgnrcgxidnkougbw3qk8ekoiwhsed6qe-xh5qqnnwqtoc_ D0nucba3cvqkdhc9tfonehou60etbx0i70bbothzeojdto9ckilbcewk2slgfcqxzzskerm6as7m9lun7cgjqjqm6ht5dpigjfu7s9v7qnufu7hjvi51zpmyg Jwltvcxb9vaxxy17obrvtmyundletrnfj9uxcssroow6ac6skslotfky5elzuia5za_ 1gjfdaoyyzwft53wwbo9-lbdihd8cqx5fyw8tlpt3qmdwf0scsr256svxykgqw&Access_token=eyjhbgcioijsuzi1niisimtpzci6imi2mme2ytvlzjningjmotlhnwu3m2fkzmi1otq3njrjiiwidhlwijoislduin0.eyjuymyioje1mte3nteymjgsimv4 cci6mtuxmtc1ndgyocwiaxnzijoiahr0cdovl29pzgmtc2vydmvylmrldiisimf1zci6wyjodhrwoi8vb2lkyy1zzxj2zxiuzgv2l3jlc291cmnlcyisim15l Wfwasjdlcjjbgllbnrfawqioijqcy1jbgllbnqilcjzdwiioiiwmdawmdeilcjhdxrox3rpbwuioje1mte3nteymjgsimlkcci6imxvy2fsiiwic2nvcguiol Sib3blbmlkiiwichjvzmlszsisim15lwfwasjdlcjhbxiiolsizxh0zxjuywwixx0.bu65oltuhlslyfhyrzshkuafw5v5qmg7qmutl3lcel0gtjd9ky9cyd3 Runnakalvchxg7znn_f2jb71ape9msd_l66h8pttwaimtxbpz9_ Hmez9w6ggmorjmgp8unipcokom1dv4eisqode8p30oh2mwma5slvzixlaln3_ Ycartd7440scuruvnea1cjyl-k-kklvlyl3tro6bde-h47-azhq1nta22cwlevxnxutosmhk1nsa2tofw6b4t3favo_ mwx2bfkjmbtoy4areplxsan5cqqxh8na1havll3ly3c9goslnsm1krmvx9gydfr6dgjodvnbavdkldmo2t_w&Token_type=bearer&expires_in=3600&Scope=openid%20profile%20my-api& State=96af404863044d49b6e14a5827862538&session_state=c33u-bpeynelhwhuuklfup18cjkkkx54ycdl2fuotv0.5ec877a6108fde6ad04e774a770d7ee1

Here is more than the information returned in the previous article a access_token is because our authentication request Response_type set to "Id_token token", so Oidc-server.dev id_ Token and Access_token are given to the client.

JS Client parses the data in # to save its own login status

Parsing the data behind the # is also done by oidc-client.js the Open Source Library. The parsed data is rendered on the page as follows.

The user's information is stored in the browser's sessionstorage after login:

JS Client Active Logout

The exit operation is consistent with other types of clients, and is the first to clean up your saved session Storage and then notify Oidc-server.dev to log out, which is not explained in detail here.

JS Client Passive Logout

We know that in SSO, in addition to their own active exit login, there are other client exit, the JS client here will also be passive logout. Since the JS client does not have the ability to execute code on the server side of the server, and its login status is stored on the client side, it is not able to receive notifications like other clients receiving logout. At this time, the client should take the initiative to Oidc-server.dev check the login status. This section also has standard specifications in OIDC, which is reflected in the check_session_iframe field in the OIDC Discovery service.

This address checksession address is the address of the Oidc-server.dev, then the address returned by the HTML page, you can use JS to check to store the cookie in the session information is changed. This change is then passed on to the JS client side by the new PostMessage in the H5. JS client again to check whether it has been logged out. If it is already logged out, it will clean up its login status to complete the passive logout operation.

Like what. When I click Log out again, Oidc-client-implicit.dev will trigger Oidc-server.dev to clean up my cookie and then use Check_session_ in Js-client. This hidden iframe of the IFRAME can detect this change, allowing Js-client to know that the user has logged out of the client.

Automatic Login

Before mentioning JS client will load a oidc-server.dev/account/js js script file, this is my own extension of a script. It will be in this pure static Web site when opened to tell the client whether Oidc-server.dev is already logged in.

Then the static website can use the account this variable to decide whether to open the site automatically when the login (because the other site has been logged, then the Oidc-server.dev site will automatically carry the information after the login to jump back).

Readers can open the browser, first open Oidc-client-implicit.dev this site and log in, and then open Oidc-client-js.dev this site, you will find that it will automatically login successfully.

Summarize

This article introduces how to use the OIDC service for single sign-on, unified logout, login status monitoring, and additional how to make JS client log on automatically. The example used here makes the traditional HTML+JS structure. If you make the vue,angular or react of this type of front-end framework, then the principle of its essence is exactly the same, because no matter what the framework used, the final output to the browser or HTML+JS.

Reference

This article source code: Https://github.com/linianhui/oidc.example

Oidc-client.js:https://github.com/identitymodel/oidc-client-js

[OIDC in Action] 2. OIDC (OpenID Connect)-based SSO (Pure JS client)