Login with Microsoft

[johnfrits]

Do you have any sample how can we implement it with microsoft authentication?

[issue-label-bot]

Issue-Label Bot is automatically applying the label question to this issue, with a confidence of 0.73. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[jonstelly]

I'm trying to implement this now by adding a Microsoft provider to the library. It's my first time digging into the internals of this library but it seems pretty straight-forward to add a provider. I'm basing this off of the MSAL v2 and am starting to test it this week.

[jaibatrik]

I'm trying to implement this now by adding a Microsoft provider to the library. It's my first time digging into the internals of this library but it seems pretty straight-forward to add a provider. I'm basing this off of the MSAL v2 and am starting to test it this week.

Check https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/blob/master/src/app/app.component.ts and https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md

I think the loginPopup() method should help you.

[jonstelly]

I've got a minimal initialize() and signIn() working at this branch.

getLoginStatus() isn't working correctly yet, gives an error:

silent_sso_error: Silent SSO could not be completed - insufficient information was provided. Please provide either a loginHint or sid

signOut() also isn't behaving right

I also need to wire up more configuration options and validate/correct the claims and properties to a SocialUser, but it's a start.

I also had issues running locally, the other providers and hard-coded IDs in the demo app were causing an initialization failure so I disabled all providers except the Microsoft one:

          {
            id: MicrosoftLoginProvider.PROVIDER_ID,
            provider: new MicrosoftLoginProvider('0611ccc3-9521-45b6-b432-039852002705'),
          }

That's an ID for an app I've registered that accepts any microsoft personal or azure ad account. I used https://localhost:4200/ as the login / request URL, so if anyone wants to test it you'll need to run in your development environment as ng serve --ssl true.

I'll start cleaning things up tomorrow and hopefully be ready to create a pull request tomorrow or Wednesday.

[kamalkech]

{error: "idpiframe_initialization_failed", details: "Cookies are not enabled in current environment."}
details: "Cookies are not enabled in current environment."
error: "idpiframe_initialization_failed"
__proto__: Object

ERROR Error: Uncaught (in promise): Login providers not ready yet. Are there errors on your console?
    at resolvePromise (zone-evergreen.js:798)
    at zone-evergreen.js:705
    at angularx-social-login.js:73
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at SocialAuthService.signIn (angularx-social-login.js:71)
    at AuthService.signInWithFB (auth.service.ts:20)
    at AuthComponent.signInWithFB (auth.component.ts:25)
    at AuthComponent_Template_button_click_0_listener (auth.component.html:7)
    at executeListenerWithErrorHandling (core.js:15214)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15249)

[jonstelly]

This got pushed to the back burner for a few weeks but I've almost got it. One (big?) outstanding issue:

signOut() calls MSAL logout() which navigates to the Microsoft authentication site then sends us back to our app's url. This doesn't seem to fit with other provider behavior but I don't see anything in MSAL to do this without the navigate/redirect? Assuming this needs to get fixed, I'll open an issue on the MSAL site unless someone already knows of a way to do this.

Updates pushed to same branch as above: https://github.com/kymeric/angularx-social-login/tree/feature/ms

[jaibatrik]

Yeah, they should be able to silently do that (may be through AJAX or something / or in worst case a popup). We can definitely open an issue with them.

As far as this library goes, I think someone willing to use MS login will have to live with this quirk. I checked the MS library documentation, and it seems that the logout function accepts a postLogoutRedirectUri value. We can perhaps default it to current route while calling logout.

[jonstelly]

Issue created for MSAL and linked to this issue.

I'll get the SocialUser mapping code finished and may try to add some sort of "partial logout" flag for the Microsoft Provider configuration, where we can just clear the MSAL session cache or something, technically not ending the session but allowing someone using this library and MS authentication to avoid the navigate/redirect if they absolutely want to. I'll try to put a reasonable warning/comment on that flag explaining the trade-offs.