Avant de commencer à intégrer Keycloak avec votre application Angular, vous devez savoir que Keycloak offre la prise en charge du protocole OpenID Connect (OIDC). Si vous souhaitez intégrer OpenID Connect avec Angular, vous pouvez consulter ce Guide OpenID Connect Angular.

Comment configurer Keycloak dans un projet Angular

Keycloak est une solution open-source de gestion des identités et des accès, hautement extensible, qui fournit 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 accompagnera tout au long du processus de configuration de Keycloak dans votre projet Angular en utilisant keycloak-angular.

Prérequis

Avant de commencer, assurez-vous de disposer des é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 :

Terminal window
npm install keycloak-angular keycloak-js

Configuration

Configuration Angular

Dans votre projet Angular, vous devez initialiser Keycloak au démarrage de votre application. Cela garantit que Keycloak est prêt pour l’authentification dans toute votre application. Modifiez votre AppModule pour inclure la logique d’initialisation :

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 de votre instance Keycloak
        realm: 'your-realm', // Votre realm Keycloak
        clientId: 'your-client-id', // Client ID configuré 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 le fichier HTML Silent Check-Sso :

Créez un fichier nommé silent-check-sso.html dans le 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 dans votre application. Vous pouvez étendre ce guard 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,
  ) {
    // Votre logique d'authentification ici
  }
}

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 sont accessibles via le sujet RxJS keycloakEvents$ fourni par keycloak-angular. Vous pouvez utiliser ces événements pour diverses fonctionnalités, telles que le rafraîchissement automatique des tokens d’accès.

Pour plus de détails et des configurations avancées, consultez le GitHub officiel de Keycloak Angular et la Documentation Keycloak.