javascript - Comment implémenter l'authentification d'une SPA React avec Keycloak et le flux PKCE ?

C'est ma première fois à travailler avec Keycloak. J'ai préparé une instance de Keycloak sur ma machine locale dans laquelle je peux créer des realms, des clients, etc.

J'ai trouvé des exemples d'utilisation de React + Keycloak, mais aucun d'entre eux n'utilisait le flux PKCE.

Je ne sais pas comment configurer Keycloak et React. Je sais seulement que l'application cliente doit être capable de générer un vérificateur de code et un défi de code.

Je cherche un exemple simple d'implémentation de l'autorisation en utilisant React et Keycloak, qui devrait suivre le flux OAuth 2.0 Authorization Code Grant avec PKCE, ou des conseils sur ce qu'il faut faire du côté de React et du côté de Keycloak pour implémenter OAuth 2.0.

Ce que je veux faire :

  1. Configuration d'une instance Keycloak (prête)
  2. Enregistrement d'un client public dans Keycloack (prêt)
  3. Mise en œuvre d'un scénario de connexion simple sur le web (le scénario suit le flux d'autorisation OAuth 2.0 avec le code de consentement PKCE)

Réponse #1

(Ancienne interface Keycloak)

Allez dans votre royaume, puis dans client et sélectionnez votre client :

  • Définir Type d'accès sur public
  • Activé Flux standard activé
  • Ajoutez les URI de redirection valides et origines web appropriés
  • Allez dans Paramètres avancés et dans le champ Méthode de défi de code pour l'échange de clé de preuve, sélectionnez S256, puis cliquez sur Enregistrer.

(Nouvelle interface Keycloak)

Sélectionnez votre royaume, puis allez dans le client et cliquez dans votre client :

  • Définir Authentification du client sur OFF
  • Dans Flux d’authentification, sélectionnez Flux standard
  • Ajoutez les URI de redirection valides et les origines Web appropriés
  • Cliquez sur le bouton Enregistrer
  • Allez à l'onglet Avancé
  • Allez à la section Paramètres avancés et dans le champ Méthode de défi de code pour la clé de preuve d’échange de code sélectionnez S256, puis cliquez sur Enregistrer.

Sur l'adaptateur de votre application React, ajoutez "enable-pkce" : true.

Extrait de la documentation de Keycloak :

L'adaptateur KeycloakInstalled prend en charge le mécanisme PKCE [RFC 7636] pour fournir une protection supplémentaire lors des échanges de code contre jeton dans le protocole OIDC. Le PKCE peut être activé avec le paramètre "enable-pkce": true dans la configuration de l'adaptateur. Il est fortement recommandé d'activer le PKCE afin d'éviter les attaques par injection de code et par réutilisation de code.