Надстройка Outlook пользовательского интерфейса Office, использующая аутентификацию, работает нестабильно - PullRequest
Новая
       57

Надстройка Outlook пользовательского интерфейса Office, использующая аутентификацию, работает нестабильно

2 голосов
/ 27 мая 2020

В настоящее время мы разрабатываем надстройку пользовательского интерфейса Office с использованием React. Надстройка должна установить соединение с серверным API и аутентифицировать пользователя с помощью токенов-носителей. Бэкэнд api защищен Azure AD.

Мы основали наше решение на примере, который предлагает Microsoft: https://github.com/OfficeDev/PnP-OfficeAddins/tree/master/Samples/auth/Office-Add-in-Microsoft-Graph-React Это использует msal. js для аутентификации.

Диалог входа в систему открывается следующим образом: 

await Office.context.ui.displayDialogAsync(dialogLoginUrl, { height: 40, width: 30 }, result => {
      if (result.status === Office.AsyncResultStatus.Failed) {
        displayError(`${result.error.code} ${result.error.message}`);
      } else {
        loginDialog = result.value;
        loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginMessage);
        loginDialog.addEventHandler(Office.EventType.DialogEventReceived, processLoginDialogEvent);
      }
    });

В диалоговом окне выполняется следующий код: 

import { UserAgentApplication } from "msal";
(() => {
  // The initialize function must be run each time a new page is loaded
  Office.initialize = () => {
    const config = {
      auth: {
        clientId: "",
        authority: "",
        redirectUri: "https://localhost:3000/login.html",
        navigateToLoginRequestUrl: false
      },
      cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: false
      }
    };

    const userAgentApp = new UserAgentApplication(config);

    const authCallback = (error, response) => {
      if (!error) {
        if (response.tokenType === "id_token") {
          localStorage.setItem("loggedIn", "yes");
        } else {
          // The tokenType is access_token, so send success message and token.
          Office.context.ui.messageParent(JSON.stringify({ status: "success", result: response.accessToken }));
        }
      } else {
        const errorData = `errorCode: ${error.errorCode}
                                   message: ${error.errorMessage}
                                   errorStack: ${error.stack}`;
        Office.context.ui.messageParent(JSON.stringify({ status: "failure", result: errorData }));
      }
    };

    userAgentApp.handleRedirectCallback(authCallback);
    const request = {
      scopes: ["api://..."]
    };
    if (localStorage.getItem("loggedIn") === "yes") {
      userAgentApp.acquireTokenRedirect(request);
    } else {
      // This will login the user and then the (response.tokenType === "id_token")
      // path in authCallback below will run, which sets localStorage.loggedIn to "yes"
      // and then the dialog is redirected back to this script, so the
      // acquireTokenRedirect above runs.
      userAgentApp.loginRedirect(request);
    }
  };
})();

К сожалению, это не приводит к стабильное дополнение. Диалог аутентификации иногда работает должным образом, а иногда - нет. В Outlook на macOS вроде работает нормально, но в Outlook на Windows обработка обратного вызова не всегда работает правильно. Также в веб-версии Outlook это не работает должным образом.

Вопрос в том, есть ли у кого-то работающее решение с использованием React и msal. js в надстройке Outlook.

...