Быстрое автоматическое закрытие всплывающих окон при использовании аутентификации в вложенных приложениях (NAA)

Я пытаюсь реализовать аутентификацию вложенного приложения, чтобы переключить свой надстройку Outlook от использования устаревших токенов Exchange. Мне удается получить действительный токен графического API, но только с некоторыми недостатками пользовательского опыта при использовании браузера.

При использовании Chrome, если пользователь выходит из системы, а затем снова входит, когда он пытается снова использовать надстройку, он не получает токен тихо и вместо этого получает быстрое всплывающее окно, которое автоматически закрывается, и он получает токен. На последующих электронных письмах токен получается тихо.

Это нормальное поведение? Кажется, что в этом случае они должны иметь возможность получить токен тихо, так как они уже дали согласие на необходимые разрешения. (Это также может привести к тому, что они вообще не смогут получить токен, если браузер блокирует это быстрое всплывающее окно. Это больше проблема с Firefox, где по какой-то причине мы видим 2 всплывающих окна вместо 1 и иногда получаем всплывающее окно, замороженное открытым и пустым, не уверены, связано ли это с чем-то или нет). Рассматриваем, стоит ли нам обратить внимание на метод, не основанный на NAA, чтобы избежать этих проблем.

Я не вижу этого быстрого всплывающего окна при использовании Outlook Desktop для Mac, там все работает прекрасно.

export const getMsalConfig = (instance: string): Configuration => {
  let config =  {
    auth: {
      clientId: getClientId(instance),
      authority: "https://login.microsoftonline.com/common",
      redirectUri: "https://localhost:3000/auth.html",
      postLogoutRedirectUri: "https://localhost:3000/auth.html",
    },
    cache: {
      cacheLocation: "localStorage",
    },
    system: {},
  };

export default function App({ isOfficeInitialized }: Props) {

  const [msalInstance, setMsalInstance] = React.useState<IPublicClientApplication>();

  useEffect(() => {
    createNestablePublicClientApplication(getMsalConfig(instance))
      .then(res => {
        setMsalInstance(res);
      }).catch(error => {
      console.error(error);
    });

  }, [instance])

  return (
    <>
    {msalInstance &&
    <MsalProvider instance={msalInstance}>
    <AppErrorBoundary>
      <GlobalStyle />
        <Root>
          ... <DoThing>
        </Root>
    </AppErrorBoundary>
    </MsalProvider>
}</>
  );
}

export default function DoThing({}: Props) {

  const accountIdentifiers = {
    username: "[email protected]" // TODO genericify
  }
  const request = {
    loginHint: "[email protected]",
    scopes: ["User.Read", "Mail.ReadWrite.Shared"]
  }

  const useMsalResult = useMsal();
  const msalInstance = useMsalResult['instance'];
  // @ts-ignore
  const inProgress = useMsalResult['inProgress'];
  // @ts-ignore
  const isAuthenticated = useIsAuthenticated();

  // @ts-ignore
  const {login, error } = useMsalAuthentication(InteractionType.Silent, request, accountIdentifiers);


  const doAction = async () => {
    // Код здесь получает ewsToken, который мы в настоящее время используем

    // Попробуйте получить токен графического API
    let graphApiToken = null;
    let graphApiError = null;
    try {
      const account = msalInstance.getActiveAccount();
      if (!account) {
        throw Error("Нет активной учетной записи");
      }

      const tokenRequest = {
        scopes: ["User.Read", "Mail.ReadWrite.Shared"],
        account: account
      };
      const tokenResponse = await msalInstance.acquireTokenSilent(tokenRequest);
      graphApiToken = tokenResponse.accessToken;
    } catch ($error) {
      graphApiError = error ?? new Error("Не удалось получить токен графического API тихо");
      console.error(graphApiError.message);
    }

    // Если мы не получили токен графического API тихо и не получили ewsToken, мы постараемся более громко
    // получить токен графического API
    try {
      if (!restToken && !graphApiToken) {
        if (inProgress == InteractionStatus.None) {
          try {
            await login(InteractionType.Popup, request);
          } catch (popupError) {
            if (popupError.errorCode === "popup_window_error") {
              throw new Error("Всплывающее окно заблокировано браузером. Пожалуйста, разрешите всплывающие окна и попробуйте снова.");
            }
          }
        } else {
          console.error("взаимодействие уже в процессе");
        }

        try {
          const account = msalInstance.getActiveAccount();
          if (!account) {
            throw Error("Нет активной учетной записи");
          }

          const tokenRequest = {
            scopes: ["User.Read", "Mail.ReadWrite.Shared"],
            account: account
          };
          const tokenResponse = await msalInstance.acquireTokenSilent(tokenRequest);
          graphApiToken = tokenResponse.accessToken;
        } catch ($error) {
          graphApiError = error;
          console.error(graphApiError.message);
          throw graphApiError;
        }
      }

    } catch (error) {
      graphApiError = error ?? new Error("Не удалось получить токен графического API");
    }

    if (!ewsToken && !graphApiToken) {
      onError({
        context: 'Невозможно обработать это сообщение.',
        error:
          ewsError ??
          graphApiError ??
          new Error(
            'Нет поддержки API для получения токена обратного вызова в этой среде.'
          ),
      });
      return;
    }
  }

  useEffect(() => {
    if (!!msalInstance) {
      doAction();
    }
  }, [msalInstance]); 

  return <Root>{// некоторые компоненты здесь}</Root>;
}