javascript - Hur implementerar man React SPA-autentisering med Keycloak och PKCE-flöde?

Det här är första gången jag arbetar med Keycloak. Jag har förberett en Keycloak-instans på min lokala dator där jag kan skapa realm, klienter osv.

Jag hittade exempel på användning av React + Keycloak, men inget av dem använde PKCE-flödet.

Jag vet inte hur man konfigurerar Keycloak och React. Jag vet bara att klientapplikationen måste kunna generera en kodverifierare och en kodutmaning.

Jag letar efter ett enkelt exempel på hur man implementerar auktorisering med React och Keycloak som bör följa OAuth 2.0 Authorization Code Grant med PKCE-flöde eller tips om vad man ska göra på React-sidan och vad på Keycloak-sidan för att implementera OAuth 2.0.

Vad jag vill göra:

  1. Ställa in en Keycloak-instans (klar)
  2. Registrering av en offentlig klient i Keycloack (klar)
  3. Implementering av ett enkelt inloggningsscenario på webben (scenariot följer OAuth 2.0 Authorization Code Grant med PKCE-flöde)

Svar #1

(Gammal Keycloak UI)

Gå till ditt rike, och sedan till klienten och välj din klient:

  • Ställ in Access Type på public
  • Aktiverad Standardflöde aktiverat
  • Lägg till de lämpliga Valid redirect URIs och Web origins
  • Gå till Avancerade inställningar och i fältet Proof Key for Code Exchange Code Challenge Method välj S256, och klicka sedan på Spara.

(Ny Keycloak-användargränssnitt)

Välj din värld och gå sedan till klienten och klicka i din klient:

  • Ställ in Klientautentisering till AV
  • Välj Standardflöde i Autentiseringsflöde
  • Lägg till de lämpliga Giltiga omdirigerings-URI:er och Webborigin
  • Klicka på Spara-knappen
  • Gå till fliken Avancerat
  • Gå till avsnittet Avancerade inställningar och i fältet Proof Key for Code Exchange Code Challenge Method välj S256, och klicka sedan på Spara.

På adaptern i din React-applikation, lägg till "enable-pkce": true.

Från Keycloak-dokumentationen:

KeycloakInstalled-adaptern stödjer PKCE [RFC 7636]-mekanismen för att ge ytterligare skydd vid byte av kod till token i OIDC-protokollet. PKCE kan aktiveras med inställningen "enable-pkce": true i adapterkonfigurationen. Att aktivera PKCE rekommenderas starkt för att undvika kodinjektion och kodupprepningsattacker.