authContext.login() 导致“拒绝在框架中显示‘login.microsoftonline.com…’，因为它将‘X-Frame-Options’设置为‘deny’”

Question

我目前正在尝试将我的网站实施到 Microsoft Teams 中。 为此，我使用 App Studio 制作了一个自定义应用程序。 在那个应用程序中，我有一个选项卡可以指向我的网站。 该网站有一个按钮，该按钮执行一段代码，在该代码中尝试使用 authContext.login()，这会导致该站点定向到 Microsoft 登录并返回到重定向。

在网络浏览器（Firefox、Chrome、Edge）中，它工作正常。 但是，当我尝试在 Teams 桌面客户端中使用 authContext.login() 时，我在 DevTools 控制台中收到此错误（出于安全考虑，我更改了这篇文章的一些十六进制代码）：

拒绝显示https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=1904f197-dae8-4740-94f2-e12dee41b451&redirect_uri=https%3A%2F%2Fsomeadress.com%2Freally%2F&state=19484c2c-2aff -463a-9cba-2894af66c09d&client-request-id=91308f53-96a1-4f2b-8ee4-774b2f168c6b&x-client-SKU=Js&x-client-Ver=1.0.15&nonce=5cabfef7-36aa-470a-aaa3-7544=48369ab '因为它将“X-Frame-Options”设置为“拒绝”。

该网站一直显示到带有 authContext.login() 的按钮被执行，然后它消失并抛出错误。

这是我的按钮的代码片段：

<!--- Import packages for authentication information in Teams/Azure --->
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js"  crossorigin="anonymous"></script>

...

function loginO365() {
    let config = {
        clientId: "190af997-d6f8-4730-9462-e13dee41d451",
        redirectUri: "#application.gc_app_rootURL#", // same URL as redirect in error and Azure app
        cacheLocation: "localStorage",
        navigateToLoginRequestUrl: true,
    };

    let authContext = new AuthenticationContext(config);
    let isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();
    authContext.login(); // causes error
}

我的问题：

1. 是什么原因造成的？
2. 为什么它不会发生在网络浏览器中？
3. 我如何解决它？

Answer 1

Microsoft 不允许其身份验证对话框在 I 框架中打开。 它在浏览器中运行良好，但 MS Teams 是在 I-frame 上实现的，这就是您收到此错误的原因。

请查看选项卡流的 Microsoft Teams 身份验证流。

这是授权代码示例的墨水