Authentication opens a new window popup with postMessage

Aidan - May 10 - - Dev Community

Diagram:
Image description

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 Image description
  • Page child sends a message to page parent via iframe Image description

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
    Image description

  • Click the button [Login success]: Send message go back [app client]
    Image description

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
Enter fullscreen mode Exit fullscreen mode
  • Solution 2(new window)
Step 1:
npm run postMessage:case2:window1
npm run postMessage:case2:window2

Step 2: 
Open http://localhost:8085
Enter fullscreen mode Exit fullscreen mode
. . . . . .