Teams应用：Azure AD认证成功后弹窗无法自动关闭

问题出在认证成功后的页面没有调用Teams SDK的authentication.notifySuccess()方法来通知主应用完成认证，导致弹窗无法自动关闭，主应用的then回调也无法触发。以下是具体的优化方案：

核心原理 #

Teams的authentication.authenticate()方法依赖认证弹窗内的页面主动调用SDK的通知方法，告知主应用认证结果（成功/失败），只有这样弹窗才会自动关闭，同时触发主应用的对应回调。

具体实现步骤 #

1. 创建认证结果处理页面
   新建一个专门的页面（比如auth-completed.html），在页面中引入Teams JS SDK并调用notifySuccess：

   <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js"></script>
   <script>
     // 初始化Teams SDK
     microsoftTeams.initialize();
     
     // 获取认证结果（可从URL参数、localStorage或Cookie中提取，根据你的认证流程调整）
     const authResult = {
       token: document.cookie.match(/authToken=([^;]+)/)?.[1] || ''
     };
     
     // 通知主应用认证成功，弹窗将自动关闭
     microsoftTeams.authentication.notifySuccess(authResult);
   </script>
   

2. 配置Azure AD重定向目标
   在Azure AD应用注册的重定向URI中，将登录成功后的跳转地址设置为上述处理页面的完整URL（比如https://your-app-domain/auth-completed.html）。如果使用Azure App Service/Easy Auth，需要在服务配置中设置登录后重定向到该页面。

3. 更新Teams应用清单
   将处理页面的域名添加到Teams应用manifest的validDomains数组中，确保Teams允许该页面调用SDK：

   "validDomains": [
     "your-app-domain",
     // 其他已有的域名
   ]
   

原代码的调整说明 #

你的现有代码无需大幅修改，只要确保认证流程最终跳转到上述处理页面即可。当处理页面调用notifySuccess后，主应用的then回调会收到你传入的authResult，同时弹窗自动关闭，console.log("Got a result", result)也会正常触发。

额外注意事项 #

• 如果不需要返回具体的认证结果，直接调用microsoftTeams.authentication.notifySuccess()即可，弹窗依然会关闭。
• 若认证失败，可在处理页面调用microsoftTeams.authentication.notifyFailure(errorMessage)，触发主应用的catch回调。

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