React开发Microsoft Teams Tab OAuth2登录后跨域DOMException报错求解

Uncaught DOMException: Blocked a frame with origin "https://backend-External-Server.com" from accessing a cross-origin frame.
该报错核心原因是Teams的Tab页面默认运行在iframe沙箱中，你直接在当前iframe（_self目标）跳转第三方OAuth登录页，第三方登录完成后的重定向页面存在访问顶层/父级frame的逻辑，触发了浏览器跨源资源访问限制。
已有有效token时无异常是因为不需要触发OAuth跳转流程，自然不会触发跨源frame访问限制。

• 第一步：替换直接跳转的登录逻辑，改用Teams SDK提供的专用认证接口
  首先安装Teams JS SDK（如果还未安装）：
  npm install @microsoft/teams-js
  修改Login页面代码：

import React, { useEffect } from "react";
import "./Login.css";
import { Authentication } from "../app/services/AuthService/auth";
import * as microsoftTeams from "@microsoft/teams-js";

export default function Login() {
  const auth = new Authentication();
  
  // 初始化Teams SDK
  useEffect(() => {
    microsoftTeams.initialize();
  }, []);

  const handleLogin = async () => {
    try {
      // 调用Teams认证弹窗接口
      const result = await microsoftTeams.authentication.authenticate({
        url: auth.getLoginUrl(),
        width: 600,
        height: 535,
      });
      // 认证成功后处理token存储，跳转到业务页
      window.location.href = auth.PathToRedirect;
    } catch (error) {
      // 认证失败处理逻辑
      console.error("登录失败", error);
    }
  };

  return <div className="center-screen">
    <div className="row">
      <span className="column">You'll need to sign in to use this app.</span>      
    </div>
    <div className="row">
      <span className="column"> <input type="button" value="Sign in" className="button" onClick={handleLogin} /> </span>
    </div>
  </div>;
}

• 第二步：修改AppRedirect回调页逻辑
  认证完成后不需要在回调页做路由跳转，而是通知父窗口认证结果并关闭弹窗：

import React, { useState, useEffect } from "react";
import { Authentication } from "../app/services/AuthService/auth";
import Spinner from "../app/services/Common/spinner";
import * as microsoftTeams from "@microsoft/teams-js";

export default function AppRedirect() {  
 let auth: Authentication = new Authentication();
 const [valid, setValid] = useState(false);
 
 useEffect(() => {
  microsoftTeams.initialize();
  if (!valid) {
      getToken();
  }
}, []);

const getToken = async () => {
    var valid = await auth.redirectCallBack();
    setValid(valid);
    if (valid) {
      // 通知父窗口认证成功，可传递token等参数
      microsoftTeams.authentication.notifySuccess();
    } else {
      // 通知父窗口认证失败
      microsoftTeams.authentication.notifyFailure("认证失败");
    }
  };
  
  return <div><Spinner/></div>; 
}

• 第三步：补充Teams应用配置
  在你的Teams应用清单manifest.json中，把第三方后端域名https://backend-External-Server.com和你的Azure App Service域名都加入validDomains列表，确保Teams允许相关域名的访问。
  同时在第三方OAuth服务的允许重定向URI配置中，确保AppRedirect对应的页面地址已经被添加到白名单中。

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