Ionic 3 MSADAL

By Raddy in Ionic 3 · December 6, 2018

In this blog post, I will explain how to get started with the Ionic Native plugin MS ADAL (Active Directory Authentication Library). The ADAL plugin provides easy-to-use authentication functionality for your Apache Cordova apps by taking advantage of Windows Server Active Directory and Windows Azure Active Directory. 

Before we get started there are a few important things that you need to know:

• The plugin will only work on a simulator or a real device meaning that you won’t be able to run cordova and test it in your browser
• You need to get yourself a free Azure AD account
• Supported platforms are Android, iOS and Windows

Let’s get started. 

1) Install Ionic 3

The easy way of installing ionic is by using npm. You can find the Ionic instructions here. If you don’t wish to read them just follow this tutorial, but I won’t be going into much detail as you should be already have experienced at least a little bit with the framework.

Install Ionic

npm install -g ionic

Start an app

ionic start myApp tabs

Run your app

cd myApp
ionic serve

If at this point everything works – that’s great! In the next step, we will have to install the MsADAL plugin.

2) Install MSAdal

First of all the full documentation can be found here. Make sure you read it or at least have a look as their installation guides are fairly clear.

To install the plugin we’ll use npm again.

1. Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-ms-adal
npm install --save @ionic-native/ms-adal

Now that we have installed MSAdal we need to add it to our app.module.ts file: 

1- Start by importing the MSAdal

2 – Add MSAdal to your Providers

import { MSAdal } from'@ionic-native/ms-adal';

For this example, I am just going to use the already generated Home page for the login. Of course, you can generate a custom login page by using the generate command.

Open home.ts and insert the following code just like in the picture shown below:

Import Code:

import { MSAdal, AuthenticationContext, AuthenticationResult } from '@ionic-native/ms-adal';

Constructor Code:

private msAdal: MSAdal

Login function Code:

onLogin(){
  
 let authContext: AuthenticationContext =  this.msAdal.createAuthenticationContext('https://login.windows.net/common');
 authContext.acquireTokenAsync('https://graph.windows.net', 'clienID-replace-this', 'http://localhost:8000','','')
.then((authResponse: AuthenticationResult) => {
 console.log('Token is' , authResponse.accessToken);
 console.log('Token will expire on', authResponse.expiresOn);
})
  .catch((e: any) => console.log('Authentication failed', e));
}

3) Configuration – App Registration

This is where you can get your ClinetID. Go to https://portal.azure.com and navigate to Azure Active Directory -> App registration. Once you are there click on the plus sign “+ New application registration“.

In the next step of creating your app registration, it’s very important to select Native.

Name: name your app

Application type: Native

Redirect URI: http://localhost:8000

Copy your ClientID and head back over to our Ionic App to replace mine under home.ts

4) Testing

It’s time to run our app on a simulator or real device. To do that run the following command for IOS or Android:

Once you log in, MSADAL will return your accessToken.

Download source code

More Resources:

• Fade In Fade Out animation in JavaScript and CSS
• NodeJS Setup With Express, HTML, CSS, JS & EJS
• Upload and Store Images in MySQL using Node.Js, Express, Express-FileUpload & EJS Layouts
• How to Highlight A Terminal Output with Node.JS using Chalk
• Four Ways of Developing a WordPress Website in 2022

Author

Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]