javascript - Ako implementovať autentifikáciu React SPA pomocou Keycloak a PKCE flow?

Toto je môj prvý raz, čo pracujem s Keycloakom. Pripravil som si inštanciu Keycloak na svojom lokálnom počítači, v ktorej môžem vytvárať realmy, klientov atď.

Našiel som príklady použitia React + Keycloak, ale žiadny z nich nepoužíval PKCE tok.

Neviem, ako nakonfigurovať Keycloak a React. Viem len, že klientská aplikácia musí byť schopná vygenerovať overovateľný kód a výzvu kódu.

Hľadám jednoduchý príklad implementácie autorizácie pomocou Reactu a Keycloak, ktorý by mal nasledovať OAuth 2.0 Authorization Code Grant s PKCE flow, alebo tipy, čo robiť na strane Reactu a čo na strane Keycloaku na implementáciu OAuth 2.0.

Čo chcem robiť:

  1. Nastavenie inštancie Keycloak (pripravené)
  2. Registrácia verejného klienta v Keycloacku (hotovo)
  3. Implementácia jednoduchého scenára prihlásenia na webe (scenár nasleduje OAuth 2.0 Authorization Code Grant s PKCE flow)

Odpoveď č. 1

(Staré používateľské rozhranie Keycloak)

Prejdite do svojho Kráľovstva, potom do klienta a vyberte svojho klienta:

  • Nastavte Typ prístupu na verejný
  • Povolené Štandardný tok povolený
  • Pridajte príslušné Platné presmerovacie URI a Webové pôvody
  • Prejdite do Rozšírené nastavenia a v poli Metóda výzvy kódu pre výmenu kľúča dôkazu vyberte S256 a potom kliknite na Uložiť.

(Nové používateľské rozhranie Keycloak)

Vyberte svoj ríšu a potom prejdite do klienta a kliknite vo svojom klientovi:

  • Nastavte Overenie klienta na VYP
  • V Authentication Flow vyberte Standard flow
  • Pridajte príslušné Platné presmerovacie URI a Webové pôvody
  • Kliknite na tlačidlo Uložiť
  • Prejdite na kartu Rozšírené
  • Prejdite na sekciu Pokročilé nastavenia a v poli Proof Key for Code Exchange Code Challenge Method vyberte S256, a potom kliknite na Uložiť.

Na adaptéry vašej React aplikácie pridajte "enable-pkce": true.

Z dokumentácie Keycloak:

Adaptér KeycloakInstalled podporuje mechanizmus PKCE [RFC 7636], ktorý poskytuje dodatočnú ochranu počas výmeny kódu za token v protokole OIDC. PKCE je možné povoliť nastavením "enable-pkce": true v konfigurácii adaptéra. Povolenie PKCE je veľmi odporúčané, aby sa predišlo útokom typu code injection a code replay.