Microsoft Teams桌面端静态选项卡AAD授权X-Frame-Options报错处理

基于微软Teams官方hello-world-tab示例创建自定义Teams演示应用，为已通过AAD OAuth做安全防护的Azure托管页面新增静态个人选项卡，应用清单对应配置片段如下：

{
  "entityId": "0000002",
  "name": "NameOfApp",
  "contentUrl": "https://nameofapp.azurewebsites.net",
  "websiteUrl": "https://nameofapp.azurewebsites.net",
  "scopes": [
    "personal"
  ]
}

故障现象：浏览器端直接访问应用可以正常完成授权流程，通过Teams桌面客户端打开选项卡时报错，错误信息为：
Refused to display 'https://login.microsoftonline.com/' in a frame because it set 'X-Frame-Options' to 'deny'

AAD官方登录页默认返回X-Frame-Options: deny响应头，禁止页面被嵌入iframe加载。Teams桌面客户端的选项卡内容是在客户端内置webview的iframe容器中渲染的，直接在选项卡内跳转AAD登录地址会被同源安全策略拦截；浏览器端访问时是顶层窗口直接跳转，不会触发该限制，所以可以正常登录。

不要在选项卡的iframe容器内直接触发AAD登录跳转，按照Teams官方认证规范实现登录流程：

• 首先在页面中引入Teams JS SDK，初始化完成后先判断当前页面是否运行在Teams环境中
• Teams环境下触发登录时，调用SDK提供的microsoftTeams.authentication.authenticate()方法，拉起独立的弹窗式webview加载AAD登录地址，这个弹窗是顶层窗口，不会触发X-Frame-Options拦截，可以正常走完账号输入、授权的全流程
• 授权完成后，在重定向的回调页面调用microsoftTeams.authentication.notifySuccess()，把获取到的认证令牌回传给选项卡主页面，完成登录态同步
• 补充配置检查：
  • 在AAD应用注册的单页应用重定向URI列表中，添加你的认证回调页地址
  • 在Teams应用清单的validDomains字段中，添加你自己的Azure站点域名，以及login.microsoftonline.com
  • 修正你现有清单片段里的语法错误：原配置中"personal"后多余的点号要删除，不然清单会校验失败无法安装

注意：不要尝试通过反向代理等方式修改AAD登录页的X-Frame-Options响应头，该配置由微软官方统一控制，没有自定义修改的入口。

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