Menyesuaikan Halaman Login untuk Keycloak

1. Ikhtisar

Keycloak adalah server otorisasi pihak ketiga yang digunakan untuk mengelola persyaratan otentikasi dan otorisasi aplikasi web atau seluler kami. Ini menggunakan halaman login default untuk membuat pengguna login atas nama aplikasi kita.

Dalam tutorial ini, kita akan fokus pada bagaimana kita dapat menyesuaikan halaman login untuk server Keycloak kita sehingga kita dapat memiliki tampilan dan nuansa yang berbeda. Kami akan melihat ini untuk server mandiri maupun tertanam.

Kami akan membangun di atas penyesuaian tema untuk tutorial Keycloak untuk melakukan itu.

2. Menyesuaikan Server Keycloak yang Berdiri Sendiri

Melanjutkan contoh tema khusus kita, mari kita lihat server mandiri terlebih dahulu.

2.1. Pengaturan Konsol Admin

Untuk memulai server, mari buka direktori tempat distribusi Keycloak kita disimpan, dan jalankan perintah ini dari folder bin -nya :

./standalone.sh -Djboss.socket.binding.port-offset=100

Setelah server dimulai, kita hanya perlu menyegarkan halaman untuk melihat perubahan kita tercermin, berkat modifikasi yang kita lakukan sebelumnya pada standalone.xml .

Sekarang mari buat folder baru, bernama login , di dalam direktori themes / custom . Untuk mempermudah, pertama-tama kita akan menyalin semua konten direktori themes / keycloak / login di sini. Ini adalah tema halaman login default.

Kemudian, kita akan pergi ke konsol admin, kunci-dalam initial1 / zaq1 QAZ! Kredensial dan pergi ke Tema tab untuk wilayah kami:

Kami akan memilih kustom untuk Tema Login dan menyimpan perubahan kami.

Dengan set itu, sekarang kita dapat mencoba beberapa penyesuaian. Namun sebelum itu, mari kita lihat halaman login default:

2.2. Menambahkan Kustomisasi

Sekarang katakanlah kita perlu mengubah background. Untuk itu, kami akan membuka login / resources / css / login.css dan mengubah definisi kelas:

.login-pf body { background: #39a5dc; background-size: cover; height: 100%; }

Untuk melihat efeknya, mari segarkan halaman:

Selanjutnya, mari kita coba mengubah label untuk nama pengguna dan kata sandi.

Untuk mencapai itu, kita perlu membuat file baru, messages_en.properties di folder theme / login / messages . File ini mengganti paket pesan default yang digunakan untuk properti yang diberikan:

usernameOrEmail=Enter Username: password=Enter Password:

Untuk mengujinya, segarkan kembali halaman:

Misalkan kita ingin mengubah seluruh HTML atau sebagian darinya, kita perlu mengganti template freemarker yang digunakan Keycloak secara default. Template default untuk halaman login disimpan di direktori base / login .

Katakanlah kita ingin WELCOME TO BAELDUNG ditampilkan menggantikan SPRINGBOOTKEYCLOAK .

Untuk itu, kita perlu menyalin base / login / template.ftl ke folder custom / login kita .

Di file yang disalin, ubah baris:

 ${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc} 

Untuk:

 WELCOME TO BAELDUNG 

Halaman login sekarang akan menampilkan pesan kustom kami, bukan nama realm.

3. Menyesuaikan Server Keycloak Tertanam

Langkah pertama di sini adalah menambahkan semua artefak yang kami ubah untuk server mandiri ke kode sumber server otorisasi tertanam kami.

Jadi, mari buat login folder baru di dalam src / main / resources / themes / custom dengan konten berikut:

Sekarang yang perlu kita lakukan adalah menambahkan instruksi di file definisi realm kita, baeldung-realm.json sehingga custom digunakan untuk jenis tema login kita:

"loginTheme": "custom",

Kami telah dialihkan ke direktori tema kustom sehingga server kami tahu dari mana harus mengambil file tema untuk halaman login.

Untuk pengujian, mari kita buka halaman login:

Seperti yang bisa kita lihat, semua penyesuaian yang dilakukan sebelumnya untuk server mandiri, seperti latar belakang, nama label, dan judul halaman, muncul di sini.

4. Melewati Halaman Login Keycloak

Secara teknis, kami dapat sepenuhnya melewati halaman login Keycloak dengan menggunakan kata sandi atau aliran pemberian akses langsung. Namun, sangat disarankan bahwa jenis hibah ini tidak boleh digunakan sama sekali.

Dalam kasus ini, tidak ada langkah perantara untuk mendapatkan kode otorisasi, dan kemudian menerima token akses sebagai gantinya. Sebagai gantinya, kita bisa langsung mengirim kredensial pengguna melalui panggilan REST API dan mendapatkan token akses sebagai tanggapan.

Ini secara efektif berarti bahwa kita dapat menggunakan halaman login kami untuk mengumpulkan id dan password user, dan bersama dengan id klien dan rahasia, kirimkan ke Keycloak dalam POST untuk nya tanda titik akhir.

Tetapi sekali lagi, karena Keycloak menyediakan serangkaian fitur kaya opsi masuk - seperti ingat saya, setel ulang kata sandi, dan MFA - untuk beberapa nama, ada sedikit alasan untuk melewatinya.

5. Kesimpulan

Dalam tutorial ini, kita belajar bagaimana mengubah halaman login default untuk Keycloak dan menambahkan kustomisasi kita .

Kami melihat ini untuk instance mandiri dan tertanam.

Terakhir, kami secara singkat membahas cara melewati halaman login Keycloak sepenuhnya dan mengapa tidak melakukan itu.

Seperti biasa, kode sumber tersedia di GitHub. Untuk server mandiri, ada di tutorial GitHub, dan untuk instance yang disematkan, di OAuth GitHub.