javascript - Bagaimana mengimplementasikan autentikasi React SPA dengan Keycloak dan alur PKCE?

Ini adalah pertama kalinya saya bekerja dengan Keycloak. Saya telah menyiapkan sebuah instance Keycloak di mesin lokal saya di mana saya bisa membuat realm, klien, dll.

Saya menemukan contoh penggunaan React + Keycloak, tetapi tidak ada satupun yang menggunakan aliran PKCE.

Saya tidak tahu bagaimana mengonfigurasi Keycloak dan React. Saya hanya tahu bahwa aplikasi klien harus dapat menghasilkan code verifier dan code challenge.

Saya sedang mencari contoh sederhana tentang implementasi otorisasi menggunakan React dan Keycloak yang seharusnya mengikuti OAuth 2.0 Authorization Code Grant dengan PKCE Flow atau tips tentang apa yang harus dilakukan di sisi React dan apa yang harus dilakukan di sisi Keycloak untuk mengimplementasikan OAuth 2.0.

Apa yang ingin saya lakukan:

  1. Menyetel instance Keycloak (siap)
  2. Pendaftaran klien publik di Keycloack (siap)
  3. Implementasi skenario login sederhana di web (skenario ini mengikuti OAuth 2.0 Authorization Code Grant dengan Alur PKCE)

Jawaban #1

(UI Keycloak Lama)

Pergi ke Wilayah Anda, lalu ke klien dan pilih klien Anda:

  • Atur Access Type ke public
  • Diaktifkan Aliran Standar Diaktifkan
  • Tambahkan Valid redirect URIs dan Web origins yang sesuai
  • Pergi ke Pengaturan Lanjutan dan di bidang Metode Tantangan Kode untuk Bukti Pertukaran Kode pilih S256, lalu klik Simpan.

(UI Keycloak Baru)

Pilih Wilayah Anda, lalu pergi ke klien dan klik di klien Anda:

  • Atur Otentikasi klien ke MATI
  • Di Authentication Flow pilih Standard flow
  • Tambahkan Valid redirect URIs dan Web origins yang sesuai
  • Klik tombol Simpan
  • Buka tab Advanced
  • Pergi ke bagian Pengaturan Lanjutan dan di bidang Metode Tantangan Kode untuk Bukti Pertukaran Kode pilih S256, lalu klik Simpan.

Pada adaptor aplikasi React Anda tambahkan "enable-pkce": true.

Dari dokumentasi Keycloak:

Adaptor KeycloakInstalled mendukung mekanisme PKCE [RFC 7636] untuk memberikan perlindungan tambahan selama pertukaran kode ke token dalam protokol OIDC. PKCE dapat diaktifkan dengan pengaturan "enable-pkce": true dalam konfigurasi adaptor. Mengaktifkan PKCE sangat disarankan, untuk menghindari injeksi kode dan serangan pengulangan kode.