angular - 如何将 HashLocationStrategy 与 Auth0 Lock 小部件一起用于用户登录

Question

更新 Auth0 login sample 后在 app.module.ts 中使用 HashLocationStrategy:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';
// (...)
@NgModule({
  providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy},
    appRoutingProviders,
    AUTH_PROVIDERS
  ],  
//(...)

不再引发 Auth0 Lock authenticated 事件:

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class Auth0Service {

  // Configure Auth0
  lock = new Auth0Lock('I21EAjbbpf...', '....au.auth0.com', {});

  constructor() {
    // Add callback for lock `authenticated` event
    this.lock.on("authenticated", (authResult) => {
      // Use the token in authResult to getProfile() and save it to localStorage
      this.lock.getProfile(authResult.idToken, function(error, profile) {
        if (error) {
          // Handle error
          return;
        }

        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('profile', JSON.stringify(profile));
      });
    });    
  }
// (...)

Answer 1

您遇到此问题的原因是Angular 2 路由器会在路由导航时自动清理 URL，导致 Auth0 Lock 永远看不到验证用户所需的数据。从 GitHub 来看，这种行为并不总是这样，但现在是这样。参见 RC2 Router strips extra arguments from the path after matching a route和 navigation should not preserve query params and fragment一些背景。

执行登录后，Auth0 将请求您的浏览器导航到类似于此的 URL:

http://example.com/#access_token=RENH3twuqx&id_token=eyJ0.epcOidRwc.Qdx3ac&token_type=Bearer

此 URL 包含 Lock 识别用户已通过身份验证的所有必要信息，但是，前面提到的 Angular 路由器行为意味着在 Lock 有机会处理此信息之前，身份验证数据包含在 URL 片段中的被剥离，将 URL 保留为 (http://example.com/#/)。发生这种情况是因为您很可能已经配置了匹配任何 URL 的包罗万象的路由。

假设您配置了以下路由:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '' }
];

---

DISCLAIMER: The first solution that will be shown below was provided as a workaround that proved functional for Angular 2.0.0, Angular router 3.0.0 used with Lock 10.2. Since then, it seems the router and/or Lock suffered changes that made the initial workaround fail. I'm providing a second workaround that seems to be functional with Angular 2.4.1, Angular router 3.4.1 and Lock 10.7.

---

解决方法#1 - (angular/core@2.0.0, angular/router@3.0.0, lock@10.2)

尝试规避此默认行为的一种可能方法是执行以下步骤:

1. 向处理身份验证回调请求的路由添加一个激活保护，如果当前 URL 看起来像是登录的结果(例如，包含 access_token)，则不允许路由激活 关键字在其片段中。
2. 在触发经过身份验证的事件后，强制导航到您想要的路线，以便应用程序识别登录。

您可以创建以下类:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Location } from '@angular/common';

@Injectable()
export class AuthenticationCallbackActivateGuard implements CanActivate {

  constructor(private location: Location) { }

  canActivate() {
    // You may want to make a more robust check here
    return this.location.path(true).indexOf("access_token") === -1;
  }
}

将其注册为您家路线的守卫:

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthenticationCallbackActivateGuard] },
  { path: '**', redirectTo: '' }
];

export const appRoutingProviders: any[] = [
  AuthenticationCallbackActivateGuard
];

最后，在身份验证后导航到您的路线:

this.lock.on('authenticated', (authResult) => {
  localStorage.setItem('id_token', authResult.idToken);
  this.router.navigate([''], {});
});

解决方法#2 - (angular/core@2.4.1, angular/router@3.4.1, lock@10.7)

与之前所做的类似，但命令式导航是在守卫本身上完成的，并使用作为片段提供的身份验证回调数据，以便 Lock 在处理事件时能够看到此信息。由于导航转移到守卫，您不再需要在锁定身份验证事件上进行导航。

创建以下类:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Injectable()
export class AuthenticationCallbackActivateGuard implements CanActivate {

  constructor(private router: Router, private location: Location) { }

  canActivate() {
    var path = this.location.path(true);

    // You may want to make a more robust check here
    var isAuthenticationCallback = path.indexOf("access_token") !== -1;

    if (isAuthenticationCallback) {
      this.router.navigate([''], { fragment: path });

      return false;
    }

    return true;
  }
}

将其注册为您家路线的守卫:

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthenticationCallbackActivateGuard] },
  { path: '**', redirectTo: '' }
];

export const appRoutingProviders: any[] = [
  AuthenticationCallbackActivateGuard
];

最后，处理身份验证事件:

this.lock.on('authenticated', (authResult) => {
  localStorage.setItem('id_token', authResult.idToken);
});