Microsoft Teams自定义应用登录弹窗异常：登录后会话仅在弹窗生效

核心问题 #

当前登录流程缺少两个关键环节，导致主窗口无法感知登录完成：

• 登录弹窗完成SSO后，未通知Teams主窗口登录成功
• 主窗口在登录流程结束后，未主动更新会话状态

具体修正步骤 #

1. 在登录页面（/loginUrl）添加登录成功通知 #

登录页面完成Azure AD SSO验证后，必须调用Teams JS SDK的notifySuccess方法，告知主窗口登录流程已完成：

// 登录页面的关键代码
import * as microsoftTeams from "@microsoft/teams-js";

// 确保已初始化SDK（若未添加则补充）
microsoftTeams.initialize();

// 在Azure AD登录成功的回调逻辑中执行：
microsoftTeams.authentication.notifySuccess();

这一步会让主窗口中authenticate方法的Promise从pending变为resolved，触发后续的状态更新逻辑。

2. 主窗口在登录完成后主动更新状态 #

修改当前的登录按钮点击逻辑，在await authenticate之后，添加会话状态刷新操作，比如重新获取用户信息、更新React组件状态：

onClick={
  isDisplayedInTeams()
    ? async (): Promise<void> => {
        try {
          await microsoftTeams.authentication.authenticate({
            url: "/loginUrl",
            width: 600,
            height: 555,
            isExternal: true,
          });
          // 登录成功后主动刷新用户状态
          await fetchCurrentUserProfile(); // 替换为你的用户信息获取API
          setUserLoggedIn(true); // 更新React状态，触发组件重新渲染
        } catch (error) {
          console.log("Application could not connect in Teams : ", error);
        }
      }
    : (): void => {
        window.open("/loginUrl", "_self");
      }
}

为什么刷新后能正常登录？ #

刷新页面时，浏览器会重新读取登录后写入的会话Cookie，重新初始化应用并加载用户状态——这相当于手动触发了状态更新，但正常流程应该通过SDK通知+主动更新完成，无需用户手动操作。

内容的提问来源于stack exchange，提问作者FE-P