Azure active directory 将Azure Active Directory（ADAL）与Aurelia一起使用时出现的问题

我已经添加到一个Aurelia CLI 0.31.3项目中，我似乎已经脱离了我的元素

我遇到的问题有：

• 首次访问“报告”页面允许您登录。 当它从Azure广告登录返回时，Aurelia应用程序将重新加载 两次
• 在“主页”上单击“登录”即可登录 在里面当它从Azure广告登录返回时，URL包含 “/token_id=XXXX”和Aurelia路由器错误，声明“路由不可用” 找到”

关于该项目的一些说明：

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

---

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

我对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=asdasdas…

。 当然，这只是框架显示漂亮客户端路由的特性

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

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，这样才能工作

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

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

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

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

只需将其添加到您的家庭路线中即可，如下所示：

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

如果仍然不匹配，还可以添加一个通配符：
token\u id*

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

编辑
要跟进我的评论，作为使用单独视图/视图模型作为管线的替代方案，您还可以执行以下操作：

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=*',
});

我还没有测试过这个，所以你可能需要调整这个通配符的确切位置。这是在假设令牌_id作为路径的一部分而不是查询的一部分进行匹配的情况下工作的。但总体思路是截取该令牌，根据需要进行处理，然后转到某个现有页面。
谢谢您的回复！不幸的是，解决方案的任何一部分都没有改善情况。我能够从一开始就成功地进行身份验证，很抱歉没有说清楚。问题在于回调是如何触发的。正如您所说，部分解决方案相当成功，但不幸的是，ADAL客户端没有收到授权成功的通知。另外，将“window.location.href”更改为“window.location.origin”意味着回调不会将用户返回到他们试图访问的页面。它总是回到“家”。谢谢你的回复！我能够从一开始就成功地进行身份验证，很抱歉没有说清楚。问题在于回调是如何触发的。这确实解决了路由器抛出错误的问题，但是它不会导致ADAL客户端收到认证成功的通知。因此，我无法在不刷新页面的情况下确定身份验证状态。公平地说，在这种情况下，您需要添加一个与该特定路由匹配并通知客户端的
AuthorizeStep
，或者更简单一点（但稍微“干净”）您可以简单地制作一个特殊的
auth.ts+html
或类似的东西。将
token\u id
路由到该页面，并在该特定页面的代码中，从
activate（）
中的
params
获取令牌，然后将其传递给客户端。（如果您愿意，我可能会在稍后添加一个适当的示例，现在有点匆忙）我想您可能会对auth.ts+html建议有所了解。我以前从未考虑过这一点。我相信这将解决必须配置多个返回路由的问题，我确实希望避免这种情况，并且一旦身份验证返回，我可以将用户重新路由到他们请求的路由。不幸的是，由于新的优先事项，我目前没有积极参与这个项目，但我会将此标记为可接受的答案。谢谢当然可以如果你还没有，我建议你看看这个插件：-如果插件本身没有抓痒，看看它的代码也应该给你一些可靠的例子，直接在路由管道中处理身份验证。真的很整洁，太棒了！我来看看。谢谢