Angular 使用ng2 adal获取Microsoft Graph客户端的访问令牌
我正在尝试创建一个Angular应用程序,它使用登录到Azure Active Directory,然后调用来检索有关当前用户的一些信息 不幸的是,Graph客户端总是返回Angular 使用ng2 adal获取Microsoft Graph客户端的访问令牌,angular,microsoft-graph-api,adal.js,Angular,Microsoft Graph Api,Adal.js,我正在尝试创建一个Angular应用程序,它使用登录到Azure Active Directory,然后调用来检索有关当前用户的一些信息 不幸的是,Graph客户端总是返回InvalidAuthenticationToken,我不知道如何进一步调查以找到根本原因 my.component.ts import { Component, Inject, OnInit } from '@angular/core'; import { PLATFORM_ID } from '@angular/core'
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>
登录
注销
{{userProfile}}
根据代码,您使用Azure AD发布的id_令牌调用Microsoft Graph。要调用Microsoft Graph,我们需要使用access_令牌,其受众应为https://graph.microsoft.com
您需要使用如下代码获取Microsoft Graph的access_令牌:
this.adalService.acquireToken("https://graph.microsoft.com").subscribe(function(token){
this.graphClient = Client.init({
authProvider: (done) => {
done(undefined, token);
}
});
有关Microsoft Graph身份验证的更多详细信息,请参阅以下链接:
根据代码,您使用Azure AD发布的id_令牌调用Microsoft Graph。要调用Microsoft Graph,我们需要使用access_令牌,其受众应为
https://graph.microsoft.com
您需要使用如下代码获取Microsoft Graph的access_令牌:
this.adalService.acquireToken("https://graph.microsoft.com").subscribe(function(token){
this.graphClient = Client.init({
authProvider: (done) => {
done(undefined, token);
}
});
有关Microsoft Graph身份验证的更多详细信息,请参阅以下链接:
好的,现在我了解了
acquireToken()调用中的资源应该是什么。我相应地更改了代码并重试。现在,acquireToken()
调用返回错误:令牌续订操作由于超时而失败。通过查看网络记录器,我可以看到对https://login.microsoftonline.com/myDomain.onmicrosoft.com/oauth2/authorize?response_type=token&...
,但该调用的状态为(已取消)
。有什么想法吗?Adal等待6秒以接收AAD的响应。如果AAD根本不发送响应,或者响应未作为片段发送,adal将取消发出上述错误的请求。请检查网络选项卡(在Chrome的开发者工具中)或fiddler,看看AAD是否返回了对adal请求的响应。adal请求被发送到login.microsoftonline.com并以authorize?开头,这是我看到的(并且已经在我的第一条评论中说明)。唯一尴尬的是时间。它的值总是在220ms到400ms之间。我还尝试了在我的azure门户中声明的graph api端点(即https://graph.windows.net/tenant-GUID
)。这是“我的网络”选项卡中的一个示例。由于我无法重现此问题,您是否介意共享一个可运行的代码示例以帮助重现此问题?您可以将其上载到Github,并请在公开代码示例之前删除敏感信息。好的。我将发布一个示例项目。当它启动并运行时,我会通知您。好的,现在我了解了acquireToken()
调用中的资源应该是什么。我相应地更改了代码并重试。现在,acquireToken()
调用返回错误:令牌续订操作由于超时而失败。通过查看网络记录器,我可以看到对https://login.microsoftonline.com/myDomain.onmicrosoft.com/oauth2/authorize?response_type=token&...
,但该调用的状态为(已取消)
。有什么想法吗?Adal等待6秒以接收AAD的响应。如果AAD根本不发送响应,或者响应未作为片段发送,adal将取消发出上述错误的请求。请检查网络选项卡(在Chrome的开发者工具中)或fiddler,看看AAD是否返回了对adal请求的响应。adal请求被发送到login.microsoftonline.com并以authorize?开头,这是我看到的(并且已经在我的第一条评论中说明)。唯一尴尬的是时间。它的值总是在220ms到400ms之间。我还尝试了在我的azure门户中声明的graph api端点(即https://graph.windows.net/tenant-GUID
)。这是“我的网络”选项卡中的一个示例。由于我无法重现此问题,您是否介意共享一个可运行的代码示例以帮助重现此问题?您可以将其上载到Github,并请在公开代码示例之前删除敏感信息。好的。我将发布一个示例项目。我会通知你的,当它启动和运行。