Microsoft Login Provider

[jonstelly]

Resolves: #306

Logout for the Microsoft provider has to navigate to login.microsoftonline.com to fully end the user session and log them out. I opened an issue against the MSAL library ( AzureAD/microsoft-authentication-library-for-js#2563 ) so worst case we could do that in a popup like the login and they seem to have had that request a few times already.

Configuration
Default configuration looks like the following which is just a flattening of commonly used properties from the MSAL configuration object.

const COMMON_AUTHORITY: string = 'https://login.microsoftonline.com/common/';

let microsoftOptions : MicrosoftOptions = {
  redirect_uri: location.origin,
  authority: COMMON_AUTHORITY,
  scopes: ['openid', 'profile', 'User.Read'],
  knownAuthorities: [],
  protocolMode: ProtocolMode.AAD,
  clientCapabilities: [],
  cacheLocation: 'sessionStorage'
};

Notes
I set up the Microsoft app with https://localhost:4200/ as a valid origin so for development/testing I was using ng serve --ssl true. HTTPS is required for Facebook authentication now but the existing registration that's used for the demo app doesn't seem to have HTTPS from localhost listed as a valid origin (you can see FB errors in the console when loading the demo from http://localhost:4200). The Microsoft registration seems to work with HTTP or HTTPS

I also bumped the demo app to use Font Awesome 5.15.1 so I could use the Microsoft brand icon.

[Selindek]

user.authToken = ...

[jaibatrik]

Changes are looking good; thank you!

[jonstelly]

Just to check, there was a comment about needing to set user.authToken but I hadn't done that yet. Is that something I need to fix and submit another PR for?

[jaibatrik]

Yeah, this one is already merged. You'll probably need to create another PR. While at it, would you please be able to check why the MS login appears to be not working in the demo site?

[jonstelly]

Took me a while to get back to this, but new PR submitted to include authToken.

While at it, would you please be able to check why the MS login appears to be not working in the demo site?

The MS provider works for me with either ng build lib && ng serve and accessing via http://localhost:4200/ or ng build lib && ng serve --ssl and accessing via https://localhost:4200/

Do you get any errors in the console?

[jaibatrik]

I think this is because of configuration of the app. Below is the message I see when trying to use MS provider at https://abacritt.github.io/angularx-social-login/. The URL probably needs to be added in the app settings.

invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

[jonstelly]

Ah, I think this is a trailing slash issue. I had the Azure AD app registration allowing https://localhost:4200/ and 'http://localhost:4200/`, but Angular tends to strip off those trailing slashes (or maybe this is a per-browser thing?). I changed the app registration to allow https://localhost:4200 and http://localhost:4200 without the trailing slash.

I also added some documentation and other cleanup in #354. Let's continue the conversation there if you're still seeing the issue?