3

I am currently following this for my oAuth2:

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

I am using the authentication flow grant.

I have a main page, where users can click on the button and it gets redirect to the auth server. After users enter their credentials, it will be redirected to a temporary page, where I am suppose to use the auth code to get the access token.

I am currently stuck at the temporary page on how to get the code.

So a few questions:

  1. How do i implement to get the access code and get access token?
  2. How do i redirect to home page after getting access token?

-

This is how I want the flow to be like:

Prelogin -> auth server login page -> post login -> 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
};

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();
  }
}

1 Answer 1

1

Do you mean Authorization Code Grant? If so, I find going back to the source (standard) to have been very useful to me: https://www.rfc-editor.org/rfc/rfc6749#section-4.1

To answer specifically:

  1. How do i implement to get the access code and get access token?

In theory the page you are redirected to is under your control. The redirection will pass the authorization code in the URL and so you should be able to read it from there. See step C) in the link above.

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

Again, the page you are redirected to is 'yours' so you can either redirect 301 to your home page... Or just make the entire process happen in another window (which is kind of standard practice) and close it when the redirect page is hit...

Sign up to request clarification or add additional context in comments.

2 Comments

i understand this however i notice that it states that the redirect_uri: REQUIRED, if the "redirect_uri" parameter was included in the authorization request as described in Section 4.1.1, and their values MUST be identical. so if in step 1 where i get my auth code, I have already input "post login" url as the redirected url. So at the step of getting access token, i need to use the same redirected url which doesn't make sense??
The second time you send the request_uri is just a check, it will not be used to redirect the user. In fact this call can (and should) be done server side for security reasons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.