如何在 Angular 8 中使用 angular-oauth2-oidc 实现身份验证代码流

Question

我目前正在关注我的 oAuth2：

https://manfredsteyer.github.io/angular-oauth2-oidc/docs/index.html

我正在使用身份验证流授权。

我有一个主页，用户可以在其中单击按钮并将其重定向到身份验证服务器。 用户输入他们的凭据后，它将被重定向到一个临时页面，我想在那里使用身份验证代码来获取访问令牌。

我目前停留在关于如何获取代码的临时页面。

所以有几个问题：

1. 如何实现获取访问码和获取访问令牌？
2. 获取访问令牌后如何重定向到主页？

-

这就是我希望流程的样子：

登录前 -> 验证服务器登录页面 -> 登录后 -> 应用程序主页

-

PreLoginComponent.ts：

export class PreLoginComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  ngOnInit() {}

  public login() {
    this.oauthService.initCodeFlow();
  }
}

authConfig.ts：

export const authConfig: AuthConfig = {

  responseType: environment.authRequestType,

  loginUrl: environment.authServerUrl,

  redirectUri: environment.redirectUrl,

  clientId: environment.clientId,

  scope: environment.scope,

  requireHttps: false,

  showDebugInformation: true
};

PreLoginComponent.ts：

export class PreLoginComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  ngOnInit() {}

  public login() {
    this.oauthService.initCodeFlow();
  }
}

AppComponent.ts：

import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './core/authentication/auth.config';

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

  constructor(
    private oauthService: OAuthService
  ) {
    this.configure();
  }

  ngOnInit() {
    }

  private configure() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
  }
}

PostLoginComponent.ts：

import { Component, OnInit } from '@angular/core';
import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-post-login',
  templateUrl: './post-login.component.html',
  styleUrls: ['./post-login.component.scss']
})
export class PostLoginComponent implements OnInit {
  constructor(private oauthService: OAuthService) {

  }

  ngOnInit() {
  // how do i implement to get the code and get access token 
  // how do i redirect after success
  //this.oauthService.tryLoginCodeFlow();
  }
}

Answer 1

您的意思是授权码授予吗？如果是这样，我发现回到源代码（标准）对我非常有用：https://www.rfc-editor.org/rfc/rfc6749#section-4.1

具体回答：

1. 如何实现获取访问码和获取访问令牌？

理论上，您被重定向到的页面在您的控制之下。重定向将在 URL 中传递授权代码，因此您应该能够从那里读取它。请参阅上面链接中的步骤 C)。

1. 获取访问令牌后如何重定向到主页？

同样，您被重定向到的页面是“您的”，因此您可以将 301 重定向到您的主页...或者只是让整个过程发生在另一个窗口中（这是一种标准做法）并在出现时关闭它重定向页面被点击...