如何在Microsoft Teams中实现Azure Web App的Easy Auth弹出式授权？

核心原因分析 #

Teams内嵌网页以iframe运行，而Azure AD登录页默认设置X-Frame-Options: deny，禁止在iframe中加载，直接内嵌就会导致页面空白和报错。必须改用Teams弹窗式授权流程，同时调整Easy Auth配置和前端代码适配Teams环境。

具体解决步骤 #

1. 调整Azure Web App的Easy Auth配置 #

• 登录Azure门户，找到目标Web App，进入Authentication（认证）面板
• 在Platform configurations（平台配置）中，添加Teams合法重定向URI：
  • 格式：https://teams.microsoft.com/auth-callback
  • 保留原Web App的重定向URI（如https://<你的WebApp名称>.azurewebsites.net/.auth/login/aad/callback）
• 在Advanced settings（高级设置）里，启用Token store（令牌存储），方便后续获取用户令牌

2. 修改前端代码适配Teams弹窗授权 #

针对AOAI ChatGPT示例项目，替换原有自动登录逻辑，调用Teams JS SDK触发弹窗授权：

• 引入Teams JS SDK：

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

• 初始化SDK并替换登录逻辑：

  microsoftTeams.initialize();
  
  microsoftTeams.getContext(async (context) => {
    microsoftTeams.authentication.authenticate({
      url: `https://<你的WebApp名称>.azurewebsites.net/.auth/login/aad?client_id=<你的AAD客户端ID>&response_type=id_token&redirect_uri=https://teams.microsoft.com/auth-callback`,
      width: 600,
      height: 535,
      successCallback: (result) => {
        window.location.href = `/`; // 授权成功后跳回应用主页
      },
      failureCallback: (reason) => {
        console.error('授权失败:', reason);
      }
    });
  });
  

• 替换代码中的<你的WebApp名称>和<你的AAD客户端ID>为实际值

3. 调整Teams应用清单（manifest.json） #

• 在manifest.json中添加webApplicationInfo字段，指定AAD应用信息：

  "webApplicationInfo": {
    "id": "<你的AAD客户端ID>",
    "resource": "https://<你的WebApp名称>.azurewebsites.net"
  }
  

• 在validDomains中包含Web App域名：

  "validDomains": [
    "<你的WebApp名称>.azurewebsites.net"
  ]
  

4. 测试授权流程 #

• 重新打包Teams应用并上传至Teams
• 打开个人应用时，会触发Teams授权弹窗，而非在iframe中加载登录页
• 登录完成后弹窗关闭，应用主页正常加载

关键注意事项 #

• 确保Azure AD应用已授予Teams相关权限（如User.Read）
• 关闭原Easy Auth的iframe自动跳转逻辑，完全改用Teams SDK触发的弹窗流程
• 优先使用Teams桌面客户端或Web端测试，避免移动端兼容性问题

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