模式中的adal.js身份验证

Question

我们已经进入了adal.js的世界，并且已经成功地部署了演示ToDoSPA，如下所示：https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp

我们的下一个挑战来自于我们使用它的方式，这导致我们需要使用以下代码在新窗口中显示登录窗口：https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/FAQs#q4-i-get-this-error-refused-to-display--in-a-frame-because-it-set-x-frame-options-to-deny

这足以让我们继续探索adal.js来满足我们的需求。我的问题是，有没有可能让登录窗口显示在模式对话框中而不是新窗口中？如果是这样，将如何实现这一目标？任何有想法的人，请毫不犹豫地开始基础知识，陈述显而易见的东西，像对待傀儡一样对待我们，发布完整的代码等-我们可能需要它，因为这对我们来说都是非常新的！但也是一次有趣的冒险。

如果我们能解决这个问题，我们很可能很快就会再次回到这里！

非常感谢

Answer 1

Model是一个纯客户端组件，您需要修改adal for js的SDK，将iframe手动实现为model组件。这是大量的工作，而不是直接集成。

不过，您可以使用弹出窗口来实现您的要求。在adal上下文中配置displayCall初始函数闭包：

adalProvider.init(
        {
          displayCall: function (urlNavigate) {
                var popupWindow = window.open(urlNavigate, "login", 'width=483, height=600');
                if (popupWindow && popupWindow.focus)
                    popupWindow.focus();
                var registeredRedirectUri = this.redirectUri;
                var pollTimer = window.setInterval(function () {
                    if (!popupWindow || popupWindow.closed || popupWindow.closed === undefined) {
                        window.clearInterval(pollTimer);
                    }
                    try {
                        if (popupWindow.document.URL.indexOf(registeredRedirectUri) != -1) {
                            window.clearInterval(pollTimer);
                            window.location.hash = popupWindow.location.hash;
                            popupWindow.close();
                        }
                    } catch (e) {
                    }
                }, 20);
            }
       },
        $httpProvider
        );

它将在弹出窗口中指向Azure AD SSO页面。你可以参考https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/FAQs#q5-how-to-use-a-popup-for-loginauthentication-process获取更多信息。