Okta Angular OpenID - 身份验证保护防止令牌在回调期间被消耗

Question

我正在学习这个教程，这是一个很棒的教程！它展示了如何使用 Okta 进行身份验证。

https://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc

本教程有一个分配给根路由的HomeComponent，并根据用户是否登录显示或不显示元素。因此，在app.component.ts 中，您可以捕获要存储的令牌在构造函数中使用以下部分从 url 存储：

this.oauthService.loadDiscoveryDocument().then(() => {
    this.oauthService.tryLogin({});
}

在auth.guard.ts 中，您可以：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidIdToken()) {
        return true;
    }

    this.router.navigate(['/home']);
    return false;
}

使用此路由配置：

const appRoutes: Routes = [
    { path: 'search', component: SearchComponent, canActivate: [AuthGuard] },
    { path: 'edit/:id', component: EditComponent, canActivate: [AuthGuard]},
    { path: 'home', component: HomeComponent},
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: '**', redirectTo: 'home' }
];

我的问题

我的设置稍有不同，而且一切的时间安排都不正确。 - 我有一个LoginComponent，如果您未通过身份验证，您将被重定向到该地址。 - 我将根路由重定向到AuthGuarded 路由。 - 当我使用 Okta 登录时，this.oauthService.tryLogin({}) 没有及时运行以阻止 AuthGuard 将我重定向到 LoginComponent。这会导致包含令牌的 url 部分在我尝试使用它们之前消失在存储中。

这是我所拥有的：

app.component.ts

constructor(
    ...
    private oauthService: OAuthService) {
    ...
    this.oauthService.loadDiscoveryDocument().then(() => {
      this.oauthService.tryLogin({});
    });
}

auth.guard.ts

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  if (!this.oauthService.hasValidIdToken()) {
    this.router.navigate(['/login']);
  }
  return true;
}

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/projects', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'help', component: HelpComponent, canActivate: [AuthGuard] },
  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },
  { path: 'contact', component: ContactComponent },
  { path: '**', component: NotFoundComponent }
];

projects-routing.module.ts

const routes: Routes = [
{ 
  path: 'projects', 
  component: ProjectsComponent, 
  canActivate: [AuthGuard],
  children: [
    ...
  ]
}

如您所见，当我去我的 Okta 站点输入我的用户名和密码时，我被重定向到我的应用程序的根目录，从 loadDiscoveryDocument() 返回的 Promise 已订阅，但 @987654344 @ 将我重定向回登录页面，在我可以让 OAuthService 为我收集并将其存储在存储之前，从 url 中丢失了 id_token 等。

我的问题

有没有办法让它工作而无需更改我的应用程序的路由结构？根据登录状态，我不需要充当“LoginComponent”和“HomeComponent”的“HomeComponent”。

Answer 1

不幸的是，我无法使用重定向的登录按钮来使用我的应用程序路由的组织方式。但是使用 JavaScript SDK，我有了更多的灵活性，并且感谢 @MattRaible 在 Okta 开发人员页面上频繁发布的博客文章，我能够想出一些对我来说很有效的东西。花了很多时间调试 sdk 来弄清楚可以得到我想要的操作的顺序，所以希望这对那里的人有所帮助：

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

import { OAuthService } from 'angular-oauth2-oidc/dist';

declare let OktaAuth: any;

@Injectable()
export class AuthenticationService {

  discoveryDocumentLoaded: boolean;

  constructor(
    private oauthService: OAuthService,
    private router: Router) { }

  init() {
    this.oauthService.redirectUri = window.location.origin;
    this.oauthService.clientId = '<client-id>';
    this.oauthService.scope = 'openid profile email';
    this.oauthService.oidc = true;
    this.oauthService.issuer = '<preview-path>';
    this.oauthService.loadDiscoveryDocument()
      .then(() => {
        this.discoveryDocumentLoaded = true;
        this.oauthService.tryLogin({});
      });
  }

  logOut() {
    this.oauthService.logOut();
    this.router.navigate(['/login']);
  }

  loginWithPassword(username: string, password: string) {
    this.oauthService.createAndSaveNonce().then(nonce => {
      const authClient = new OktaAuth({
        url: '<preview-path>'
      });
      authClient.signIn({
        username: username,
        password: password
      })
        .then(response => {
          if (response.status === 'SUCCESS') {
            authClient.token.getWithoutPrompt({
              clientId: '<client-id>',
              responseType: ['id_token', 'token'],
              scopes: ['openid', 'profile', 'email'],
              sessionToken: response.sessionToken,
              nonce: nonce,
              redirectUri: window.location.origin
            })
              .then(tokens => {
                localStorage.setItem('access_token', tokens[1].accessToken);
                this.oauthService.processIdToken(tokens[0].idToken, tokens[1].accessToken);
                this.router.navigate(['/']);
              })
              .catch(console.error);
          } else {
            throw new Error('We cannot handle the ' + response.status + ' status');
          }
        })
        .fail(console.error);
    });
  }

  loadUserProfile() {
    const returnFunc = () => this.oauthService.loadUserProfile()
      .catch(console.log);

    if (this.discoveryDocumentLoaded) {
      return returnFunc();
    } else {
      return this.oauthService.loadDiscoveryDocument()
        .then(returnFunc);
    }
  }

  isLoggedIn() {
    return this.oauthService.hasValidIdToken() && this.oauthService.getIdentityClaims()
  }

}

这是我在应用程序中使用服务的方式：

app.component.ts

export class AppComponent implements OnInit {
    ...
    constructor(
        ...
        private _auth: AuthenticationService) {
        ...
    }

    ngOnInit() {
        this._auth.init();
    }
    ...
}

profile.component.ts

import { Component, OnInit } from '@angular/core';

import { OktaProfile } from 'app/okta-profile';
import { AuthenticationService } from 'app/authentication.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  profile: OktaProfile;

  constructor(private _auth: AuthenticationService) { }

  ngOnInit() {
    this._auth.loadUserProfile()
      .then(oktaProfile => this.profile = <OktaProfile>oktaProfile);
  }

}