Ionic-msal integration

Ionic Framework ionic-v3
1

Hi All,
I am working on integrating MSAL to ionic app using the angular (npm install @azure/msal-angular --save). (https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/b6b80bfc2369040424d7475bec8c6c323dfa093d/lib/msal-angular/README.md).

The issue is,
When I try to login with the API method loginpopup() from msalservice in browser (ionic serve) it works fine and I am able to login
But when I try to run same in android it is always throwing error (error.split is not a function).
any idea ?
Attaching screenshot.

image
image1345×337 45.8 KB

and
msal config in app.module.ts

 MsalModule.forRoot({
      clientID: 'my-client-id',
      authority: 'https://login.microsoftonline.com/common/',
      validateAuthority: true,
      redirectUri: 'http://localhost:8100/tabs/tab1',
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE, // set to true for IE 11
      postLogoutRedirectUri: 'http://localhost:8100/tabs/tab1',
      navigateToLoginRequestUrl: true,
      popUp: true,
      // consentScopes: ["https://graph.microsoft.com/User.ReadWrite"]
      consentScopes: ['user.read', 'openid', 'profile', 'api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user'],
      unprotectedResources: ['https://www.microsoft.com/en-us/'],
      protectedResourceMap,
      logger: loggerCallback,
      correlationId: '1234',
      piiLoggingEnabled: true
    }
    ),
1 Like
2

Hello, did you solve this issue? Does msal angular worked with ionic? Thanks

3

It works for ionic… BUt For broker support still u need to go with ms-adal plugin… Only MSAL doesn’t work for broker auth

4

@yashwanth493 Could you go into more detail about what you had to do to make it work? I tried to integrate it like I would for a normal angular application and there are no errors and the MsalGuard route guard is invoked as expected, but after a successful login and redirect to the Ionic app the login state is still null. Since msal-angular is (as far as I know) built for the Angular routing module and Ionic probably overrides this I assumed that the hook into the routing module which receives the successful login from Azure AD/B2C is just never handled. Would be glad for any insight since I’m currently blocked in implementing this. Thanks.

This is also partially being followed in this GitHub ticket from the msal-angular repository: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1439

1 Like
5

@Pharao2k For MSAL login in ionic the redirect_url is having some issues, ionic doesn’t read the callback redirect url and it remains in the password screen even after login success. So the same thing can be achieved using the ADAL plugin of cordova ionic (https://ionicframework.com/docs/native/ms-adal) .

6

Msadal is archived and no longer maintained , so if you try to use it in future for ios apps , apple store will refuse it …

7

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??

8

Hey, nowadays are you using MS ADAL plugin with ionic 3? It’s not working with ionic 5.

UI Error : AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption

Console Error: he request body must contain the following parameter: ‘client_secret or client_assertion’

We are using below technical specifications for the ionic App.

IONIC: 5

Angular: 9

@ionic-native/ms-adal: 5.27.0

cordova-plugin-ms-adal: 0.10.2

Cordova version : 9.0.0

“msal”: “^1.3.3”

9

In Ionic 3, its working fine in my project. As per your Ionic 5 console log error, you need to pass the “client_secret” id in the request parameter. Could you share the request parameters?

10

It works using
“@angular”: “~11.2.10”,
“@azure/msal-angular”: “^2.0.2”,
“@azure/msal-browser”: “^2.16.1”,

you must use 'loginPopup() ’ on MsalService, the ‘redirectLogin()’ will not work on ionic
as it dosen’t store the info returned by azureAD

11

I am trying with MsalService and loginPopup() (as described in Build Angular single-page apps with Microsoft Graph - Microsoft Graph | Microsoft Docs). Everything works well with “ionic serve” but it does not work in device. As soon as it redirects to the login page, the app crashes. I not sure if it would be possible to get with InAppBrowser.

Any success with MsalService and Ionic?

3 Likes
12

Do you manage to make the login work with MSAL in an Ionic 5 app? I think for the callback the “openedbyurl” listener is needed

13

Hi Carlos,

I have the same problem: signing in works fine with ionic serve, but it fails on an Android device. It properly displays the Microsoft Login popup from “https : //login.microsoftonline.com/common/reprocess?ctx=[a-long-hash]”, and when I click the ‘continue’ button, it redirects to “http : //localhost/login#code=0.AR8A37YNHPGMP0iXW1…”. (which is a very long hash that looks like a refresh token as it starts with ‘0.’).
Thanks

1 Like
14

Same thing I get, would be nice to have a tutorial on the best way to integrate MSAL with Ionic

15

I have had not luck with it. I also asked in StackOverflow and no luck too (azure active directory - Ionic and MSAL Authentication - Stack Overflow). Have you got more luck? Did you made it work? Thank you

16

Hi @carlosadrian

I am also facing the same issue currently in ionic6 + capacitor + MSAL Authentication.

I have seen your post in stackoverflow

I have tried the answers posted for your thread. However the redirect callback to mobile app is not happening for me.

Were you able to succeed on the same?. If yes, could you pls share the code snippet with me?
Appreciate your help!

17

Hi @mjeyaraj

Even I am trying to integrate IONIC + CAPACITOR + MSAL but having hard time to get it work in mobile apps. Can you share your code/sample to get it working. My app works fine with ionic serve