将 Azure Active Directory (ADAL) 与 Aurelia 结合使用的问题

Question

我已将 Azure Active Directory Library (ADAL) 添加到 Aurelia CLI 0.31.3 项目，但我似乎不适应。

Here is my repository.

我运行关注的问题是：

首次访问"Reports"页面允许您登录。当它从 Azure AD 登录 returns 时，Aurelia 应用会重新加载两次。
在 "Home" 页面上单击 "Log In" 允许您登录中。当它从 Azure AD 登录 returns 时，URL 包含 “/token_id=XXXX”和 Aurelia 路由器错误提示“Route not 找到了。

项目的一些注意事项：

只有两个视图。 "Home" 不需要身份验证。 "Reports" 确实如此。
./src/app.ts 、./src/authorizeStep.ts 和 。 /src/sessionState.ts ，应该是唯一存在任何验证码的地方。

任何有关如何解决这些问题的见解都将不胜感激！

Answer 1

我对 Aurelia 没有太多经验，但我采取了以下步骤使其至少部分起作用。希望你能让它充分发挥作用:)

首先，我在 sessionState.ts 中为 ADAL.JS 启用了详细日志记录：

constructor(aureliaConfiguration, sessionState) {
    this.aureliaConfiguration = aureliaConfiguration;

    if (!this.authContext) {
        this.authContext = new AuthenticationContext(
            {
                cacheLocation: "localStorage",
                clientId: this.aureliaConfiguration.get('azureADApplicationId'),
                tenant: this.aureliaConfiguration.get('azureADTenant'),
                postLogoutRedirectUri: window.location.origin
            }
        );
        Logging = {
            level: 3,
            log: (msg) => console.log(msg)
        }
    }

    this.appName = this.aureliaConfiguration.get('name');
    this.appApiKey = this.aureliaConfiguration.get('api.key');
}

然后我发现 ADAL 给出了关于无效状态的错误。我注意到 URL 并不是它应该的样子。通常 Id 令牌位于片段中，例如#id_token=asdasdasdas...。当然这只是框架显示漂亮client-side路由的功能。

原来有一种方法可以告诉 Aurelia 不要用散列修改 URLs，同时仍然使用正常的路由链接：

configureRouter(config: RouterConfiguration, router: Router): void {
    this.sessionState.router = router;

    config.title = 'Aurelia';
    config.options.root = '/';
    config.options.pushState = true;
    config.options.hashChange = false;
    config.map([
        { route: ['', 'home'], name: 'home',  moduleId: 'resources/views/home/home', nav: true, title: "Home" },
        { route: ['reports'], name: 'reports',  moduleId: 'resources/views/reports/reports', nav: true, title: "Reports", settings: { auth: true } }
    ]);
    config.addAuthorizeStep(AuthorizeStep);
}

我在那里添加了一行：config.options.hashChange = false;。执行此操作后，ADAL 记录了成功的身份验证。

但我确实说过解决方案是部分的。登录按钮仍然显示 "Log in"。页面刷新后它确实变为 "Log out"，但这是需要修复的一件事。此外，单击 "reports" 确实会导致重定向到 AAD，但它将重定向 URL 指定为 http://localhost:9000/reports。问题是我们需要将每个 client-side 路由配置为回复 URL 才能正常工作。

因此，无需使用完整的 URL，您只需使用 authorizeStep.ts 中的域：

if (!user) {
    this.sessionState.authContext.config.redirectUri = window.location.origin;
    this.sessionState.authContext.login();
}

Answer 2

@juunas 可能有一个可行的解决方案，但我对此的看法会略有不同。

错误几乎就是这样说的：“找不到路线”。 Aurelia 正在尝试将“token_id”匹配到一条路线，而在您的 AuthorizeStep 使用它之后，该值可能应该被忽略。

只需将它添加到您的家庭路线就足够了：

{ route: ['', 'home', 'token_id'], name: 'home',  moduleId: 'resources/views/home/home', nav: true, title: "Home" },

如果仍然不匹配，您也可以添加一个通配符：token_id*

这将解决路由器错误。您没有提到身份验证本身是否有效 - 如果路由器错误是唯一的问题，这应该可以解决问题。

编辑

要跟进我的评论，作为使用单独的 view/viewmodel 作为路线的替代方法，您也可以这样做：

config.map({
  name: 'logInRedirectCallback',
  navigationStrategy: (instruction: NavigationInstruction) => {
    const token = instruction.getWildcardPath();
    // [...] do magic / pass the token to wherever it's needed

    instruction.router.navigateToRoute(""); // or any page that makes sense after logging in
  },
  route: 'token_id=*',
});

我没有对此进行测试，因此您可能需要调整该通配符的确切位置。这在假设 token_id 作为路径的一部分而不是查询的一部分匹配的情况下起作用。但一般的想法是只拦截该令牌，根据需要对其进行处理，然后转到某个现有页面。

将 Azure Active Directory (ADAL) 与 Aurelia 结合使用的问题

Issues using Azure Active Directory (ADAL) with Aurelia

azure-active-directory

adal

aurelia

编辑