Angular 2 with ADFS using miniOrange

Follow the Step-by-Step Guide given below to integrate your Angular 2 app with ADFS.

Step 1: Create ADFS as Identity Source in miniOrange

• Login as a customer from Admin Console of miniOrange's Administrator Console, now go to Identity Sources Tab from menu and click Add Identity Source. Make sure SAML tab is selected.
• Enter the following:

  IdP Name	ADFS
  Login URL	https://<YOUR_ADFS_DOMAIN>/adfs/ls/
  IdP Entity ID	https://<YOUR_ADFS_DOMAIN>/adfs/services/trust
  X.509 Certificate	Provide the ADFS signing certificate
  Response Signed	No
  Assertion Signed	Yes
  Override Return URL	Yes
  Return URL	Leave blank

  
  
  
• Click on Save
• Now Go to Custom App Integration under Integration tab from menu
• Note down the Customer Key and Customer Token Key values. These will required in the next steps.
  
  
  

Step 2: 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 following URL in the Relying Party URL textbox and click Next: https://auth.miniorange.com/moas/broker/login/saml/acs/{YOUR_CUSTOMER_KEY}
• Enter the following in Relying Party trust identifier textbox: https://auth.miniorange.com/moas
• Click on Add. Click on Next until the last screen.
• Check Open the Edit Claim Rules. checkbox and click Close.
• Click on Add Rule.
• 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 3: Creating an external app in miniOrange

• Login to miniOrange Admin console and go to Apps > Manage Apps
• Click on Configure Apps button on the right upper corner.
• Click on Create Your Own App tab and select External App. Click on Add App.
• Enter the Custom Application Name and Description. Enter Redirect-URL where you would like to receive the response. If you want to use miniOrange URL, use this: https://auth.miniorange.com/moas/jwt/mobile
  
  
• Click on Save.
• Click on Download Certificate link against the application you just added. This will be required for verifying the response.
• Click on Edit link against the App you just created. Save/Note down the App Secret. This will be required for sending the authentication request to miniOrange.
  
  

Step 4: Integrate in your Angular 2 App

• You will need to redirect user to one of our endpoint through an InAppBrowser(Mobile-application) / Browser(Web-Application) along with an encrypted token string in a specific format.
• miniOrange service will verify the token and if valid, redirects user to ADFS login page.
• Once the user is signed in, ADFS sends a SAML Assertion to miniOrange.
• miniOrange verifies the ADFS SAML Assertion and converts SAML assertion to a JWT token (JSON Web Token).
• miniOrange redirects the user to a pre-configured URL(can be a miniOrange URL) with this JWT token.
• The app needs to have an Event Listener, which gets triggered when the user is redirect to this pre-configured URL in InAppBrowser, and reads the JWT token.
• App will then need to verify the JWT token and get the information of the logged in user and login it to the Angular 2 App.

Creating the Authentication Request token

Pre-requisites:
Customer Key – for creating the final Endpoint URL
App Secret – for creating the token
Customer Token Key – for encrypting the generated token

Creating the Request token:
The request token must be in the following format:{Current_Timestamp_In_Milliseconds}:{App_Secret}
For example:1454392823570:abcdefghijklmnop
NOTE: Each Token is valid for 60 seconds.

When the token is created, you will need to encrypt the token value using the Customer Token Key. Use the following method to encrypt the token:
Encryption method: AES
Operation Mode: ECB
Padding Scheme: PKCS5 Padding

Example JAVA Code for encrypting the token:

public static String encrypt(String text) throws Exception {
		Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
		SecretKeySpec keyspec = 
	new SecretKeySpec("Customer_Token_Key".getBytes(), "AES");

	if (text == null || text.length() == 0)
	throw new Exception("Empty string");
	byte[] encrypted = null;
	try {
	cipher.init(Cipher.ENCRYPT_MODE, keyspec );
	encrypted = cipher.doFinal(text.getBytes());
	} catch (Exception e) {
	throw new Exception("[encrypt] " + e.getMessage());
	}
	return Base64.encodeBase64String(encrypted);
	}

If the Customer Token Key used to encrypt the above token is: klmnopqrstuvwxyz
The encrypted value for the above mentioned token should be:PJm8sn7Q1BYjdu7nXLAoATJOwuCecSxFeEz2MJzQShc=

Once the encrypted token is created, URL encode the encrypted token and append it to the miniOrange endpoint and redirect the user. Here is the final URL where you should redirect the user:
https://auth.miniorange.com/moas/broker/login/jwt/{YOUR_CUSTOMER_KEY}?token=PJm8sn7Q1BYjdu7nXLAoATJOwuCecSxFeEz2MJzQShc%3D
Replace {YOUR_CUSTOMER_KEY} with the Customer Key you have.

Receiving and Verifying the JWT token
The JWT token can be found in Query String Parameter id_token.
For Example, in Java you can get the JWT token like this:
String jwtToken = request.getParameter("id_token");

For verifying the JWT token, you will need the Certificate you downloaded from miniOrange. You can use the open source libraries available on https://jwt.io/ If you are using the library for Java, you can use jose4j library https://bitbucket.org/b_c/jose4j/wiki/Home
You can follow this example of jose4j to verify the JWT token received: https://bitbucket.org/b_c/jose4j/wiki/JWT%20Examples