从Microsoft Graph调用InvalidAuthenticationToken

Question

我正在使用Azure托管的Web应用程序，它使用Microsoft Graph API使用公司帐户电子邮件登录用户。现在，我想阅读登录用户并将其显示在我的视图中，但是，我遇到了InvalidAuthenticationToken错误。

AuthHelper.ts：

import { Injectable } from "@angular/core";
import { SvcConsts } from "../service/svcConsts";
import { HttpModule } from "@angular/http";
import { HttpClientModule } from "@angular/common/http";

@Injectable()
export class AuthHelper {
  //function to parse the url query string
  private parseQueryString = function(url) {
    var params = {},
      queryString = url.substring(1),
      regex = /([^&=]+)=([^&]*)/g,
      m;
    while ((m = regex.exec(queryString))) {
      params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }
    return params;
  };
  private params = this.parseQueryString(location.hash);
  public access_token: string = null;

  constructor() {
    //check for id_token or access_token in url
    if (this.params["id_token"] != null) this.getAccessToken();
    else if (this.params["access_token"] != null) this.access_token = this.params["access_token"];
  }

  login() {
    //redirect to get id_token
    window.location.href =
      "https://login.microsoftonline.com/" +
      SvcConsts.TENANT_ID +
      "/oauth2/authorize?response_type=id_token&client_id=" +
      SvcConsts.CLIENT_ID +
      "&redirect_uri=" +
      encodeURIComponent(window.location.href) +
      "&state=SomeState&nonce=SomeNonce";
  }

  private getAccessToken() {
    //redirect to get access_token
    window.location.href =
      "https://login.microsoftonline.com/" +
      SvcConsts.TENANT_ID +
      "/oauth2/authorize?response_type=token&client_id=" +
      SvcConsts.CLIENT_ID +
      "&resource=" +
      SvcConsts.GRAPH_RESOURCE +
      "&redirect_uri=" +
      encodeURIComponent(window.location.href) +
      "&prompt=none&state=SomeState&nonce=SomeNonce";
  }
}

SvsConsts.ts：

export class SvcConsts {
  public static CLIENT_ID: string = "my client id here";
  public static TENANT_ID: string = "mydomain.azurewebsites.net";
  public static GRAPH_RESOURCE: string = "https://graph.microsoft.com";
}

HomeComponents.ts：

import { Component } from "@angular/core";
import { Http, Headers } from "@angular/http";
import { AuthHelper } from "../service/AuthHelper";
import { HttpModule } from "@angular/http";
import { HttpClientModule } from "@angular/common/http";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html"
})
export class HomeComponent {
  private users: any;
  private userPrincipalName: any;

  constructor(http: Http, authHelper: AuthHelper) {
    // Perform REST call into Microsoft Graph for files on GraphAPI
    http
      .get("https://graph.microsoft.com/v1.0/me/", {
        headers: new Headers({
          Authorization: "Bearer { access_token }",
          "Content-Type": "application/json" + authHelper.access_token
        })
      })

      .subscribe(res => {
        // Check the response status before trying to display files

        if (res.status === 200) this.users = res.json().value;
        else alert("An error occurred calling the Microsoft Graph: " + res.status);
      });
  }
}

我计划使用userPrincipalName中的Home.Component.html属性进行显示，但是，我遇到了该错误。我遵循了Graph GitHub存储库提供的示例，并遵循了其网站上的文档。您能帮我为什么我会收到此错误吗？

下面是我在Azure AD管理工具上拥有的权限的屏幕截图。

请帮助。

Answer 1

我认为您可能希望使用Microsoft Graph代表用户读取和写入资源。读取您的代码，发现登录功能中存在一些错误。
若要获取访问令牌，应将用户重定向到Azure AD v2.0 /authorize终结点。URL应如下所示：

https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?
client_id={your client_id}&response_type=code 
&redirect_uri={current_url}&response_mode=query
&scope={you want the right }&state=12345


//Please check your parameters,such as response_type,response_mode

当您从用户那里获得授权时，响应将在code参数中包含授权代码。然后，您可以使用此代码获取请求的访问令牌，网址应如下所示：

POST /common/oauth2/v2.0/token HTTP/1.1
Host: https://login.microsoftonline.com
Content-Type: application/x-www-form-urlencoded

client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&scope=user.read%20mail.read
&code=OAAABAAAAiL9Kn2Z27UubvWFPbm0gLWQJVzCTE9UkP3pSx1aXxUjq3n8b2JRLk4OxVXr...
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&grant_type=authorization_code
&client_secret=JqQX2PNo9bpM0uEihUPzyrh    // NOTE: Only required for web apps

然后，响应在scope参数中包含访问令牌适合的权限列表。
我认为您的网址有误，可以为您的请求更改一些参数。
参考文档在这里：https://developer.microsoft.com/en-us/graph/docs/concepts/auth_v2_user
如果您认为我的答案对您有帮助，请将我标记为答案。谢谢。

Answer 2

能否给我请求网址和响应？
我认为您需要在HomeComponent的构造函数中调用login函数。您可能需要在此构造函数中更改请求。
以及类似HomeComponent的构造函数：

constructor(http: Http, authHelper: AuthHelper{
console.log(authHelper.access_token);
authHelper.login();
http.get("https://graph.microsoft.com/v1.0/me/", {  
  headers: new Headers({
    "Authorization": "Bearer "+ authHelper.access_token,
     "Content-Type": "application/json" })
})}