使用 ng2-adal 获取 Microsoft Graph 客户端的访问令牌

Question

我正在尝试创建一个 Angular 应用程序，它使用 Angular 2 ADAL library to login into Azure Active Directory and afterwards call Microsoft Graph Client 来检索有关当前用户的一些信息。

不幸的是，Graph 客户端总是 returns InvalidAuthenticationToken，我不知道如何进一步调查以找到根本原因。

my.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { Client } from '@microsoft/microsoft-graph-client';

import { SecretService } from '../../shared/secret.service';
import { AdalService } from 'ng2-adal/services/adal.service';

@Component({
    selector: 'my',
    templateUrl: './my.component.html'
})
export class MyComponent implements OnInit {
    isBrowser: boolean;
    private graphClient: Client;
    private userProfile: any;

    constructor(
        @Inject(PLATFORM_ID) platformId: Object,
        private adalService: AdalService,
        private secretService: SecretService) {
        this.isBrowser = isPlatformBrowser(platformId);
        adalService.init(secretService.adalConfig);

        // Don't initialize graph client in server-side-rendering
        if (this.isBrowser) {
            this.graphClient = Client.init({
                authProvider: (done) => {
                    done(undefined, this.adalService.getCachedToken(this.secretService.adalConfig.clientId));
                }
            });
        }
    }

    get isLoggedIn(): boolean {
        if (!this.isBrowser)
            return false;

        return this.adalService.userInfo.isAuthenticated;
    }

    ngOnInit() {
        // Fast exit on server-side-rendering
        if (!this.isBrowser)
            return;

        // Initialize ADAL service
        this.adalService.handleWindowCallback();
        this.adalService.getUser();

        // If we are already logged in (cause reply url is called from login)
        // use Graph API to get some data about the current user
        if (this.isLoggedIn) {
            this.graphClient.api('/me').get().then((value) => {
                this.userProfile = value;
            }).catch((error) => {
                // Currently I'm always getting here, but never in the above then() call.
                console.log(error);
            });
        }
    }

    onLogin() {
        this.adalService.login();
    }

    onLogout() {
        this.adalService.logOut();
    }
}

my.component.html

<md-toolbar>
    <md-toolbar-row>
        <button color="primary" md-button *ngIf="!isLoggedIn" (click)="onLogin()">
            Login
        </button>
        <button color="accent" md-button *ngIf="isLoggedIn" (click)="onLogout()">
            Logout
        </button>
    </md-toolbar-row>
</md-toolbar>
<md-card>
    <md-card-content>
        <section>
            {{userProfile}}
        </section>
    </md-card-content>
</md-card>

Answer 1

根据代码，您正在使用从 Azure AD 发出的 id_token 调用 Microsoft Graph。要调用 Microsoft Graph，我们需要使用 access_token 并且它的受众应该是 https://graph.microsoft.com.

您需要使用如下代码获取 Microsoft Graph 的 access_token：

this.adalService.acquireToken("https://graph.microsoft.com").subscribe(function(token){
          this.graphClient = Client.init({
            authProvider: (done) => {
                done(undefined, token);
            }                
        });

关于Microsoft Graph认证的更多细节，您可以参考下面的link：

Get access tokens to call Microsoft Graph

使用 ng2-adal 获取 Microsoft Graph 客户端的访问令牌

Use ng2-adal to get access token for Microsoft Graph Client

adal.js

angular

microsoft-graph-api