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

Question

更新后Auth0登录样品使用HashLocationStrategy在app.module.ts:

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路由器在匹配路由后从路径中剥离额外的参数,导航不应保留查询参数和片段以用于某些背景.

执行登录后,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的catch-all路由.

假设您配置了以下路由:

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

免责声明:下面显示的第一个解决方案是作为一个解决方案提供的,证明了Angular 2.0.0,与Lock 10.2一起使用的Angular路由器3.0.0的功能.从那时起,似乎路由器和/或Lock遭受了更改,导致初始解决方法失败.我提供了第二种解决方法,似乎可以使用Angular 2.4.1,Angular router 3.4.1和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);
});