t-angular-boilerplate-keycloak

Modüler Angular projesi geliştirmesi için tasarlanmıştır.

Proje bağımlılıkları

Proje Angular CLI versiyon 11.2.7 kullanılarak oluşturmuştur.

Ek olarak;

Material Angular projeye dahil edilmiştir. styles.scss dosyasına özelleştirilmiş tema alanları eklenmiştir.

ng add @angular/material
Ng-Select kütüphanesi eklenmiştir. Materyal tasarım componentleri için styles.scss dosyasına ilgili css dosyası eklenmiştir.

npm install --save @ng-select/ng-select
Kimlik Yönetimi ve Yetkilendirme işlemleri için Keycloak kütüphaneleri eklenmiştir.

npm i --save keycloak-js

npm i --save keycloak-angular

Projeyi Geliştirme Sunucunda Koşturma

npm install ile proje bağımlıkları yüklenmelidir.

ng serve komutu çalıştırılacak geliştirme sunucusunda proje ayağa kalkacaktır. http://localhost:4200/ adresi kullanılarak projeye erişilebilir.

Projeyi Canlı Sisteme Alma

Burada uygulamanın Tomcat sunucusuna nasıl yükleneceği anlatılmaktadır. Tomcat dosya dizininde uygulamalar /webapps/ altında tutulmaktadır. Tomcate bir uygulama yüklendiğinde ilgili proje ismiyle Tomcat üzerinde bir subrouting url oluşmaktadır.

index.html dosyasına bu subrouting ile erişilmek istenildiğinde, eğer base-href bilgisi verilmez ise hata oluşmaktadır.

ng build --prod --base-href /proje-ismi/ komutu çalıştırılarak dist/ klasörü altında canlıya alınacak kodları içeren klasör otomatik oluşturulur.
Tomcat'e atılacak olan bu klasör ismi base-href deki verilen tanımlamadan farklı ise güncellenmelidir.
Bu klasör /webapps/ dosya yoluna taşınması yeterli olacakıtr. Tomcat yüklenmeyi otomatik tamamlayacaktır.

Tomcat'e yüklenen bu projeye DNS Tanımlaması ile erişilmek istenirse

Uygulamayı deploy etmek için ng build kullanılır. Uygulama Tomcat'e deploy etmek istediğimizde, Tomcat uygulamanın klasörü ismiyle altyol oluşturuyor. Bu yol üzerinden uygulamaya erişilmektedir. Varsayılan base-href="/". Eğer Base href tanımlaması yapılmaz ise, uygulamanın çağırdığı kütüphaneler root'tan yüklenmek istenecektir. Uygulamaya erişim altyoldan açıldığından çalışmayacaktır.

Uygulamanın koştuğu makineye Apache Server veya Nginx kullanılarak DNS tanımlaması uygulama katmanı ile Reserve Proxy yöntemi ile tanımlanmaktadır. Bu erişim noktasında Reverse Proxy yönlendirilmesinden sonra, eğer base-href için "/" den farklı bir tanımlama yapılmış ise uygulama içerinde çağrılan kütüphanelerinin hatalı dosya yolundan yükleneceği için hata verecektir.

Canlı sisteme alınacak kodların derlenmesi için, ng build --prod komutunun çalıştırılması yeterli olacaktır.

Proje Detayları

Proje 4 ana yapıdan oluşmaktadır.

Core

Proje temelinde bulunan Service, Guard, Interceptor fonksiyonları burada bulunmaktadır.

Guards: Keycloak Rol tabanlı yetkilendirme ve module yüklenmesi kontrolü yapan Guard'ları içermektedir.
Interceptors: Http gönderilen istek içerisine özel alanlar ekleme ve alınan HTTP cevaba göre Keycloak kimlik doğrulama işlemlerini içeren HTTP Interceptor ler içermektedir.
Services: HttpClient ile Rest Api ile konuşulmasını yöneten servisi ve özelleştirilmiş servisleri içerir.

Layout

Temel tasarım componentlerini barındırır. Masterpage componentler olarak düşünülebilir.

Content Layout: Uygulama içerik alanlarının barınacağı componentlerin tasarım componenti
Auth Layout: Kimlik kontrolü alanlarının barınacağı componentlerin tasarım componenti
Footer: Altbilgi componenti
Nav: Navigasyon menüsü componenti

Modules

Uygulama içerisindeki her routing için bir module bulunmaktadır. Bu modüller içerisinde kendi alt routing fonksiyonu ve pages alanı bulunmaktadır. Pages içerisinde modül ile ilgili componentler tutulmaktadır.

İçerik oluşması adına 3 adet modül eklenmiştir.

Dashboard: Kullanıcı ve Adminlerin işlem yapma yetkisi olan modüldür. Uygulama anasayfası olarak düşünülebilir.
Admin: Sadece Adminlerin işlem yapma yetkisi olan modüldür.
Auth: Kimlik doğrulama aksiyonları için eklenen modüldür. Yetkilenmeme durumuyla ilgili componenti içerir. Bunun yanı sıra login, register gibi componentler de bu modül içerisine eklenebilir.

Shared

Proje içerisinde ortak kullanımda olan Component, Pipe, Directive, function, model, service gibi fonksiyonlar burada tutulmaktadır.

Services: Validation ve Toast servisleri eklenmiştir.
Components: Toast componenti ve Toast animasyon, konfigürasyonlarını içeren custom component bulunmaktadır.
Models: Model sınıflarını içerir.
Material.module: Angular Material Design Componentlerinin import, export larının tek bir noktaya toplandığı modüldür.

Projede Yapılması Gereken Düzenlemeler

index.html ve environment.ts dosyalarında uygulama konfigürasyonları bulunmaktadır. Burada Keycloak tanımlamaları eklenmeli, Rest API bilgileri doldurulmalıdır. Birden fazla Rest API etkileşimi için tanımlamalar çoğaltılmalıdır.
Uygulamaya şu anda doğrudan erişilebilebilmektedir. Eğer kimlik doğrulama aktif hale getirilmek isteniyorsa Keycloak tanımlamaları hazır olduktan sonra, app.module.ts AppModule yorum haline bırakılmış alanlar açılıp, kaldırılması gereken yerler düzenlemelidir.
environment.ts dosyasındaki isMock değeri false olarak güncellenmelidir. Böylelikle content-layout.component.ts içerisinde kullanıcı bilgileri mock yerine Keycloak servisinden yüklenecektir.
Modüllerde yetkilendirme katmanının etkileştirilmesi için, app-routing.module.ts dosyasındaki route dizisindeki yorum halinde tutulan Guard alanlarının açılmalıdır.
Proje detayları doğrultusunda, var olan modüller güncellenebilir, yeni componentler ve modüller eklenebilir.
Güncellenen proje ismiyle angular.json, app.e2e-spec.ts ve karma.conf.js dosyalarındaki proje isimleri güncellenebilir.

hakanyildiz/t-angular-boilerplate-keycloak