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

Question

我目前正在关注我的 oAuth2:

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

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

我有一个主页，用户可以在其中单击按钮，它会重定向到 auth 服务器。用户输入他们的凭据后，它将被重定向到一个临时页面，我想在该页面上使用授权代码获取访问 token 。

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

那么几个问题:

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

-

这就是我想要的流程:

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

-

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. How do i implement to get the access code and get access token?

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

2. How do i redirect to home page after getting access token?

同样，您被重定向到的页面是“您的”页面，因此您可以将 301 重定向到您的主页...或者只是让整个过程在另一个窗口中发生(这是一种标准做法)并在重定向页面被命中...