Spring Boot + Spring Security + React + Keycloak

Ahora mostraré como utilizar Spring Boot, Spring Security y Keycloak para tener recursos protegidos accediendo a ellos utilizando React 😉.

Configurar Keycloak

Configurar Spring Boot

Configurar React

 

• Keycloak

Keycloak se puede obtener utilizando docker o desde su página como Standalone server distribution (previamente en este enlace había indicado como obtenerlo y lanzarlo). 

Luego de lanzarlo estará disponible localmente y procedemos a realizar su configuración (en mi caso visitando http://localhost:8282/):

Si es la primera vez configuramos el usuario administrador. Una vez ingresado entramos a la aplicación:

Seleccionamos Add realm y definimos su nombre, en este ejemplo es: sso

Luego vamos a Clients y presionamos Create para agregar dos clientes: cliente-uno para Spring Boot y cliente-dos para React, en ambos definimos su Root URL y Web Origins (NO olvidar presionar el boton save cuando realizamos modificaciones, web origins puede ser más estricto, es * para el ejemplo):

Luego creamos el cliente-dos en forma similar al cliente-uno pero especificando la URL en la que se encontrará React (no olvidar presionar save luego de realizar las modificaciones):

Ahora creamos un Role para el Realm sso (en este ejemplo es privilegiado):

Luego creamos un usuario (sebastian) y lo asociamos al rol que creamos:

• Spring Boot

La primera clase es la configuración de Keycloak:

@Configuration
@EnableWebSecurity
public class KeycloakSecurity extends KeycloakWebSecurityConfigurerAdapter {

  @Autowired
  public void configureGlobal(final AuthenticationManagerBuilder auth) throws Exception {
    final var kap = keycloakAuthenticationProvider();
    kap.setGrantedAuthoritiesMapper(new SimpleAuthorityMapper());
    auth.authenticationProvider(kap);
  }

  @Bean
  public KeycloakSpringBootConfigResolver KeycloakConfigResolver() {
    return new KeycloakSpringBootConfigResolver();
  }

  @Bean
  @Override
  protected SessionAuthenticationStrategy sessionAuthenticationStrategy() {
    return new RegisterSessionAuthenticationStrategy(new SessionRegistryImpl());
  }

  @Override
  protected void configure(final HttpSecurity http) throws Exception {
    super.configure(http);
    http.cors().and().csrf().disable().authorizeRequests().antMatchers("/personas*")
        .hasRole("privilegiado").anyRequest().permitAll();
  }
}

En el método configure() especificamos que todos los request a /personas* tienen que tener el rol privilegiado.

Y la clase para lanzar Spring Boot:

@SpringBootApplication
@RequestMapping
@CrossOrigin(allowCredentials="true")
public class SbKeycloakApplication {

  @GetMapping(path = "/")
  public ResponseEntity saludo() {
    return ResponseEntity.ok(new Persona(3, "tres"));
  }

  @GetMapping(path = "/personas")
  public ResponseEntity> customers(final Principal principal, final Model model) {
    final var personas = new ArrayList();
    personas.add(new Persona(1, "uno"));
    personas.add(new Persona(2, "dos"));
    return ResponseEntity.ok(personas);
  }

  public static void main(final String[] args) {
    SpringApplication.run(SbKeycloakApplication.class, args);
  }

}

Para no extender el ejemplo quedan los metodos de recursos en la misma clase:

• request a / no requieren autorizacion
• request a /personas requieren autorizacion

y las propiedades de configuracion:

keycloak.principal-attribute=preferred_username
keycloak.auth-server-url=http://localhost:8282/auth
keycloak.realm=sso
keycloak.resource=cliente-uno
keycloak.public-client=true

Si lanzamos la aplicación y accedemos al http://localhost:8080 obtenemos lo siguiente:

es de acceso libre. Ahora accedemos al http://localhost:8080/personas y no podemos acceder inmediatamente:

 tenemos que especificar el usuario y clave asociados al rol privilegiado y accedemos a los recursos:

Así tenemos nuestra aplicacion Spring Boot protegida con Keycloak.

• React

El ultimo paso es crear la vista:

• propagará las credenciales al backend (spring boot)
• permitirá acceder al inicio (público) y a los recursos protegidos (keycloak)

Mostraré las partes relacionadas con la seguridad y todo el resto estará disponible en Github.

• dentro de la carpeta public tiene que quedar un archivo keycloak.json con el siguiente contenido (que puede variar dependiendo de la instalación):

  {
    "realm": "sso",
    "auth-server-url": "http://localhost:8282/auth",
    "ssl-required": "external",
    "resource": "cliente-dos",
    "public-client": true,
    "confidential-port": 0,
    "enable-cors": true
  }
  

 el cual se obtiene desde keycloak (Clients/cliente-dos/installation/keycloak OIDC JSON):

• Ahora creamos los metodos relacionados con obtener los datos desde el backend en el componente Protegido.js:

  componentDidMount() {
      const keycloak = Keycloak('/keycloak.json');
      keycloak.init({onLoad: 'login-required'}).then(authenticated => {
        this.setState({ keycloak: keycloak, authenticated: authenticated });
        this.cargarDatosProtegidos();
      })
    }
  
    authorizationHeader() {
      if(!this.state.keycloak) return {};
      return {
        headers: {
          "Authorization": "Bearer " + this.state.keycloak.token
        }
      };
    }
  
    cargarDatosProtegidos() {
      fetch('http://localhost:8080/personas', this.authorizationHeader())
      .then(response => response.json())
      .then(result => this.setState({datos: result}))
      .catch(error => console.log(error));
    }
  
    render() {
      if (this.state.keycloak) {
        if (this.state.authenticated) 
           return ...codigo-contenido-autorizado...; 
         else return ...codigo-error...
      }
      return ...codigo-no-autorizado...;
    }
  }
  

(en github el código esta completo)

• cuando se carga el componente carga los datos de acceso a keycloak e intenta cargar los datos protegidos del backend, si no tiene las credenciales se mostrará la pagina de autenticación del keycloak, luego se agrega al header del request y se accede a los recursos protegidos:

•  También está el componente Logout.js que realiza el logout en keycloak:

  logout() {
    this.props.history.push('/');
    this.props.keycloak.logout();
  }
  

Y eso es todo 😌, está keycloak configurado, recursos de spring boot protegidos y la vista con React hermosa 😖. Ahora podemos continuar creando microservicios seguros 😁.

Enlaces del código fuente:

- Spring boot - backend - github

- React - frontend - github