Вход в Microsoft с помощью Angular

После комментария Сергея я реализовал это с помощью мсал.

Вот,

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.info("Token: " + token)
        } else {
            console.info(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.info(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.info(data)
                        })
                    })
            }, function(error) {
                //AcquireTokenSilent Failure, send an interactive request.
                that.userAgentApplication.acquireTokenPopup(graphScopes).then(function(accessToken) {
                    //updateUI();
                }, function(error) {
                    console.info(error);
                });
            })
        }, function(error) {
            //login failure
            console.info(error);
        });
    }
}

login.component.html

{{ userData | json }}

<button (click) = "microsoftSignIn()">Sign in with Microsoft</button>

Сейчас есть библиотека msal-angular:
https://www.npmjs.com/package/@azure/msal-angular
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/angular9-sample-app

Я сделал собственную реализацию MsalInterceptor для решения проблем с protectedResourceMap.
Это мой собственный блок кода:

// #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: Проголосуйте за подстановочный знак в protectedResourceMap https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1776