Currently, I am utilizing the oAuth2 framework by following this documentation:
I am specifically using the authentication flow grant method.
In my application, there is a main page where users can click a button to be redirected to the authentication server. Upon entering their credentials, they are then redirected to a temporary page where I need to extract the authorization code to obtain the access token.
However, I am currently facing challenges in extracting the code from the temporary page.
I have a couple of questions:
- How can I implement the process of obtaining the access code and subsequently retrieving the access token?
- After acquiring the access token, how do I redirect the user back to the home page of the application?
-
This is the desired workflow:
Prelogin -> authentication server login page -> post-login processing -> application home page
-
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
};
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 can I capture the code for access token and handle redirection upon success?
// This may involve using the method this.oauthService.tryLoginCodeFlow();
}
}