我曾尝试将 MSAL 实现到我正在开发的 web 应用程序中,但我遇到了一些问题,尤其是 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 准备好时运行的所有函数。
似乎没有呼叫是静音的,但总是需要一个弹出窗口..