• Home
• App Integrations
• Single Sign-On Integrations
• Angular Single Sign-On

Angular Single Sign-On SSO

---

Angular JWT Single Sign-On (SSO) solution by miniOrange provides secure Single Sign-On access into Angular application using a single set of login credentials. This is done using JSON Web Token (JWT) tokens and it can be easily integrated with Angular built in any framework or language. You can enable social login for your users to get secure access to applications using any of their existing social providers such as Facebook, Twitter, Google, or LinkedIn.

With miniOrange Angular SSO, you get:

• Seamless user login experience.
• Endless customizations to your login forms and pages.
• Simplified customer or user on-boarding.

Follow the step-by-step guide given below for Angular Single Sign-On (SSO):

1. Configure Angular in miniOrange

• Go to Apps and click on Add Application button.



• In Choose Application, select JWT from the application type dropdown.



• In the next step, search for Angular application from the list. If your application is not found, search for JWT App and you can set up your Application.



• You can configure the following details in the application:

  Custom App Name	Enter the Application Name of your choice, and add a description if required.
  Redirect-URL	Enter the Redirect-URL (i.e. the endpoint where you want to send/post your JWT). You can add multiple redirect URLs by separating them with a ‘;’. E.g. abc.com;xyz.com
  Primary Identity Provider (optional)	Select your Identity Source from the dropdown. You can select miniOrange here as default IDP.




• Click on Save to complete the configuration.
• Click on Edit in the ' ' icon against your app.



• You can get further details about your recently added JWT application:

  Client ID	If your application provides its own client ID, you can configure it by clicking on the Customize button.
  App Secret	You can find App Secret by clicking on the copy icon. This is used in the HS265 Signature algorithm for generating the signature.
  Signature Algorithm	Select RSA-SHA256 as your signature algorithm from the dropdown.
  Primary Identity Provider	Select the default Identity Provider from the dropdown for the application. If not selected, users will see the screen of default IdP (miniOrange)
  Redirect URL	Enter your app’s URL here (This is the URL where you will receive your JWT.) <app-login-url>/?id_token=<token> eg: https://localhost:3000/home/?id_token=eyefb43bf.whfeeg.hfwf In this example, https://localhost:3000/home is my app’s URL where id_token will be posted after authentication.

• Scroll down to Endpoints.



• SSO URL for using miniOrange as Authentication Source: If you are going to store users in miniOrange and use miniOrange as your authentication source,then, copy and save this URL somewhere as it will be used in further steps.
• SSO URL for using External Providers as Authentication Source: If you are going to use any External Provider as your authentication source, then, Copy this one and save somewhere as it will be used in further step.

2. Configure SSO in Angular

• Select a component that will be responsible for verifying the JWT token most preferably the login component.
• Import the JWTBuilder class from the jwt-connector. From the path to which it was moved in step 1 of Prerequisites. import { JWTBuilder } from './path/to/jwt-connector';
• You can add a button on your login screen to redirect to the SSO URL. You can get this SSO URL from step 1 of Configure your application in miniOrange. <button> onClick={sso}>Single Sign On</button> function sso() { window.location.href = window.location.href = ‘ ’; // example:https://login.xecurify.com/moas/broker/login/jwt/277898?client_id=AbIVW8A MNTBzg2o7&redirect_uri=http://localhost:3000/login; }
• On Clicking the SSO button the user will be redirected to the miniOrange portal for authentication.
• Then the JWT token is returned to your application to the redirect URL you have set while adding your application in miniOrange. In the following steps, we will be verifying this token and retrieving the user details.
• You need to add the x509 certificate that you can get in step 1 ‘configure your application in miniOrange ’.
• Now if the token is verified, the payload which consists of the User details can be saved in local storage or serialized into a User Class and the user now verified can be redirected to the home screen of your application.

3. Test SSO Configuration

Test SSO login to your Angular account with miniOrange IdP:

Using IDP Initiated Login

• Login to miniOrange IdP using your credentials.



• On the Dashboard, click on Angular application which you have added, to verify SSO configuration.





Not able to configure or test SSO?


Contact us or email us at idpsupport@xecurify.com and we'll help you setting it up in no time.

External References

• Mobile Apps Single Sign-On
• What is Single sign-On (SSO)?