Ionic 3 MSADAL
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.
- 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.
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: hello@raddy.co.uk
Thanks for the Post. But with this code, I have to login every time. How do I fetch the stored token and validate it?
I know that the Github project is now archived but you can still look at the documentation:
https://github.com/AzureAD/azure-activedirectory-library-for-cordova/tree/archive
Raddy,good day! Thank you very much for post. Is this example work with Ionic 4 ? I had some issues with login every time and redirect back to my Android App.
Good day, Anton. Last time I tried was when Ionic 4 was in Beta version and I couldn’t get it to work. Ionic was very buggy at that point and unfortunately I had to stick with Ionic 3. Since then I’ve heard that MSADAL is deprecated so now I am unsure if using the MSADAL Ionic plugin is the right way to go. It might be worth asking in the Ionic forum to see what people use. Let me know when you find out haha
Hi Raddy,
I am getting eror MSAdalOriginal is not assignable to providers while adding MSAdal to the providers array of app.module.ts file
Did you install the MS-Adal plugin successfully?
ionic cordova plugin add cordova-plugin-ms-adal
npm install –save @ionic-native/ms-adal
Hi
I am using ionic 3 and I installed ms-adal plugin as your instruction, with all configuration I am able to redirect to microsoft login page after success login it redirect same microsoft login page I am not getting console.log(‘Token is’ , authResponse.accessToken);
console.log(‘Token will expire on’, authResponse.expiresOn);
That’s really strange. So you are not getting Authentication failed?
I’m using MS adal plugin in a Ionic3 project and its working well and I’m receiving all the authenticate data from AD. The only problem is, I’m NOT getting the “onpremisessamaccountname”. We are receiving the “onpremisessamaccountname” from postman but not in the application.
Is there anything which I need to send in the request??
Hey, Nirmalya
Could it be something to do with permissions?
Hey
Could please let me know how to implement refresh token using same plugin
Thanks,
Swapnil
I think that with Ionic, you will have to just use sessions and local storage to keep the user logged in and you can use the authResponse.expiresOn to set expiry date if you wish