Microsoft Sign In with Angular

Question

I've integrated social logins (Google and Facebook) through angularx-social-login and now finding a way to integrate microsoft based accounts.

Is there a way to integrate Microsoft accounts (hotmail, live, outlook) with Angular?

All searches and examples in the web are mostly specific to Microsoft Azure. Is there any npm library to integrate this? Any ideas?

user_4686694 · Answer

After Sergey Comment, I've implemented it with msal.

Here it is,

npm install msal --save

login.component.ts

import { Component } from '@angular/core';
import { UserAgentApplication } from 'msal'

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
})
export class LoginComponent 
{
    userData;
    userAgentApplication;

    constructor(private socialAuthService: AuthService) {
        var applicationConfig = {
            clientID: 'YOUR_CLIENT_ID'
        };

        this.userAgentApplication = new UserAgentApplication(applicationConfig.clientID, null, this.tokenReceivedCallback);
    }

    public tokenReceivedCallback(errorDesc, token, error, tokenType) {
        if (token) {
            this.userData = token;

            console.log("Token: " + token)
        } else {
            console.log(error + ":" + errorDesc);
        }
    }

    public microsoftSignIn() {
        var graphScopes = ["user.read", "mail.send"];
        let that = this;

        that.userAgentApplication.loginPopup(graphScopes).then(function(idToken) {
            //Login Success
            that.userAgentApplication.acquireTokenSilent(graphScopes).then(function(accessToken) {

                console.log(accessToken)
                //AcquireTokenSilent Success
                var headers = new Headers();
                var bearer = "Bearer " + accessToken;
                headers.append("Authorization", bearer);
                var options = {
                    method: "GET",
                    headers: headers
                };
                var graphEndpoint = "https://graph.microsoft.com/v1.0/me";

                fetch(graphEndpoint, options)
                    .then(function(response) {

                        response.json().then(function(data) {
                            that.userData = data;

                            console.log(data)
                        })
                    })
            }, function(error) {
                //AcquireTokenSilent Failure, send an interactive request.
                that.userAgentApplication.acquireTokenPopup(graphScopes).then(function(accessToken) {
                    //updateUI();
                }, function(error) {
                    console.log(error);
                });
            })
        }, function(error) {
            //login failure
            console.log(error);
        });
    }
}

login.component.html

{{ userData | json }}

user_512499 · Answer

There is msal-angular library now:
https://www.npmjs.com/package/@azure/msal-angular
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/angular9-sample-app

I've made own implementation of MsalInterceptor to overcome issues with protectedResourceMap.
This is my custom code block:

// #region own workaround in order not to put every api endpoint url to settings
if (!scopes && req.url.startsWith(this.settingsService.apiUrl)) {
  scopes = [this.auth.getCurrentConfiguration().auth.clientId];
}
// #endregion

// If there are no scopes set for this request, do nothing.
if (!scopes) {
  return next.handle(req);
}

PS: Vote for wildcard in protectedResourceMap https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1776

Microsoft Sign In with Angular

2 Answers