Question

我已将Azure Active Directory Library (ADAL)添加到Aurelia CLI 0.31.3项目中，但我似乎不在我的元素中。

Here is my repository.

我遇到的问题是：

首次访问“报告”页面允许您登录。当它从Azure AD登录返回时，Aurelia应用程序将重新加载两次。
点击“主页”页面上的“登录”可以登录当从Azure AD登录返回时，URL包含 “/ token_id = XXXX”和Aurelia路由器错误说明“路由没有找到”。

项目的一些注意事项：

只有两种观点。 “Home”不需要身份验证。 “报告”确实如此。
./ src / app.ts ， ./ src / authorizeStep.ts 和 ./ src / sessionState.ts ，应该是唯一存在任何身份验证代码的地方。

非常感谢任何有关如何解决这些问题的见解！

Answer 1

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

错误几乎说：“找不到路线”。 Aurelia尝试将“token_id”与路线匹配，而在AuthorizeStep使用该值后，该值可能会被忽略。

只需将其添加到您的家乡路线即可：

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

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

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

修改

要跟进我的评论，作为使用单独的视图/ 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作为路径的一部分匹配的情况下工作的，而不是查询的一部分。但一般的想法是只是截取该令牌，然后根据需要处理它然后转到某个现有页面。

Answer 2

我对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...。当然，这只是框架显示漂亮客户端路由的功能。

事实证明，有一种方法可以告诉Aurelia不要修改带有哈希值的网址，同时仍然使用正常的路由链接：

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记录了成功的身份验证。

但我确实说解决方案是偏袒的。登录按钮仍然显示“登录”。页面刷新后，它会更改为“注销”，但这是需要修复的一件事。此外，单击“报告”会导致重定向到AAD，但它会将重定向URL指定为http://localhost:9000/reports。问题是我们需要将每个客户端路由配置为回复URL以使其正常工作。

因此，您只需使用authorizeStep.ts中的域名，而不是使用完整的网址：

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

使用Azure Active Directory（ADAL）和Aurelia的问题

2 个答案:

修改