Showing posts with label sso angular. Show all posts
Showing posts with label sso angular. Show all posts

Sunday, 30 January 2022

Single Sign On in multiple Angular apps using Angular-oauth2-oidc and KeyCloak

This a post which contains the project with the multiple angular apps for the SSO i.e. Single Sign On. I have created the 3 very simple angular apps and configured angular-oauth2-oidc (https://www.npmjs.com/package/angular-oauth2-oidc)

Keycloak is an open-source IAM solution that helps its users secure applications without having to write complex code. This helps save time spent on development.

Here, I have added the screenshot of how to create realms and clients in keycloak. However I'm not going to explain about Angular installation and integration of it with oauth2-oidc package. You can easily get that from this link: https://www.npmjs.com/package/angular-oauth2-oidc.

Step 1: Download and Install Keycloak. Use this link to install and download: https://www.keycloak.org/docs/11.0/getting_started/

Step 2: Make sure that your keycloak server is running on port 8080

Step 3: Login in to keycloak with your username and password

Step 4: Go to Realm Setting and create Realm as given in the screenshot below:


Step 5: Once done with Step 4 go to Login tab and enable User Registration option


Step 6: Now go to clients menu from right sidebar and create the 3 clients as shown in below screenshots. Provide appropriate client id, valid redirect url and web origins shown in the screenshots:







Click on "Clients" menu from right sidebar to view all the created clients

Step 7: Install Node and Angular

Step 8: Clone the angular apps from below repositories:

https://github.com/jogkunal5/angular-sso-oauth2-oidc-keycloak

https://github.com/jogkunal5/angular-sso-oauth2-oidc-keycloak-ssoapp1

https://github.com/jogkunal5/angular-sso-oauth2-oidc-keycloak-ssoapp2

Step 9: Once done with clone. Execute the npm install command for all apps and test the code