Page 95 - Yazılım Teknolojileri Araştırma Bülteni 2023

Kimlik Doğrulama Altyapılarının Kullanımı | 95

Her tip ekran için, o tipin klasörü altında theme.properties oluşturulur. Burada tema icin
konfigürasyonlar yapılır. Mesela yeni oluşturulacak tema, keycloak’ın hangi temasını extend edecek

ve hangi ortak kaynakları import edecek ayarı için şunlar kullanılır.

parent=base
import=common/keycloak

Parent ayarında base yerine keycloak kullanıldığında, ekrandaki değişim gözlenebilir. Özel tema
için CSS eklemek için, tema ekran tipi klasörü altında /resources/css klasörleri yaratılır ve orada
yeni bir css dosyası oluşturulur (mesela styles.css). Daha sonra tema ekran tipinin theme.properties
dosyasına styles=css/styles.css ayarı geçilir. Yeni temaya, parent olarak kullanılan temadaki CSS’’ler
de geçilebilir. Birden fazla CSS dosyası geçebilmek için aralarında boşluk bırakılır.

styles=web_modules/@fontawesome/fontawesome-free/css/icons/all.css
web_modules/@patternfly/react-core/dist/styles/base.css
web_modules/@patternfly/reactcore/dist/styles/app.css
node_modules/patternfly/dist/css/patternfly.min.css
node_modules/patternfly/dist/css/patternfly-additions.min.css css/login.css css/
styles.css

En sondaki CSS dosyası, kendisinden önceki tanımlanmış dosyaları ezer. Bu yüzden, yeni oluşturulan
temaya ait CSS dosyası, en sonda tanımlanmalıdır.

Yeni tema için JavaScript eklemek için, tema ekran tipi klasörü altında /resources/js klasörleri
yaratılır ve orada yeni js dosyası oluşturulur (mesela script.js). Daha sonra tema ekran tipinin theme.
properties dosyasına scripts=js/script.js ayarı geçilir. Yeni temaya resim eklemek için, tema ekran
tipi klasörü altında /resources/img klasörleri yaratılır ve resimler buraya atılır (mesela image.jpg). Bu
image, CSS içerisinde url(‘../img/image.jpg’) şeklinde ya da FTL içerisinde src=”${url.resourcesPath}/
img/image.jpg” şeklinde kullanılır.

Ekranlardaki metinler, message bundle’lardan yüklenir. Eğer yeni yaratılan tema başka bir temayı
genişletiyorsa (extend), base temadaki mesajlar da alınır. Base temadaki mesajları ezmek için,

tema ekran tipi klasörü altında, /messages/messages_en.properties dosyası oluşturulur. Keycloak,
varsayılan olarak ingilizce dilini desteklemektedir. Çoklu dil desteği (internationalization) yapabilmek
için, oluşturulan dosyalara locale bilgisi eklenir (messages_<locale>.properties). Daha sonra theme.
properties’e locale ayarları geçilir.

locales=en,tr

Kendi ekranlarımızı oluşturmak için tema ekran tipi klasörü altında template dosyaları oluşturulur.
Keycloak, HTML yaratmak için Apache Freemaker Template’leri (FTL) kullanır. Ayrıca base temadan

gelen şablonlar da override edilebilir. Tüm şablon listesine keycloak kaynak kodundaki themes/
base/ klasörü altından erişilebilir.