Comment configurer Keycloak dans un projet Angular

Keycloak est une solution de gestion des identités et des accès open-source, hautement extensible et offrant une sécurité robuste pour vos applications. L’intégration de Keycloak dans votre projet Angular peut être réalisée avec le package keycloak-angular. Ce guide vous guidera à travers le processus de configuration de Keycloak dans votre projet Angular en utilisant keycloak-angular.

Prérequis

Avant de commencer, assurez-vous d’avoir les éléments suivants :

Node.js et npm installés sur votre machine de développement.
Angular CLI installé.
Accès à une instance de serveur Keycloak ou vous pouvez en configurer une localement à des fins de test.

Installation

Installez les packages keycloak-angular et keycloak-js via npm :

import { APP_INITIALIZER, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080', // URL vers votre Keycloak instance
        realm: 'your-realm', // Votre Keycloak realm
        clientId: 'your-client-id', // Client ID de votre application configurée dans Keycloak
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html',
      },
    })
}

@NgModule({
  declarations: [AppComponent],
  imports: [AppRoutingModule, BrowserModule, KeycloakAngularModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Créer un fichier HTML Silent Check-Sso :

Créez un fichier nommé silent-check-sso.html à l’intérieur du répertoire assets de votre projet Angular avec le contenu suivant :

<html>
  <body>
    <script>
      parent.postMessage(location.href, location.origin)
    </script>
  </body>
</html>

Utilisation

AuthGuard

keycloak-angular fournit un AuthGuard générique, KeycloakAuthGuard, pour protéger les routes authentifiées de votre application. Vous pouvez étendre cette garde et implémenter votre propre logique en fonction des exigences de votre application.

import { Injectable } from '@angular/core'
import {
  ActivatedRouteSnapshot,
  Router,
  RouterStateSnapshot,
} from '@angular/router'
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular'

@Injectable({
  providedIn: 'root',
})
export class AuthGuard extends KeycloakAuthGuard {
  constructor(
    protected readonly router: Router,
    protected readonly keycloak: KeycloakService,
  ) {
    super(router, keycloak)
  }

  public async isAccessAllowed(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ) {
    // Your authentication logic here
  }
}

Intercepteur HttpClient

keycloak-angular fournit un intercepteur HttpClient pour ajouter l’en-tête Authorization à toutes les requêtes HttpClient. Vous pouvez configurer des exclusions et d’autres options selon vos besoins.

Événements Keycloak-js

Les événements de keycloak-js peuvent être accédés via le subject RxJS keycloakEvents$ fourni par keycloak-angular. Vous pouvez utiliser ces événements pour différentes fonctionnalités, telles que le rafraîchissement automatique des access tokens.

Pour plus de détails et de configurations avancées, consultez le Github officiel de Keycloak Angular et la documentation Keycloak.