authContext.login（）导致“拒绝在一个框架中显示'login.microsoftonline.com…”，因为它将'X-Frame-Options'设置为'deny'”

Question

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

在网络浏览器（Firefox，Chrome，Edge）中，它工作正常。但是，当我尝试在Teams Desktop Client中使用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-754448369ab4&sso_reload=true'在框架中，因为它将“ X-Frame-Options”设置为“ deny”。

显示网站，直到执行带有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上实现的，这就是为什么出现此错误的原因。