Как реализовать поток кода аутентификации с помощью angular-oauth2-oidc в Angular 8

Question

Я сейчас следую за этим для моего oAuth2:

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

Я использую грант потока аутентификации.

У меня есть главная страница, где пользователи могут нажать на кнопку, и она перенаправляется на сервер авторизации. После того, как пользователи введут свои учетные данные, они будут перенаправлены на временную страницу, где я должен использовать код авторизации для получения токена доступа.

В настоящее время я застрял на временной странице о том, как получить код.

Итак, несколько вопросов:

1. Как мне реализовать, чтобы получить код доступаи получить токен доступа?
2. Как перенаправить на домашнюю страницу после получения токена доступа?

-

Вот как я хочу, чтобы поток был похож на:

Prelogin -> страница входа на сервер авторизации -> после входа в систему -> домашняя страница приложения

-

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://tools.ietf.org/html/rfc6749#section-4.1

Чтобы ответить конкретно:

1. Как мне реализоватьполучить код доступа и получить токен доступа?

Теоретически страница, на которую вы перенаправлены, находится под вашим контролем. Перенаправление передаст код авторизации в URL, поэтому вы сможете прочитать его оттуда. См. Шаг C) по ссылке выше.

Как мне перенаправить на домашнюю страницу после получения токена доступа?

Опять же, страница, на которую вы перенаправлены, «ваша», так что вы можете перенаправить 301 на свою домашнюю страницу. .. Или просто заставьте весь процесс происходить в другом окне (что является обычной практикой) и закройте его, когда страница перенаправления нажата ...