Menyesuaikan Halaman Log Masuk untuk Keycloak

1. Gambaran keseluruhan

Keycloak adalah pelayan kebenaran pihak ketiga yang digunakan untuk menguruskan keperluan pengesahan dan kebenaran aplikasi web atau mudah alih kami. Ia menggunakan halaman log masuk lalai untuk log masuk pengguna atas nama aplikasi kami.

Dalam tutorial ini, kita akan memfokuskan pada bagaimana kita dapat menyesuaikan halaman log masuk untuk pelayan Keycloak kita sehingga kita dapat memiliki tampilan dan nuansa yang berbeda. Kami akan melihatnya untuk pelayan yang berdiri sendiri dan juga pelekat.

Kami akan menggunakan tema penyesuaian untuk tutorial Keycloak untuk melakukannya.

2. Menyesuaikan Pelayan Keycloak Berdiri

Teruskan dengan contoh tema tersuai kami , mari kita lihat pelayan mandiri terlebih dahulu.

2.1. Tetapan Konsol Pentadbir

Untuk memulakan pelayan, mari menuju ke direktori di mana pengedaran Keycloak kami disimpan, dan jalankan perintah ini dari folder tong sampahnya :

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

Setelah pelayan dimulakan, kami hanya perlu memuat semula halaman untuk melihat perubahan kami tercermin, berkat pengubahsuaian yang kami buat sebelumnya kepada standalone.xml .

Sekarang mari kita buat folder baru, bernama login , di dalam tema / direktori tersuai . Untuk memastikan semuanya mudah, pertama-tama kami menyalin semua kandungan direktori tema / keycloak / log masuk di sini. Ini adalah tema halaman log masuk lalai.

Kemudian, kita akan pergi ke konsol pentadbir, masukkan kelayakan awal1 / zaq1! QAZ dan pergi ke tab Tema untuk wilayah kita:

Kami akan memilih khusus untuk Tema Masuk dan menyimpan perubahan kami.

Dengan set itu, kita sekarang boleh mencuba beberapa penyesuaian. Tetapi sebelum itu, mari kita lihat halaman log masuk lalai:

2.2. Menambah Penyesuaian

Sekarang katakan kita perlu mengubah latar belakang. Untuk itu, kami akan membuka log masuk / sumber / css / login.css dan mengubah definisi kelas:

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

Untuk melihat kesannya, mari muat semula halaman:

Seterusnya, mari kita cuba menukar label untuk nama pengguna dan kata laluan.

Untuk mencapainya, kita perlu membuat fail baru, message_en.properties dalam folder tema / log masuk / mesej . Fail ini menggantikan kumpulan mesej lalai yang digunakan untuk sifat yang diberikan:

usernameOrEmail=Enter Username: password=Enter Password:

Untuk menguji, muat semula halaman:

Andaikan kita ingin mengubah keseluruhan HTML atau sebahagian daripadanya, kita perlu mengganti templat freemarker yang digunakan oleh Keycloak secara lalai. Templat lalai untuk halaman log masuk disimpan di direktori asas / log masuk .

Katakan kita mahu SELAMAT DATANG BAELDUNG dipaparkan sebagai pengganti SPRINGBOOTKEYCLOAK .

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

Dalam fail yang disalin, ubah baris:

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

Kepada:

 WELCOME TO BAELDUNG 

Halaman log masuk sekarang akan memaparkan pesanan khusus kami dan bukannya nama wilayah.

3. Menyesuaikan Pelayan Keycloak Terbenam

Langkah pertama di sini adalah menambahkan semua artifak yang kita ubah untuk pelayan mandiri ke kod sumber pelayan kebenaran tertanam kami.

Oleh itu, mari buat folder masuk baru di dalam src / main / resources / tema / custom dengan kandungan berikut:

Sekarang yang perlu kita lakukan adalah menambahkan arahan dalam fail definisi bidang kita, baeldung-realm.json supaya custom digunakan untuk jenis tema log masuk kita:

"loginTheme": "custom",

Kami telah mengalihkan ke direktori tema khusus sehingga pelayan kami tahu dari mana mengambil fail tema untuk halaman log masuk.

Untuk ujian, mari tekan halaman log masuk:

Seperti yang kita lihat, semua penyesuaian yang dilakukan lebih awal untuk pelayan mandiri, seperti latar belakang, nama label, dan judul halaman, muncul di sini.

4. Memintas Halaman Log Masuk Keycloak

Secara teknikalnya, kita dapat memintas halaman masuk Keycloak sepenuhnya dengan menggunakan kata laluan atau aliran pemberian akses langsung. Walau bagaimanapun, sangat disyorkan bahawa jenis pemberian ini tidak boleh digunakan sama sekali.

Dalam kes ini, tidak ada langkah perantara untuk mendapatkan kod kebenaran, dan kemudian menerima token akses sebagai pertukaran. Sebagai gantinya, kami boleh terus menghantar bukti kelayakan pengguna melalui panggilan API REST dan mendapatkan token akses sebagai tindak balas.

Ini dengan berkesan cara yang boleh kita gunakan halaman web kami untuk mengumpul id dan kata laluan pengguna, dan bersama-sama dengan id pelanggan dan rahsia, hantar ke Keycloak dalam POST kepada yang tanda titik akhir.

Tetapi sekali lagi, kerana Keycloak menyediakan rangkaian pilihan pilihan masuk yang kaya - seperti ingat saya, tetapkan semula kata laluan, dan MFA - untuk menyebutkan beberapa, ada sedikit alasan untuk memintasnya.

5. Kesimpulan

Dalam tutorial ini, kami belajar bagaimana mengubah halaman log masuk lalai untuk Keycloak dan menambahkan penyesuaian kami .

Kami melihat ini untuk contoh yang berdiri sendiri dan yang tersemat.

Terakhir, kami secara ringkas membincangkan cara memintas laman masuk Keycloak sepenuhnya dan mengapa tidak melakukannya.

Seperti biasa, kod sumber tersedia di GitHub. Untuk pelayan mandiri, ia ada di tutorial GitHub, dan untuk contoh terbenam, di OAuth GitHub.