使用ng2-adal获取Microsoft Graph Client的访问令牌 [英] Use ng2-adal to get access token for Microsoft Graph Client
问题描述
我正在尝试创建一个使用 Angular 2 ADAL库的Angular应用程序登录到Azure Active Directory,然后调用 Microsoft Graph Client 来检索有关当前版本的一些信息用户.
不幸的是,Graph客户端始终返回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>
基于该代码,您正在使用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身份验证的更多详细信息,您可以参考以下链接:
I'm trying to create an Angular application that uses the Angular 2 ADAL library to login into Azure Active Directory and afterwards call Microsoft Graph Client to retrieve some informations about the current user.
Unfortunately the Graph client always returns InvalidAuthenticationToken
and I don't know how to further investigate to find the root cause.
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>
Based on the code, you were calling the Microsoft Graph using the id_token issued from Azure AD. To call the Microsoft Graph, we need to use the access_token and its audience should be https://graph.microsoft.com
.
You need to acquire the access_token for the Microsoft Graph using the code like below:
this.adalService.acquireToken("https://graph.microsoft.com").subscribe(function(token){
this.graphClient = Client.init({
authProvider: (done) => {
done(undefined, token);
}
});
More detail about authentication of Microsoft Graph, you can refer the link below:
Get access tokens to call Microsoft Graph
这篇关于使用ng2-adal获取Microsoft Graph Client的访问令牌的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!