Teams网页端使用teamsjs-v2+Auth0认证时LocalStorage不共享问题排查

问题根源 #

网页版Teams和Windows客户端的运行环境存在核心差异，导致localStorage行为不同：

• 网页版Teams的iframe隔离机制：你的应用被嵌入在Teams网页端的嵌套iframe中，authentication.authenticate打开的认证弹窗虽与主应用域名一致，但Teams的沙箱安全策略会让弹窗与主应用iframe处于独立的存储上下文，二者localStorage完全隔离，无法直接共享数据。
• Windows客户端的WebView环境：Windows版Teams基于Electron构建，应用和认证弹窗运行在同一个WebView容器里，存储上下文共享，因此localStorage能正常互通。

解决办法 #

不要依赖localStorage跨iframe共享，改用Teams官方认证回调机制传递令牌，或切换到SSO方案：

1. 通过认证回调传递令牌（最直接修复）

弹窗完成Auth0认证后，不直接存localStorage，而是用microsoftTeams.authentication.notifySuccess()将令牌传递回主应用，主应用在successCallback中接收并存储。

弹窗页面（认证完成后）代码：

import * as microsoftTeams from '@microsoft/teams-js';

// 必须先初始化Teams SDK
microsoftTeams.initialize();

// 假设已从Auth0获取到令牌
const authToken = 'your-auth0-token-here';
// 将令牌传递回主应用
microsoftTeams.authentication.notifySuccess(authToken);

主应用代码修改：

import * as microsoftTeams from '@microsoft/teams-js';

microsoftTeams.authentication.authenticate({
    url: window.location.origin + '/teams/login/start',
    width: 450,
    height: 800,
    successCallback: (token: string) => {
        // 主应用自行将令牌存储到localStorage
        localStorage.setItem('auth0_token', token);
        console.log('认证成功，令牌已存储');
        // 执行后续业务逻辑
    },
    failureCallback: (reason: any) => {
        console.error('认证失败:', reason);
    },
} as microsoftTeams.authentication.AuthenticatePopUpParameters);

2. 切换到Teams SSO认证（长期合规方案）

利用Teams JS v2的SSO能力，直接通过Teams获取用户身份凭证，再与Auth0集成，完全规避跨iframe存储问题。该方案需配置Azure AD与Auth0的联合认证，让Teams身份能直接在Auth0中生效。

注意事项 #

• 弹窗页面必须先调用microsoftTeams.initialize()，否则notifySuccess无法与主应用正常通信。
• 网页版Teams的iframe隔离是浏览器安全级限制，无法通过修改域名或配置突破，必须遵循官方回调机制传递数据。

内容的提问来源于stack exchange，提问作者Danie