Single Sign On (SSO) into Angular 2 using JWT Protocol

SSO into Angular 2 using SAML 2.0 Identity Provider with JWT Protocol

This solution allows you to setup Single Sign-On into Angular 2 which does not support SAML 2.0 standard, It allows setting up JWT SSO.

You can allow your users to Single Sign-On into Angular 2 by verifying Identity with your existing SAML 2.0 compliant Identity Provider. This is done using JSON Web Token (JWT) tokens and it can be easily integrated with Angular 2 built in any framework or language.

In case you need our help with below integration or sample code for JWT for your language, feel free to reach out at info@xecurify.com.

Pre-requisites:

• SAML 2.0 supported Identity Provider (In case you don’t have IdP, you can use miniOrange as an Identity Provider)
• Customizations support in Angular 2 to integrate SSO changes below.

This solution can be achieved with an easy setup which includes 2 simple steps:

A. Setup your SAML Identity Provider in miniOrange

B. Add JWT application and provide SSO link in Angular 2

Step A: Setup your SAML Identity Provider in miniOrange

Step 1: Add Angular 2 application in miniOrange:

• Login to your miniOrange dashboard.
• Go to Identity Provider tab and click on Add Identity Provider button.
• Select SAML tab.



• Add configuration details of your IdP with minimum required configuration parameters below:
  
  

  IDP Name	Enter Your IDP Name
  IDP Entity ID	https://<YOUR_ADFS_DOMAIN>/adfs/services/trust
  SAML SSO Login URL	https://<YOUR_ADFS_DOMAIN>/adfs/ls/
  X.509 Certificate	Provide the ADFS signing certificate

Step 2: Configure miniOrange settings in your Identity Provider

• Add configuration details below which will be required by your IdP:

a. Service Provider Entity ID / Issuer: https://login.xecurify.com/moas

b. Assertion Consumption Service (ACS) URL: Find SAML ACS URL option in added Identity Source and choose ACS URL For SP-Initiated SSO.





c. Signing Certificate (Optional): This is required if you want to enable signed SAML Auth request so than IdP can verify that the contents have not been altered in transit. Download signing certificate with steps below.

• Go to Identity Providers tab and find your configured IdP.
• Click Certificate link to download the certificate.






d. Configure miniOrange as relying party in ADFS:

• Open ADFS Management console.
• Go to Trust Relationships > Relying Party Trusts. Click Start.
• Click on Add Relying Party Trust. Select Enter about the relying party manually. Click Next.
• Enter Display Name. Click Next.
• Select ADFS Profile. Click Next. Click Next again.
• Select Enable support for the SAML 2.0 WebSSO protocol.
• Enter the URL as https://login.xecurify.com/moas/login/broker/login/saml/acs/{YOUR_CUSTOMER_KEY} in the Relying Party URL textbox and click Next button.
• Enter the Relying Party trust identifier as https://login.xecurify.com/moas/login
• Click on Add. Click on Next until the last screen.
• Check Open the Edit Claim Rules. Checkbox and click Close.
• Click on Add Rule and select Send LDAP Attributes as Claims and Click Next.
• Enter Claim Rule name and select Attribute Store.
• Select Email Addresses as LDAP Attribute and Name ID as Outgoing Claim Type. Click Finish.

Step B: Add JWT application and provide SSO link in Angular 2

a. Add JWT application:

In miniOrange dashboard, you can add JWT application with steps below:

• Go to Apps > Manage Apps.
• Click on Configure Apps and select tab External/JWT/PwdLess.
• Select app External / JWT App.
• Configure the name for Angular 2 and configure Redirect-URL which tells where to send JWT response. Redirect-URL should be an endpoint on Angular 2 where you want to achieve SSO.
• In case you are setting up SSO with Mobile Applications where you can’t create an endpoint for Redirect or Callback URL, use below URL. https://login.xecurify.com/moas/jwt/mobile
• Copy Client ID of generated application and keep it with you for next steps.

b. Add SSO link in Angular 2:

• https://login.xecurify.com/moas/broker/login/jwt/<customer-id>?client_id=<client-id>&redirect_uri=<redirect-url>
• You need to replace below values in URL:
  
  

  customer-id	Customer ID of your miniOrange account which can be found under settings menu.
  client-id	Client Id of JWT application created above.
  redirect-url	Configured Redirect URL against JWT application.

c. Perform SSO:

• Once you have added link above on Angular 2, you can verify SSO setup by clicking a link.
• On successful authentication, you will be redirected to configured Redirect or Callback URL with JWT token

d. Verify JWT token and parse user details for SSO:

• On your Callback endpoint, you can read and parse the JWT token.
• Structure of JSON Web Token (JWT): JSON Web Tokens consist of three parts separated by dots (.), which are:
• Header: Contains signature algorithm name used to sign the payload.
• Payload: Contains user attributes.
• Signature: Signature value of the payload. eg. xxxx.yyyyyyyyyyyy.zzzzzz
• You will need to download a certificate from App > Manage Apps, and click Certificate link against your configured application. This certificate will be used for signature validation of JWT response.

Single Logout (SLO)

This is an optional step. If you want to ensure that all sessions (SP and IDP) for a user are properly closed, you can configure Single Logout with steps below.

a. Configure miniOrange with IdP SLO endpoint:

• Go to Identity Provider tab and edit the configured Identity Provider.
• Find the option Single Logout URL and configure SLO URL provided by your IdP.

b. Configure IdP with miniOrange SLO endpoint:

• Configure your Identity Provider with below Single logout endpoint.
  https://login.xecurify.in/moas/broker/login/saml_logout/<your-customer-id>
• You can find SSO Binding option to configure logout binding type to either REDIRECT or POST.

c. Configure your JWT application with SLO endpoint:

• Configure your JWT application with below Single logout endpoint.
  https://login.xecurify.in/moas/broker/login/jwt/logout/<your-customer-id>?redirect_uri=<redirect-url>
  
  

  your-customer-id	You have to add your miniOragne account customer ID here.
  redirect-url	This should be replaced with logout URL of your JWT application.

We support all known SAML 2.0 IdPs – Google Apps, ADFS, Azure AD, Okta, Salesforce, Shibboleth, SimpleSAMLphp, OpenAM, Centrify, Ping, RSA, IBM, Oracle, OneLogin, Bitium, WSO2, NetIQ etc.