代码之家 › 专栏 › 技术社区 › YardGnomeNinja

将Azure Active Directory(ADAL)与Aurelia一起使用时出现的问题

adal aurelia azure-active-directory

YardGnomeNinja · 技术社区 · 8 年前

我添加了 Azure Active Directory Library (ADAL) 对于一个Aurelia CLI 0.31.3项目,我似乎不在我的元素范围内。

Here is my repository.

我遇到的问题有:

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

关于该项目的一些注意事项:

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

如能了解如何解决这些问题,我们将不胜感激!

2 回复 | 直到 8 年前

Community Mohan Dere 5 年前

@朱纳斯可能有一个可行的解决方案,但我对此的看法会略有不同。

这个错误几乎说明了这一点:“找不到路由”。Aurelia正在尝试将“token\u id”与路由匹配,而在 AuthorizeStep 使用它。

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

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

如果仍然不匹配,也可以添加通配符: token_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=*',
});

我还没有对此进行测试,因此您可能需要调整该通配符的确切位置。这是在假设token\u id作为路径的一部分而不是查询的一部分进行匹配的情况下工作的。但总体思路是拦截该令牌,根据需要对其进行处理,然后转到某个现有页面。

juunas 8 年前

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

首先,我为ADAL启用了详细日志记录。JS处于会话状态。ts:

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不要使用哈希修改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();
}