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
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
Top comments (0)