【发布时间】：2017-10-30 17:45:12
【问题描述】：
我尝试在我正在开发的 web 应用中实现 MSAL，但遇到了一些问题，尤其是 IE 和 Edge。
第一个问题出现在 chrome 和 IE/Edge 中。登录后，我得到 2 个弹出窗口。在第二个弹窗结束之前，程序已经调用了Graph API并返回了数据，所以为什么会显示，我不知道。代码如下：
function login(){
clientApplication = clientApplication || new Msal.UserAgentApplication({ClientId}, null, function (errorDes, token, error, tokenType) {});
clientApplication.loginPopup(["user.read files.readwrite.all group.readwrite.all"]).then(function (token) {
getAccessToken();
}, function (error) {
// handle error
});
}
function getAccessToken() {
clientApplication.acquireTokenSilent(["user.read files.readwrite.all group.readwrite.all"]).then(function (token) {
//Call Graph API and do stuff.
});
}
除了显示 2 个弹出窗口外，这在 chrome 中完美运行。如果我遗漏其中任何一项，我将无法通过身份验证。
现在，第二部分是一个但更有问题的部分。我已经包含了 polyfill 以使其在 IE 中工作，但我仍然遇到一些奇怪的事情。如果我没有在 IE 中禁用保护模式，两个弹出窗口都会打开，但第一个会重定向到 https://{site}.azurewebsites.net/null 。第二个弹出窗口重定向到 about:blank。正如预期的那样，两个窗口都没有关闭。
但是，如果我按照 MSAL.js 内部测试文档中的建议禁用保护模式，我会通过身份验证 - 弹出窗口不会自动关闭。对于多租户 webapp，这显然不是一个可行的解决方案。
我的身份验证流程是否真的有问题，或者我只是遗漏了什么？是否有任何关于在单页应用程序中使用 MSAL.js 运行身份验证的体面文档？
编辑：经过一番挖掘，我发现 authflow 也在用于进行静默调用的 iframe 中启动。是否有任何理由将整个页面也加载到所述 iframe 中？它运行我在 dom 准备好时运行的所有函数..
看起来好像没有呼叫是静音的，但总是需要一个弹出窗口..
【问题讨论】：
-
您是否找到了有关此主题的更多信息？
-
恐怕没有。
-
我正在尝试了解问题是否出在您的操作系统、浏览器、应用程序或库上。您能验证以下内容吗？ 1. 尝试运行以下示例时，您是否有同样的问题？ github.com/Azure-Samples/… ? 2. 您使用哪个版本的操作系统/浏览器？
-
让我猜猜 - 您在页面加载期间自动调用 MSAL，并且您注册的应用程序的 RedirectUri 指向同一页面，对吗？ OAuth 端点需要发回 id_token 或 access_token，这是通过将当前窗口的位置指向 RedirectUri 来完成的。在您的情况下，第一次登录后，弹出窗口被指向您的主页，并且您的身份验证流程再次被触发，所以 - 多个弹出窗口。
-
您可以： 1. 为 auth 回调设置一个专用页面，并将您的应用程序 RedirectUri 更新到该页面。 UserAgentApplication 也需要知道 RedirectUri - 当前 NPM 版本的 msal 不支持它，但最新的 Github 版本支持。 2. 修改您的页面以在回调期间停止触发身份验证流程。由于有多个回调场景，请尝试使用 UserAgentApplication.IsCallback 函数进行检查。总的来说，我发现 MSAL 不是很理想，尤其是弹出流。如果用户阻止弹出窗口，它不起作用，并且在禁用 3rd 方 cookie 时可能不起作用。
标签： javascript msal