Microsoft带角度登录 [英] Microsoft Sign In with Angular

问题描述

我已经通过angularx-social-login集成了社交登录(Google和Facebook)，现在找到了集成基于Microsoft的帐户的方法。

是否有办法将Microsoft帐户(Hotmail、LIVE、Outlook)与ANGLE集成？

网络上的所有搜索和示例大多是特定于Microsoft Azure的。有没有NPM库来集成这一点？有什么想法吗？

推荐答案

在谢尔盖评论后，我已经用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>

这篇关于Microsoft带角度登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！