模态中的 adal.js 身份验证答案

【问题标题】：adal.js authentication in a modal模态中的 adal.js 身份验证
【发布时间】：2016-11-22 13:10:45
【问题描述】：

我们一直在冒险进入 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 以满足我们的需求。我的问题是，是否可以让登录窗口显示在模式对话框而不是新窗口中？如果是这样，这将如何实现？任何有想法的人，请不要犹豫，了解基础知识，陈述显而易见的事情，像对待傻瓜一样对待我们，发布完整代码等 - 我们可能需要它，因为这对我们来说都是全新的！但也是一次有趣的冒险......

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

非常感谢

【问题讨论】：

嗨@soundsessential，你现在有什么更新吗？
嘿加里。对不起。非常感谢您的回复。我们已经成功部署了弹出窗口，但是感谢下面的附加链接，我不确定我们之前是否遇到过。从您所说的来看，似乎在模式对话框而不是新窗口中打开提示并不是本机支持的。如果是在未来，那么它就是我们感兴趣的东西。在那之前，我们将看看弹出窗口是否能满足我们的需要。再次，非常感谢。

标签： adal

【解决方案1】：

Model是纯客户端组件，需要修改js的SDK的adal，手动将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 了解更多信息。

【讨论】：