ADAL.js - 使用 id_token 获取 Microsoft Graph 访问令牌 [英] ADAL.js - Obtaining Microsoft Graph Access Token with id_token

问题描述

我正在尝试将 Azure AD 登录和 Graph API 集成到我的 angular2 网站中.

我已成功实现 ADAL 登录和重定向，围绕有用的博客文章

我是新手，所以可能是我的调用本质上是错误的，或者我在 AD 中缺乏某些权限，或者我的应用程序注册缺乏权限.我已经看到我可能需要请求具有足够范围的访问令牌，但我可以找到任何示例.

有没有人使用这个 adalService 库来获取用于 Graph API 的令牌?

解决方案

只是为了让所有人都清楚，这里再次更新端到端解决方案.

如果您没有基本入门代码，请参阅此链接 Adal-JS 教程.这篇文章只涉及所涉及的定制.

第 1 步:配置 AdalService

(仅显示新代码，其他方法保持不变)

导出类 AdalService {公共获取graphAccessToken(){返回 sessionStorage[new AppConstants().User_Graph_Token];}公共retrieveTokenForGraphAPI() {this.context.acquireToken('https://graph.microsoft.com', function (error, graph_token) {如果(错误 || ！graph_token){console.log('发生 ADAL 错误:' + 错误);} 别的 {//在 sessionStorage 中存储令牌sessionStorage[new AppConstants().User_Graph_Token] = graph_token;返回;}}.bind(这个));}}

代码应该有现有的 id_token 回调处理程序和路由中的相应配置.如果没有，请参考上面的链接获取初始代码.

现在要求是在检索到 id_token 后检索 access_token.access_token 有puid"的附加字段，它描述了声明的标识符.这将是第 2 步.

第 2 步:更新 LoginComponent

ngOnInit() {如果(！this.adalService.isAuthenticated){console.log('LoginComponent::Attempting login via adalService');this.adalService.login();} 别的 {如果(this.adalService.accessTokenForGraph == null){console.log('LoginComponent::Login 有效，正在尝试检索图形令牌');this.adalService.retrieveTokenForGraphAPI();}}

现在令牌被检索并存储以供以后使用.

第 3 步:更新access_token"回调的路由

类似于 'id_token' 回调，我们需要为 access_token 添加额外的回调路由.回调组件将保持不变.他们的代码如主链接中所述.请注意，*access_token" 端点是 MS 提供的，因此请注意不要更改名称.

 { 路径:'access_token'，组件:OAuthCallbackComponent，canActivate:[OAuthCallbackHandler] }，{ 路径:'id_token'，组件:OAuthCallbackComponent，canActivate:[OAuthCallbackHandler] }

第 4 步:在需要的地方使用令牌

const bearer = this.adalService.graphAccessToken();

I am attempting to integrate Azure AD login and Graph API into my angular2 website.

I have successfully implemented an ADAL login and redirect, built around a useful blog post here

From this I retrieved an id_token parameter that my adalservice can access. Currently this is acheived through a simple context.login() and catching the token in the redirect.

When I use this token to try and access Microsoft Graph, I receive an InvalidAuthenticationToken response stating Access Token validation failure.

I'm new to this stuff, so it could be that my call is intrinsically wrong, or that I lack certain permissions in AD, or my app reg lacks permissions. I've seen that I potentially need to request an access token with sufficient scope, yet I can find any examples of this.

Has anyone used this adalService library to obtain tokens for use with Graph API?

解决方案

Just to have a clarity for all, updating the end to end solution here again.

In case you do not have the base starter code, refer to this link Adal-JS Tutorial. This post only concerns with the customization involved.

Step 1: Configure the AdalService

(only new code is shown, other methods remain as it is)

export class AdalService {

    public get graphAccessToken() {
        return  sessionStorage[new AppConstants().User_Graph_Token];
    }

    public retrieveTokenForGraphAPI() {
        this.context.acquireToken('https://graph.microsoft.com', function (error, graph_token) {

            if (error || !graph_token) {
                console.log('ADAL error occurred: ' + error);
            } else {
                // Store token in sessionStorage
                sessionStorage[new AppConstants().User_Graph_Token] = graph_token;
                return;
            }
        }.bind(this)
        );
    }
 }

The code should have existing handlers for id_token callback and corresponding configuration in the routing. If not, please refer to link above for the initial code.

Now the requirement is retrieve the access_token once the id_token is retrieved. The access_token has additional field for "puid" which describes identifier for claims. This will be the step 2.

Step 2: Update LoginComponent

ngOnInit() {
    if (!this.adalService.isAuthenticated) {
      console.log('LoginComponent::Attempting login via adalService');
      this.adalService.login();
    } else {
      if (this.adalService.accessTokenForGraph == null) {
        console.log('LoginComponent::Login valid, attempting graph token retrieval');
        this.adalService.retrieveTokenForGraphAPI();
      }
   }

Now the token is retrieved and stored for later use.

Step 3: Update Routing for 'access_token' callback

Similar to the 'id_token' callback, we need to add additional callback route for the access_token. The callback components will remain same. Their code is as described in the main link. Note that *access_token" endpoint is MS provided, hence be careful not to change the name.

  { path: 'access_token', component:  OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] },
  { path: 'id_token', component: OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] }

Step 4: Use the token wherever required

const bearer = this.adalService.graphAccessToken();

这篇关于ADAL.js - 使用 id_token 获取 Microsoft Graph 访问令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！