Question

我已经通过angularx-social-login集成了社交登录信息（Google和Facebook），现在正在寻找一种集成基于Microsoft帐户的方法。

是否可以将Microsoft帐户（hotmail，live，outlook）与Angular集成？

网络中的所有搜索和示例大多特定于Microsoft Azure。是否有任何npm库可以集成此库？有什么想法吗？

Answer 1

在谢尔盖评论之后，我已经用msal实现了它。

在这里，

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

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

Answer 2

现在有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

中的通配符投票

Microsoft使用Angular登录

2 个答案: