Azure Web App嵌入Microsoft Teams时的X-Frame-Options授权报错求助

问题原因 #

你遇到的X-Frame-Options: deny错误，本质是Azure AD默认登录页面禁止被iframe嵌入，而你的Web应用依赖的App Service Easy Auth（/.auth/系列端点）在未授权时会自动重定向到该登录页，这个跳转在Teams的iframe环境中被浏览器拦截。仅添加允许域无法解决，因为限制是Azure AD登录页本身的安全设置。

可行解决办法 #

1. 采用Teams SSO授权（推荐方案） #

利用Teams已有的用户上下文，通过Teams JS SDK直接获取身份令牌，跳过Azure AD登录页跳转：

• 在Azure AD中注册Teams应用时，配置SSO权限（如User.Read），确保重定向URI包含你的Web应用域名。
• 前端集成Teams JS SDK，调用microsoftTeams.authentication.getAuthToken()获取令牌。
• 将令牌传给后端（或直接携带令牌调用/.auth/me接口）完成身份验证。

2. 修改Easy Auth登录行为为弹出窗口 #

通过独立弹出窗口完成登录，绕过iframe限制：

• 在Azure App Service的身份验证设置中，将“登录行为”改为“允许匿名访问（无操作）”，避免自动重定向。
• 修改你的getUserInfo函数，未授权时打开登录弹出窗口，登录完成后刷新页面：

export async function getUserInfo(): Promise<UserInfo[]> {
  const response = await fetch("/.auth/me");

  if (!response.ok) {
    const loginWindow = window.open("/.auth/login/aad", "_blank", "width=600,height=600");
    if (loginWindow) {
      const checkClosed = setInterval(() => {
        if (loginWindow.closed) {
          clearInterval(checkClosed);
          window.location.reload();
        }
      }, 1000);
    }
    console.log("需要登录，已打开登录窗口。");
    return [];
  }

  const payload = await response.json();
  return payload;
}

3. 配置Azure AD应用允许iframe嵌入（不推荐，存在安全风险） #

在Azure AD应用注册的身份验证页面：

• 启用“允许公共客户端流”。
• 在“隐式授权和混合流”中勾选ID令牌和访问令牌。
• 添加你的Web应用回调地址（如https://your-app.azurewebsites.net/.auth/login/aad/callback）到重定向URI。
  注意：此方法可能仍被Azure AD的安全策略限制，仅作为临时测试方案。

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