【问题标题】：Using MSAL v0.1.3 with Aurelia for Authentication使用带有 Aurelia 的 MSAL v0.1.3 进行身份验证
【发布时间】：2018-01-17 20:24:22
【问题描述】：

我找到了各种使用 MSAL 的示例，甚至发现了将 MSAL 与 SPA 应用程序（通常是 Angular 或 React）一起使用的示例，但我正在努力让它与 Aurelia 一起使用。

我执行了以下操作以确保库实际上按预期工作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.3/js/msal.min.js"></script>
    <style>
        .hidden {
            visibility: hidden;
        }
    </style>
  </head>
  <body>
      <div id="username"></div>
      <div id="token"></div>
      <button id="login" onclick="loginPopup()">Log In</button>
      <button id="logout" class="hidden">Log Out</button>
    <script>
        var authClient = new Msal.UserAgentApplication("my v2 endpoint client id",null);

       function loginPopup(){
           authClient.loginPopup(["openid","user.readbasic.all"])
           .then(token => {
               authClient.acquireTokenSilent(["user.readbasic.all"])
               .then(accessToken => {
                updateUI(token);
            },
            error => {
                authClient.acquireTokenPopup(["user.readbasic.all"])
                .then(accessToken => {
                    updateUI(token);
                },
                error => {
                    console.log("Token Error: " + error)
                })
            })

        },
        error =>{
            console.log("Login error " + error)
        })
    }

    function updateUI(token){
        var loginbutton = document.getElementById("login");
        loginbutton.className = "hidden";

        let usernamediv = document.getElementById("username");
        let tokendiv = document.getElementById("token");

        usernamediv.innerText = authClient.getUser().name;
        tokendiv.innerText = token;
    }
   </script>
  </body>
</html>

该代码运行良好。单击“登录”按钮，将显示“登录”弹出窗口，选择用户，输入密码，弹出窗口消失，用户界面将使用用户名和令牌进行相应更新。

现在我正在尝试将其添加到我的 Aurelia 应用程序中，如下所示：

main.js

export async function configure(aurelia){
   aurelia.use
    .standardConfiguration()
    .developmentLogging();

   let msClient = new Msal.UserAgentApplication('my v2 endpoint client id",null);
   aurelia.use.instance("AuthService",msClient);

   await aurelia.start();

   if(msClient.getUser()) {
        await aurelia.setRoot(PLATFORM.moduleName("app"));
   else
        await aurelia.setRoot(PLATFORM.moduleName("login/login"));

login.js

export class Login {
   static inject = [Aurelia, "AuthService"]
   constructor(aurelia, auth){
        this.authService = auth
        this.app = aurelia
   }

   activate(){
        //Also tried this code in constructor
        this.authService.loginPopup(["openid","user.readbasic.all"])
         .then(token => {
             this.app.setRoot(PLATFORM.moduleName("app"))
         });
   }  
}

但是，使用此代码后，应用程序将加载并导航到弹出登录弹出窗口的登录页面。但是，一旦用户输入/选择名称和密码，弹出屏幕不会消失。应用程序（在弹出窗口后面）似乎重新加载并导航到 app.js 视图模型，但弹出窗口仍保留在屏幕上，并且似乎要求用户输入/选择用户名。

我也尝试过使用 loginRedirect 而不是 loginPopup，结果相似，即使在验证后应用程序也会不断重定向到登录页面。

我猜这与 MSAL 尝试响应应用程序的方式以及 Aurelia 尝试处理导航的方式等有关，但我不知道哪里出了问题。

任何帮助将不胜感激！

【问题讨论】：

这是一个非常具体的问题，取决于 MSAL 的行为方式。路由器似乎在做它应该做的大部分事情。让我们联系，您可以实时向我展示行为，我们可以看看我们是否可以修复它。

标签： aurelia msal

【解决方案1】：

使用`attached()` 生命周期回调

似乎一切正常，但弹出窗口并没有消失。如果没有看到实际的代码，很难知道为什么，但您首先要尝试将相关代码移动到 attached() 回调，一旦视图和视图模型被绑定并添加到DOM。

不要返回`activate()` 中的登录承诺

如果您返回activate() 中的登录承诺，则在承诺解决之前不会完成激活。但是，app.setRoot() 也会在 promise 解决时被调用，这意味着您将在第一个导航完成之前开始新的导航。这很糟糕。

activate() {
  // THIS WOULD BREAK
  return this.authService.loginPopup(["openid","user.readbasic.all"])
    .then(token => {
      this.app.setRoot(PLATFORM.moduleName("app"))
    });
}

使用`detatched()` 生命周期回调

如果这不起作用，接下来要做的是检查authService.loginPopup() 是否正确登录并解决。如果是这样，您总是可以继续手动从 DOM 中删除弹出窗口，以防库没有自行清理。你应该这样做detatched()生命周期回调。

【讨论】：

在与 Matt 交谈后，我们能够通过以下方式实现此功能：1) 使用 attach() 而不是 activate() 和 2) 使用 MSAL 的 loginRedirect() 而不是 loginPopup()。

使用attached() 生命周期回调

不要返回activate() 中的登录承诺

使用detatched() 生命周期回调

使用`attached()` 生命周期回调

不要返回`activate()` 中的登录承诺

使用`detatched()` 生命周期回调