MS Teams无需配置Valid Domain使用window.open打开弹窗的关闭问题

方案1：统一中转页适配Teams原生认证API（优先推荐） #

仅需将你自己的业务域名提前1次加入Valid Domain列表即可适配所有第三方授权需求，全程走Teams官方认证流程，无需手动管理窗口开关。

SPA调用认证代码 #

microsoftTeams.initialize(() => {
    // 对目标第三方授权地址做URL编码后传给中转页
    const targetAuthUrl = encodeURIComponent(ds['Url'])
    microsoftTeams.authentication.authenticate({
        // 此处的中转页域名仅需加入一次Valid Domain即可
        url: `https://你的自有业务域名/auth-transit?target=${targetAuthUrl}`,
        width: 600,
        height: 400,
        successCallback: function(result) {
            // 处理授权成功逻辑
        },
        failureCallback: function (reason) {
          window.location.reload();
        }
    });
});

中转页逻辑代码 #

// 中转页加载后直接跳转至目标第三方授权地址
const targetUrl = new URLSearchParams(window.location.search).get('target')
if (targetUrl) {
    window.location.href = decodeURIComponent(targetUrl)
}

授权回调页逻辑代码 #

第三方授权完成后跳转至你自有域名下的回调页，调用官方API通知Teams关闭弹窗：

microsoftTeams.initialize(() => {
    // 校验授权结果成功后调用
    microsoftTeams.authentication.notifySuccess(授权结果数据)
    // 若授权失败则调用 microsoftTeams.authentication.notifyFailure(错误信息)
})

方案2：window.open模式下手动管理窗口 #

如果你坚持使用window.open自行实现弹窗逻辑，可通过保存窗口实例+跨域消息通信实现关闭控制：

SPA侧代码 #

// 保存弹出窗实例
const authWindow = window.open(ds['Url'], 'authWindow', 'width=600,height=400')

// 监听授权完成的回调消息
window.addEventListener('message', (e) => {
    // 安全校验：仅接收自有域名发出的消息
    if (e.origin !== 'https://你的自有业务域名') return
    if (e.data.type === 'AUTH_SUCCESS' || e.data.type === 'AUTH_FAILED') {
        // 手动关闭弹出窗
        authWindow?.close()
        // 处理对应授权结果逻辑
    }
})

授权回调页代码 #

第三方授权完成后跳转的自有域名回调页中加入以下逻辑：

window.addEventListener('load', () => {
    const message = {
        type: 'AUTH_SUCCESS',
        data: 授权结果数据
    }
    if (window.opener) {
        // 向父窗口发送消息
        window.opener.postMessage(message, 'https://你的SPA域名')
        // 主动关闭当前弹窗
        window.close()
    }
})

注意事项：

• 两种方案都无需录入所有第三方服务域名，仅需将自有业务域名加入Valid Domain列表一次即可
• 优先选择原生API方案，符合Teams开发规范，桌面端、网页端、移动端兼容性更强，不会出现权限拦截问题
• 所有跨域消息传递场景必须增加origin校验，避免安全漏洞

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