Spring Security Oauth2 with Keycloak

Finally, we have to define our OAuth module to our app.module.ts

Note: The upcoming configuration should be done after the spring boot application configurations are finished.

Create the component app.service.ts

Here make an HTTP get request throughout our resource server (Spring-boot application)

import Injectable from '@angular/core';
import HttpClient, HttpHeaders from "@angular/common/http";
import Observable from "rxjs";
@Injectable(
  providedIn: 'root'
)
export class AppService 

constructor(private httpClient: HttpClient) 
  

hello(): Observable 
    const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
    return this.httpClient.get("http://localhost:8080/api/home",
      headers, responseType: 'text');
  

Now Let’s call it from our app.component.ts

import Component, OnDestroy from '@angular/core';
import OAuthService from "angular-oauth2-oidc";
import authConfig from "./auth.config";
import AppService from "./app.service";
import Subscription from "rxjs";
@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnDestroy
  title="frontend";
  text="";
  helloSubscription: Subscription

constructor(private oauthService: OAuthService, private appService: AppService) 
    this.configure();
    this.helloSubscription = appService.hello().subscribe(response => 
      this.text = response;
    );
  

ngOnDestroy(): void 
    this.helloSubscription.unsubscribe();
  

login() 
    this.oauthService.initCodeFlow();
  

private configure() 
    this.oauthService.configure(authConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin(); // This method is trigger issuer uri
  

logout() 
    this.oauthService.logOut();
  

Last we need to bind with our html page

Refresh the browser after login to view the text

text

After finishing all the configs let’s start our application. ‘npm start’

Spring-boot (Resource server configuration)

First I am adding 3 dependencies in the pom.xml

1.spring-boot-starter-oauth2-resource-server – which will enable the resource server capabilities inside our spring-boot application.

2. spring-security-oauth2-jose– Enables the Java-script object signing and Encryption Framework. Which is used to securely transfer claims between 2 parties. This means transferring the JWT (JSON Web Token), JWS (JSON Web Signatures), JWE (JSON Web Encryption), JWK (JSON Web Key).

3. spring-boot-starter-securityEnable spring security.

    org.springframework.boot
    spring-boot-starter-oauth2-resource-server


    org.springframework.security
    spring-security-oauth2-jose


    org.springframework.boot
    spring-boot-starter-security

Now configure the resource server properties

spring.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:8180/realms/oauth2-demo-realm/protocol/openid-connect/certs

OK, we configured the resource server.

Let’s create an endpoint.

I am creating the Controller “HomeRestController”, enabling the Rest api & cross-origin

package com.amitech.pkce.controller;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api/home")
@CrossOrigin(origins = "*")
public class HomeRestController 

@GetMapping
    @ResponseStatus(HttpStatus.OK)
    public String home() 
        return "Hello";
    

Last thing is to configure the spring security

For that, i am creating the config package and creating a class as SecurityConfig.

package com.amitech.pkce.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.http.SessionCreationPolicy;
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter 

@Override
    public void configure(HttpSecurity httpSecurity) throws Exception 
        httpSecurity
                .authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .cors()
                .and()
                .csrf()
                .disable()
                .oauth2ResourceServer()
                .jwt();
    

This class should extend the web security configure the adapter, in this way it will overwrite the spring-boot default security config. Inside this method, we can customize how spring security can behave.

First of all, I am going to make sure that all requests to our resource server should be authorized first. So i can do that by adding the authorizeRequest().anyRequest().authenticated()

Finally, we completed our front-end and back-end implementation. Let’s dive into the demo testing.

Demo

Navigate to the endpoint localhost:4200 (angular endpoint host)

click on login , you will redirect to the keycloak login page

If you check the request parameters you can see the code_challenge & code challenge method

Once you entered the credentials

If you check the request parameters again you will see the code, angular use this code to make the post request to the token endpoint.

Code verifier — this value is used to verify the code challenge method.

The response contains an access token, refresh token and ID token

Conclusion to Keycloak

I hope you understood my article with a full flow explanation. Now we could see that we don’t need to share our credentials through the network calls. Also, you learned about PKCE authorization code flow, configuring with the front-end client (In our case angular application), configuring with the resource server (In our case Spring-boot application), and configuring with the authorization server (In our case keycloak server). Please continue reading my article to learn more about keycloak and the latest technology trends.

What we have learned so far:

1. Understand the basics of PKCE grant flow.
2. Configuring PKCE in the Keycloak admin console.
3. Configuring PKCE in angular application.
4. Configuring PKCE in the Spring-boot application.

The media shown in this article is not owned by Analytics Vidhya and is used at the Author’s discretion.

Related