Teams Tab应用在Outlook移动端出现SSO令牌获取失败问题

问题背景 #

基于OfficeDev/TeamsFx-Samples的hello-world-tab-with-backend示例构建的Teams Tab应用，在Teams全平台（网页/桌面/移动端）、Outlook网页版和桌面版均正常运行，但在Outlook移动端使用useTeamsUserCredential获取SSO令牌失败，错误表现为认证弹窗无法正常加载或返回令牌获取失败提示。

修复步骤 #

1. 补全Azure AD应用的Outlook移动端重定向URI #

Outlook移动端的SSO流程需要特定格式的重定向URI，需在Azure AD应用注册中添加：

• 登录Azure门户→应用注册→找到你的应用→认证→平台配置
• 添加重定向URI：https://outlook.office.com/owa/{你的应用ID}/auth-callback.html（替换{你的应用ID}为实际Azure AD应用客户端ID）
• 勾选该URI对应的"ID令牌"和"访问令牌"权限，保存配置

2. 调整SSO令牌获取逻辑适配移动端 #

Outlook移动端WebView限制了自动弹窗触发，需添加手动登录触发的错误处理：

import { useTeamsUserCredential, TeamsUserCredential } from '@microsoft/teamsfx-react';

const fetchToken = async () => {
  const credential = useTeamsUserCredential();
  try {
    const tokenResult = await credential.getToken('https://graph.microsoft.com/User.Read');
    // 后续令牌使用逻辑
  } catch (err) {
    // 针对Outlook移动端的登录触发处理
    const isOutlookMobile = navigator.userAgent.includes('Outlook-iOS') || navigator.userAgent.includes('Outlook-Android');
    if (err.name === 'UserLoginRequiredError' && isOutlookMobile) {
      const mobileCredential = new TeamsUserCredential();
      await mobileCredential.login(['https://graph.microsoft.com/User.Read']);
      const tokenResult = await mobileCredential.getToken('https://graph.microsoft.com/User.Read');
      // 后续令牌使用逻辑
    } else {
      throw err;
    }
  }
};

3. 验证环境与依赖版本 #

• 将Outlook移动端更新至最新版本，旧版本WebView存在SSO兼容性问题
• 升级TeamsFx相关依赖到最新稳定版：

npm update @microsoft/teamsfx @microsoft/teamsfx-react

4. 排查网络与权限 #

• 确认设备网络无代理或防火墙拦截，保证认证请求能正常访问Azure AD端点
• 检查Outlook应用是否被授予网络访问权限

说明 #

虽然跨平台认证流程设计上保持一致，但不同客户端的WebView实现存在差异，尤其是移动端环境，需针对性调整配置和代码逻辑以适配。

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