Ошибки токена при использовании msgraph-sdk-javascript с аутентификатором office-js-helpers

Question

У меня есть надстройки для Outlook, использующие React + TypeScript, локально отлаживаемые с помощью Node.js. Я использую библиотеку office-js-helpers для аутентификации и клиентскую библиотеку Graph msgraph-sdk-javascript. Как POC, я просто пытаюсь проверить, могу ли я успешно позвонить в Graph, получая информацию о текущем письме по его идентификатору. Я могу успешно использовать Authenticator office-js-helpers для авторизации приложения и успешного получения токена.

Тем не менее, когда я использую клиент Graph, чтобы позвонить v1/me/messages/{ID}, Я получил:

"401 InvalidAuthenticationToken: сбой проверки токена доступа"

Я не уверен, является ли это проблемой с тем, как я использую Authenticator, или проблемой с моей надстройкой или манифестами приложения. Моя надстройка использует их для AppDomains:

<AppDomains>
  <AppDomain>https://localhost:3000</AppDomain>
  <AppDomain>https://login.microsoftonline.com</AppDomain>
</AppDomains>

я использую https://localhost:3000 как URI перенаправления моего приложения с включенной неявной аутентификацией.

Если я использую опцию force с методом authenticate, я также получаю эту ошибку:

Не удалось выполнить "postMessage" в "DOMWindow": предоставленный целевой источник (" https://login.microsoftonline.com/") не соответствует источнику окна получателя (" https://localhost:3000/").

Тем не менее, я могу получить токен.

Что я делаю неправильно? Я не уверен насчет потока для Аутентификатора, с точки зрения того, когда использовать authenticator.tokens.get а также authenticator.authenticate, Для первого запуска я предполагаю, всегда проверять подлинность и не нужно использовать tokens.getи для второго запуска я предполагаю просто использовать tokens.get, но если я попробую любой из них или всегда оба, это, кажется, не изменит результат неправильного токена.

import * as React from "react";
import { Button, ButtonType, TextField } from "office-ui-fabric-react";
import { Authenticator, Utilities, DefaultEndpoints } from "@microsoft/office-js-helpers";
import * as Graph from "@microsoft/microsoft-graph-client";

export default class GetItemOJSHelpers extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.getEmail = this.getEmail.bind(this);
    this.callGraph = this.callGraph.bind(this);
    this.getItemRestId = this.getItemRestId.bind(this);

    this.state = { graphResponse: "", accessToken: "" };
    console.log("====GetItemOJSHelpers loaded");
  }

  getEmail() {
    console.log("====getEmail(): Entered ");

    //debugger;
    // Get the access token and create a Microsoft Graph client
    let authenticator = new Authenticator();

    // register Microsoft (Azure AD 2.0 Converged auth) endpoint
    authenticator.endpoints.registerMicrosoftAuth("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", {
      redirectUrl: "https://localhost:3000/index.html",
      scope: "Mail.ReadWrite User.Read User.ReadBasic.All"
    });

    console.log("====getEmail(): Getting token");

    let authObject = authenticator.tokens.get("Microsoft");
    let accessToken = authObject.access_token;

    if (accessToken !== null) {
      console.log(`====getEmail(): Current cached token: ${accessToken}`);
      this.callGraph(accessToken);
      return;
    } else {
      // for the default Microsoft endpoint
      //If the user, rejects the grant to the application then you will receive an error in the catch function.
      authenticator
        .authenticate(DefaultEndpoints.Microsoft)
        .then(function(token) {
          /* Microsoft Token */
          console.log(`====getEmail(): Authenticated; auth token: ${token.access_token}`);
          accessToken = token.access_token;
        })
        .catch(function(error) {
          //debugger;
          console.log("====getEmail(): authenticate error");
          Utilities.log(error);
          throw new Error("Failed to login using your Office 365 Account");
        });
    }

    console.log(`====getEmail(): Current token: ${accessToken}`);
    this.callGraph(accessToken);
  }

  callGraph(token) {
    // Get the item's REST ID
    let itemId = this.getItemRestId();
    console.log(`====callGraph(): itemId ${itemId}`);

    const client = Graph.Client.init({
      authProvider: done => {
        done(null, token); //first parameter takes an error if you can't get an access token
      },
      debugLogging: true
    });

    client
      .api("me/messages/" + itemId)
      .version("v1.0")
      .get()
      .then(function(item) {
        //debugger;
        console.log("Email " + item.Subject + " retrieved!!!");
      })
      .then(function() {
        console.log("====callGraph(): complete");
        //debugger;
      })
      .catch(err => {
        //debugger;
        //403 Forbidden! code: "ErrorAccessDenied", message: "Access is denied. Check credentials and try again."
        //Also 401 InvalidAuthenticationToken: Access token validation failure.
        console.log(`====callGraph(): error! ${err.statusCode}:'${err.code}': ${err.message}`);
      });
  }

  getItemRestId() {
    if (Office.context.mailbox.diagnostics.hostName === "OutlookIOS") {
      // itemId is already REST-formatted
      return Office.context.mailbox.item.itemId;
    } else {
      // Convert to an item ID for API v2.0
      return Office.context.mailbox.convertToRestId(
        Office.context.mailbox.item.itemId,
        Office.MailboxEnums.RestVersion.v2_0
      );
    }
  }
  render() {
    return (
      <div>
        <Button
          id="getEmailButton"
          className="ms-welcome__action ms-bgColor-red"
          buttonType={ButtonType.primary}
          onClick={this.getEmail}
        >
          Call Graph
        </Button>
        <div>
          <h3> Access Token </h3>
          <TextField id="accessToken" />
        </div>
        <div>
          <h3>Graph API Call Response</h3>
          <TextField id="graphResponse" />
        </div>
      </div>
    );
  }
}