Ricerca nel sito web

javascript - Come implementare l'autenticazione SPA React con Keycloak e il flusso PKCE?

Questa è la prima volta che lavoro con Keycloak. Ho preparato un'istanza di Keycloak sulla mia macchina locale in cui posso creare realm, client, ecc.

Ho trovato esempi di utilizzo di React + Keycloak, ma nessuno di essi utilizzava il flusso PKCE.

Non so come configurare Keycloak e React. So solo che l'applicazione client deve essere in grado di generare un code verifier e un code challenge.

Sto cercando un esempio semplice di implementazione dell'autorizzazione utilizzando React e Keycloak che dovrebbe seguire il flusso OAuth 2.0 Authorization Code Grant con PKCE o consigli su cosa fare dalla parte di React e cosa dalla parte di Keycloak per implementare OAuth 2.0.

Quello che voglio fare:

  1. Configurazione di un'istanza Keycloak (pronta)
  2. Registrazione di un client pubblico in Keycloak (pronto)
  3. Implementazione di uno scenario di login semplice sul web (lo scenario segue OAuth 2.0 Authorization Code Grant con PKCE Flow)

Risposta n. 1

(Vecchia interfaccia Keycloak)

Vai al tuo Regno, e poi al cliente e seleziona il tuo cliente:

  • Imposta Tipo di accesso su pubblico
  • Abilitato Flusso Standard Abilitato
  • Aggiungi gli appropriati Valid redirect URIs e Web origins
  • Vai su Impostazioni avanzate e nel campo Metodo di Sfida del Codice per la Prova di Scambio di Codice seleziona S256, quindi clicca su Salva.

(Nuova interfaccia Keycloak)

Seleziona il tuo Regno, poi vai nel client e clicca nel tuo client:

  • Imposta Autenticazione client su OFF
  • In Flusso di autenticazione seleziona Flusso standard
  • Aggiungi gli appropriati Valid redirect URIs e Web origins
  • Fai clic sul pulsante Salva
  • Vai alla scheda Avanzate
  • Vai alla sezione Impostazioni Avanzate e nel campo Metodo di Sfida del Codice per il Cambiamento della Chiave di Verifica seleziona S256, quindi clicca su Salva.

Sull'adattatore della tua applicazione React aggiungi "enable-pkce": true.

Dalla documentazione di Keycloak:

L'adattatore KeycloakInstalled supporta il meccanismo PKCE [RFC 7636] per fornire una protezione aggiuntiva durante lo scambio di codici per token nel protocollo OIDC. PKCE può essere abilitato con l'impostazione "enable-pkce": true nella configurazione dell'adattatore. Abilitare PKCE è fortemente raccomandato per evitare attacchi di iniezione di codici e di ripetizione dei codici.