新版Microsoft Teams标签页中Flutter Web FirebaseAuth(AzureAD/Entra SSO)登录失败求助

我把集成了FirebaseAuth（搭配AzureAD/Entra单点登录）的Flutter Web应用嵌入新版Microsoft Teams标签页，认证代码如下：

final microsoftProvider = MicrosoftAuthProvider();
microsoftProvider.setCustomParameters({'tenant': tenantId});
if (kIsWeb) {
  await _auth.signInWithRedirect(microsoftProvider);
} else {
  await _auth.signInWithProvider(microsoftProvider);
}

因为Teams不允许弹窗，所以用了重定向而非弹窗方式，但登录失败，Teams开发者控制台报错：

Refused to display 'https://login.microsoftonline.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

该应用在常规浏览器中运行正常，说明SSO本身配置没问题。排查后发现新版Teams用的Edge Webview2不允许iframe中的第三方Cookie，导致了这个错误。求问有没有人成功在Teams中实现Firebase+Azure/Entra认证，或者解决该问题的方案？

1. 改用Teams原生SSO获取令牌，再对接Firebase认证 #

Teams提供原生SSO能力，可以先通过Teams JS SDK获取Azure AD的访问令牌，再用这个令牌向Firebase完成认证，绕开iframe内的重定向限制。

步骤如下：

• 在Flutter Web项目的index.html中引入Teams JS SDK：

<script src="https://statics.teams.cdn.office.net/sdk/v1.11.0/js/MicrosoftTeams.min.js"></script>

• 通过Dart调用JS代码获取Azure AD令牌：

import 'dart:js' as js;
import 'dart:async';

Future<String?> getTeamsAzureToken(String tenantId, String azureClientId) async {
  Completer<String?> completer = Completer();
  
  js.context.callMethod('initializeTeams', [() {
    js.context['microsoftTeams'].callMethod('authenticate', [
      {
        'url': 'https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?client_id=${azureClientId}&response_type=token&scope=openid profile email https://www.googleapis.com/auth/firebase',
        'width': 600,
        'height': 535
      },
      (token) => completer.complete(token),
      (error) => completer.completeError(error)
    ]);
  }]);
  
  return completer.future;
}

• 拿到令牌后，用Firebase的signInWithCredential完成认证：

final token = await getTeamsAzureToken(tenantId, azureClientId);
if (token != null) {
  final oauthCredential = OAuthCredential(
    providerId: 'microsoft.com',
    accessToken: token,
  );
  await _auth.signInWithCredential(oauthCredential);
}

2. 配置Azure AD和Firebase的可信域 #

• 在Azure AD应用注册的「认证」页面，添加Teams标签页的重定向URI，格式为https://teams.microsoft.com/auth-callback（如果是自定义标签页则填你的Flutter Web应用域名）
• 在Firebase控制台的「Authentication」→「设置」→「授权域」中，添加teams.microsoft.com以及你的应用域名

3. 调整Teams应用Manifest配置 #

在Teams应用的manifest.json中添加webApplicationInfo字段，让Teams识别应用为可信，放宽Cookie限制：

"webApplicationInfo": {
  "id": "<你的Azure AD应用Client ID>",
  "resource": "https://firebase.googleapis.com"
}

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