Angular ile Keycloak Entegrasyonu
Merhabalar,
Bu yazımızda Keycloak’a genel bir giriş yapacağız ve küçük bir Angular projesi ile entegrasyonunu sağlayacağız.
Keycloak modern uygulamalara ve hizmetlere yönelik açık kaynaklı Kimlik ve Erişim Yöntemi için bir araçtır. Uygulamaları ve hizmetleri güvenli hale getirmeyi sağlar. SSO, kimlik doğrulama ve yetkilendirme, sosyal oturum açma, çok faktörlü kimlik doğrulama ve merkezi kullanıcı yönetimi gibi çok çeşitli özellikler sunar.
Keycloak’ı projemize entegre etmenin çeşitli yolları bulunmaktadır, bu yazıda Docker’dan faydalanacağım.
İlk olarak docker-compose.yml adında bir dosya oluşturuyoruz. Keycloak’a giriş için kullanacağımız user name, password, lokalimizde kaldıracağımız port bilgisi gibi gereksinimlerimizi ayarlıyoruz.
services:
keycloak:
image: quay.io/keycloak/keycloak:12.0.1
environment:
- KEYCLOAK_USER=admin
- KEYCLOAK_PASSWORD=admin
ports:
- '8080:8080'Ardından terminalde docker-compose up komutunu çalıştırıyoruz.
Giriş sayfasına docker-compose.yml’da belirlediğimiz user name ve password ile giriş yapıyoruz.
Giriş yaptıktan sonra aşağıdaki sayfayı göreceğiz;
Menüdeki kavramlardan kısaca bahsedecek olursak
Realm: Bir dizi kullanıcıyı kimlik bilgileri, rolleri ve gruplarıyla birlikte yöneten bir nesneye atıfta bulunan kavramdır. Keycloak’daki bir kullanıcı yalnızca bir bölgeye aittir ve Keycloak’da oturum açan kullanıcı, o kullanıcının alanına giriş yapacaktır. Bir Keycloak sunucusunda birden fazla realm olabilir.
Clients: Oluşturduğumuz uygulamaları temsil eden istemciler oluşturmak için kullanılır.
Client Scopes: Uygulamanın kaynaklarına erişim verme veya reddetme kararlarına yardımcı olur.
Roles: Tanımlı rollerin tutulduğu alandır.
Identity Providers: Harici kimlik yönetimi sistemlerinin kimlik doğrulaması yapma yeteneğinden yararlanır.
User Federation: Keycloak’ın kimlik veritabanını ldap sunucuları gibi harici Kullanıcı Veritabanları ile entegre etmektir.
Authentication: Keycloak’ın varsayılan kimlik doğrulama/yetkilendirme davranışını kontrol etmektir.
Yeni bir realm yaratacağız.
Angular projemizde ayağa kaldırabilmek için bir Client yaratmamız gerekmekte. Root url’ine Angular projemizi ayağa kaldıracağımız portu veriyoruz ve kaydediyoruz.
Ardından Angular projemize geliyoruz ve environment dosyamızda aşağıdaki tanımlamaları yapıyoruz.
export const environment = {
production: false,
keycloakConfig: {
clientId: 'my-client',
url: 'http://localhost:8080/auth',
realm: 'my-project',
},
};Projemizde Keycloak kitaplıklarını kurmak için terminalde aşağıdaki komutu çalıştırıyoruz.
npm install keycloak-angular keycloak-js
Projemizin içinde Keycloak’ın başlatılmasını sağlamak için app-int.ts dosyamızı oluşturalım.
Kullanıcının sayfamıza login olmadan ulaşmasını engellemek ve Route’lardaki güvenliği sağlamak için auth-guard.ts dosyasını oluşturacağız. authenticated sayesinde kimlik doğrulaması yapılacak ve login olacak, granted kontrolü ile rol kontrolü yapılacak ve uygun rolde olmayan kullanıcı sayfaya yönlendirilmeyip, hata mesajı basılcaktır.
Keycloak modülünü içe aktarmak için auth.module.ts modülünü oluşturuyoruz. Uygulamamızı çalıştırdığımızda Keycloak’ın başlatıldığından emin olmak için APP_INITIALIZER kullandığımızdan emin olmalıyız.
Daha sonra Auth modülü app.module.ts içine aktarıyoruz.
Gerekli konfigürasyonları ayarladıktan sonra projemizde kullanacağımız componentleri tanımlayalım.
Manager Component: Yönetici sayfasında görüntüleyeceklerimiz;
getUserRoles() fonksiyonu giriş yapılan kullanıcıda tanımlı rolleri gösterir.
Employee Component: Çalışan sayfasında görüntüleyeceklerimiz;
Home Component: Ana sayfada görüntüleyeceklerimiz;
getUserName() fonksiyonu hangi kullanıcı ile giriş yapıldığını gösterir.
logOut() fonksiyonu girilen kullanıcıdan çıkış yapılmasını sağlar.
Sayfalarımızı yarattıktan sonra, erişimi kısıtlamak istediğimiz kullanıcılar için gerekli rolleri atayacağız. Örnek olarak employee ve manager rolü oluşturalım.
app.module.ts içine Route’ları ve atadığımız rolleri ekleyeceğiz.Erişimi kısıtlamak istediğimiz rotalar için AuthGuard kullanmalıyız.
Bu ayarlamalar ile sadece manager rolüne sahip olan kullanıcılar Yönetici Giriş sayfasına erişebilecek ve sadece employee rolüne sahip olan kullanıcılar Çalışan Giriş sayfasına erişebilecek.
Son olarak yeni bir kullanıcı oluşturalım ve rollerini belirleyelim.
Oluşturduğumuz test.user kullanıcısına employee rolünü atamış olduk.
Ayrıca Credentials kısmından kullanıcımıza parola belirleyebiliriz.
Terminalde npm install komutunu çalıştırarak projemizi ayağa kaldıralım.
Sayfamız açıldığında oluşturduğumuz test.user kullanıcısı ile giriş yapacağız. Kullanıcımızda employee rolü tanımlı olduğu için sadece Çalışan sayfasına yönlendirilecektir. Yönetici Girişi butonuna tıklandığında ise kullanıcı manager rolüne sahip olmadığı için, Yönetici sayfasına yönlendirilmeyecek ve hata verecektir. Sayfadan Çıkış Yap butonuna tıklandığında ise test.user kullanıcısından çıkış yapılacaktır.
Keycloak ile Angular yazımızın sonuna gelmiş bulunmaktayız. Vakit ayırdığınız için teşekkürler.
