Authenticating user entered User-Name and Password, in an Ionic 2 App's login screen, with Azure Active Directory using ADAL Library

I understand this has nothing to do with Ionic 2 but I just wanted to ask my question here as well and see if anybody has tried it. Trying all different venues I can think of to get a solution.

I am developing an Ionic 2 App that is authenticating users against Microsoft Azure Active Directory. Having trouble in figuring out how to implement the following flow using ADAL:

On my app’s login page, user enters “user-name” and “password==> Clicks on Login button ==> App makes Azure AD call by passing over the user entered “user-name” and “password==> Azure AD authenticates the user and returns back the result.

Following the Azure AD documentation, I was able to successfully implement “server-flow” where on making an Azure AD call, it opens up a new Microsoft Azure-AD login page for my app to enter “user-name” and “password”. And upon successful authentication the user is landed back on to my app’s home-page. This works fine but the experience is not great from UX perspective.

Following is the way I did it:

myAzure = new WindowsAzure.MobileServiceClient(MY_AZURE_APP_SERVICE_URL);
myAzure .login('aad').then(
        (result) => {
            //Successful Login
        (err) {
            console.log("In client.login callback failed");

Then, I followed Azure AD documentation to implement “client-flow”. I have a question in this:

1. How do I pass in the “user-name” and “password” to Azure AD when I make “authContext.acquireTokenSilentAsync()” call or “authContext.acquireTokenAsync()” call.

Upon going through the implementation of these methods in the ADAL library, it appears that

  • authContext.acquireTokenSilentAsync()” can accept only user-name and not the password. So, is it safe to assume that this method is not supposed to be used for login purposes?
  • authContext.acquireTokenAsync()” can accept user-name but in addition, there is a parameter called “extraQueryParameters”. Am I supposed to use this parameter to pass in the password? However, this is supposed to open-up a login page for the user on the screen. It did open a new login page on my device. So not sure how to develop my functionality.

If both of the above ways are not the right way to implement my flow of authentication then can somebody please help me by giving some pointers, links or sample links on how I can implement this?

My app’s users are going to be in our corporate Azure-AD. I have created a separate Azure-AD Tenant for my app (also created the required setup so that it’s tied up with my Azure App Service, etc.) and I would add users to this tenant when required.

Thank you.

Hi, did you manage to get this working?
I’m kinda stuck on the same issues you describe…

it is possible that you put a tutorial or steps of how you made the flow for the login using azure AD