Authentication opens a new window popup with postMessage

Aidan - May 10 -

Diagram:

When you have a large system with many services, each service is responsible for a specific task, and there is an authentication service that provides authentication for many [app client] applications in use, then you will be interested in postMessage or Single sign-on solutions.

This article will focus on postMessage

Solution 1: postMessage with iframe
Page parents use HTML tag iframe to load the child page.

Demo

Page parent sends a message to page child via iframe
Page child sends a message to page parent via iframe

Solution 2: postMessage with new window popup
Page login on [app client] call open new window load page login of service [A], service [A] login success send message container token data to go back [app client]

Demo

Open a new window
Click the button [Login success]: Send message go back [app client]

Repo: https://bitbucket.org/main-28/authencation-with-window-open/src/main/

Install the package with package json npm i

Run the script locally:

Solution 1(iframe)

Step 1:
npm run postMessage:iframe1
npm run postMessage:iframe2

Step 2: 
Open http://localhost:8081

Solution 2(new window)

Step 1:
npm run postMessage:case2:window1
npm run postMessage:case2:window2

Step 2: 
Open http://localhost:8085