{"id":35252,"date":"2025-11-27T12:30:56","date_gmt":"2025-11-27T09:30:56","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/"},"modified":"2025-11-27T12:30:56","modified_gmt":"2025-11-27T09:30:56","slug":"angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/","title":{"rendered":"Angular&#8217;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi"},"content":{"rendered":"<p><body><\/p>\n<p>\n        Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular&#8217;da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.\n    <\/p>\n<p>\n        Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n ki\u015fisel verilerini, hassas i\u015f bilgilerini ve \u00f6zel i\u00e7eriklerini bar\u0131nd\u0131r\u0131r. Bu t\u00fcr verilerin yetkisiz eri\u015fime kar\u015f\u0131 korunmas\u0131, uygulaman\u0131n g\u00fcvenilirli\u011fi ve kullan\u0131c\u0131 gizlili\u011fi a\u00e7\u0131s\u0131ndan olmazsa olmazd\u0131r. Angular gibi tek sayfa uygulama (SPA) \u00e7at\u0131lar\u0131nda kimlik do\u011frulama ve yetkilendirme mekanizmalar\u0131, sadece kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc korumakla kalmaz, ayn\u0131 zamanda backend API&#8217;lerine yap\u0131lan t\u00fcm isteklerin de g\u00fcvenli\u011fini sa\u011flar. Kullan\u0131c\u0131lar bir uygulamaya giri\u015f yapt\u0131klar\u0131nda, sistem onlar\u0131n kimli\u011fini do\u011frular ve bu kimli\u011fe dayanarak hangi kaynaklara eri\u015febileceklerini belirler. Bu s\u00fcre\u00e7, sadece uygulaman\u0131n b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korumakla kalmaz, ayn\u0131 zamanda yasal d\u00fczenlemelere (\u00f6rne\u011fin GDPR, KVKK) uyum sa\u011flaman\u0131n da anahtar\u0131d\u0131r.\n    <\/p>\n<p>\n        G\u00fcvenli bir kimlik do\u011frulama sistemi olmadan, k\u00f6t\u00fc niyetli ki\u015filer kullan\u0131c\u0131 hesaplar\u0131na s\u0131zabilir, hassas verilere eri\u015febilir ve hatta sistem \u00fczerinde yetkisiz i\u015flemler ger\u00e7ekle\u015ftirebilirler. Bu durum, hem kullan\u0131c\u0131lar\u0131n g\u00fcvenini sarsar hem de uygulaman\u0131n itibar\u0131na zarar verir. Ayr\u0131ca, yetkisiz eri\u015fim, veri ihlallerine yol a\u00e7abilir ve ciddi hukuki sonu\u00e7lar do\u011furabilir. Dolay\u0131s\u0131yla, Angular geli\u015ftiricileri olarak, kimlik do\u011frulama ve yetkilendirme mekanizmalar\u0131n\u0131 tasarlarken en iyi g\u00fcvenlik pratiklerini uygulamak zorunday\u0131z. \u00d6rne\u011fin, zay\u0131f \u015fifrelerin engellenmesi, \u00e7ok fakt\u00f6rl\u00fc kimlik do\u011frulama (MFA) se\u00e7eneklerinin sunulmas\u0131 ve \u015fifrelerin g\u00fcvenli bir \u015fekilde saklanmas\u0131 gibi \u00f6nlemler, sistemin genel g\u00fcvenlik duru\u015funu \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bir di\u011fer \u00f6nemli nokta ise, kullan\u0131c\u0131 oturumlar\u0131n\u0131n do\u011fru y\u00f6netilmesi ve s\u00fcresi dolan veya ge\u00e7ersiz hale gelen oturumlar\u0131n otomatik olarak sonland\u0131r\u0131lmas\u0131d\u0131r. Bu, \u00f6zellikle ortak kullan\u0131lan bilgisayarlarda veya mobil cihazlarda kullan\u0131c\u0131lar\u0131n oturumlar\u0131n\u0131 a\u00e7\u0131k unutma riskini azalt\u0131r.\n    <\/p>\n<p>\n        Bu s\u00fcre\u00e7te, Angular&#8217;\u0131n sa\u011flad\u0131\u011f\u0131 g\u00fc\u00e7l\u00fc mod\u00fcler yap\u0131 ve servis odakl\u0131 mimari, kimlik do\u011frulama mant\u0131\u011f\u0131n\u0131 uygulaman\u0131n geri kalan\u0131ndan ba\u011f\u0131ms\u0131z hale getirmeye olanak tan\u0131r. Bir <code>AuthService<\/code> olu\u015fturarak t\u00fcm kimlik do\u011frulama i\u015flemlerini tek bir yerde y\u00f6netebilir, b\u00f6ylece kod tekrar\u0131n\u0131 \u00f6nleyebilir ve bak\u0131m\u0131 kolayla\u015ft\u0131rabiliriz. Ayr\u0131ca, Angular&#8217;\u0131n y\u00f6nlendirme korumalar\u0131 (route guards) sayesinde, belirli rotalara eri\u015fimi sadece yetkili kullan\u0131c\u0131lara \u00f6zel hale getirmek m\u00fcmk\u00fcnd\u00fcr. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirirken, ayn\u0131 zamanda yetkisiz kullan\u0131c\u0131lar\u0131n hassas sayfalara eri\u015fimini engelleyerek uygulaman\u0131n katmanl\u0131 g\u00fcvenli\u011fini sa\u011flar. Sonu\u00e7 olarak, kapsaml\u0131 bir kimlik do\u011frulama stratejisi, yaln\u0131zca zorunlu bir g\u00fcvenlik \u00f6nlemi de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n uygulaman\u0131za duydu\u011fu g\u00fcveni art\u0131ran kritik bir yat\u0131r\u0131m niteli\u011findedir. Bu yat\u0131r\u0131m, uygulaman\u0131z\u0131n uzun vadeli ba\u015far\u0131s\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi i\u00e7in temel bir gerekliliktir.\n    <\/p>\n<h3>Kimlik Do\u011frulama ve Yetkilendirme Aras\u0131ndaki Temel Farklar Nelerdir?<\/h3>\n<p>\n        Kimlik do\u011frulama (Authentication) ve yetkilendirme (Authorization) terimleri genellikle birbiriyle kar\u0131\u015ft\u0131r\u0131lsa da, asl\u0131nda birbirinden farkl\u0131 ve birbirini tamamlayan iki g\u00fcvenlik s\u00fcrecini ifade eder. Bu iki kavram\u0131 net bir \u015fekilde anlamak, Angular uygulaman\u0131z\u0131n g\u00fcvenlik mimarisini do\u011fru bir \u015fekilde tasarlaman\u0131z i\u00e7in kritik \u00f6neme sahiptir.\n    <\/p>\n<p>\n        <strong>Kimlik Do\u011frulama (Authentication):<\/strong> Bu s\u00fcre\u00e7, &#8220;Sen kimsin?&#8221; sorusuna yan\u0131t arar. Kullan\u0131c\u0131n\u0131n iddia etti\u011fi ki\u015fi olup olmad\u0131\u011f\u0131n\u0131 do\u011frulamakla ilgilidir. Genellikle bir kullan\u0131c\u0131 ad\u0131 ve \u015fifre kombinasyonu ile ger\u00e7ekle\u015ftirilir, ancak biyometrik veriler, tek kullan\u0131ml\u0131k \u015fifreler (OTP) veya \u00e7ok fakt\u00f6rl\u00fc kimlik do\u011frulama (MFA) gibi daha geli\u015fmi\u015f y\u00f6ntemler de kullan\u0131labilir. Kimlik do\u011frulama ba\u015far\u0131l\u0131 oldu\u011funda, sistem kullan\u0131c\u0131n\u0131n kimli\u011fini teyit eder ve ona benzersiz bir tan\u0131mlay\u0131c\u0131 (genellikle bir token) atar. Bu token, kullan\u0131c\u0131n\u0131n sonraki t\u00fcm isteklerinde kimli\u011fini kan\u0131tlamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir web sitesine e-posta adresiniz ve \u015fifrenizle giri\u015f yapman\u0131z, kimlik do\u011frulama s\u00fcrecidir. Sistem, girdi\u011finiz bilgileri kendi veritaban\u0131ndaki bilgilerle kar\u015f\u0131la\u015ft\u0131r\u0131r ve e\u015fle\u015fme durumunda kimli\u011finizi onaylar. Kimlik do\u011frulama olmadan yetkilendirme yap\u0131lamaz, \u00e7\u00fcnk\u00fc sistem kimin neye eri\u015fmek istedi\u011fini bilemez. Dolay\u0131s\u0131yla, kimlik do\u011frulama, g\u00fcvenlik zincirindeki ilk ve en temel ad\u0131md\u0131r.\n    <\/p>\n<p>\n        <strong>Yetkilendirme (Authorization):<\/strong> Kimlik do\u011frulama ba\u015far\u0131l\u0131 olduktan sonra devreye giren yetkilendirme, &#8220;Bu ki\u015fi ne yapmaya yetkili?&#8221; sorusuna yan\u0131t verir. Yani, bir kullan\u0131c\u0131n\u0131n belirli bir kayna\u011fa (\u00f6rne\u011fin bir sayfa, bir dosya, bir API u\u00e7 noktas\u0131) eri\u015fim izni olup olmad\u0131\u011f\u0131n\u0131 veya belirli bir eylemi (\u00f6rne\u011fin veri okuma, yazma, silme) ger\u00e7ekle\u015ftirme yetkisine sahip olup olmad\u0131\u011f\u0131n\u0131 belirler. Yetkilendirme kararlar\u0131 genellikle kullan\u0131c\u0131n\u0131n rol\u00fcne (admin, editor, user vb.), grup \u00fcyeli\u011fine veya belirli izin setlerine dayan\u0131r. \u00d6rne\u011fin, bir y\u00f6netici kullan\u0131c\u0131s\u0131n\u0131n, normal bir kullan\u0131c\u0131n\u0131n yapamad\u0131\u011f\u0131 ayarlar\u0131 de\u011fi\u015ftirmesine izin verilmesi bir yetkilendirme \u00f6rne\u011fidir. Angular uygulamalar\u0131nda, <code>CanActivate<\/code> gibi y\u00f6nlendirme korumalar\u0131 (route guards) ve API taraf\u0131nda her iste\u011fin yetkilendirme ba\u015fl\u0131klar\u0131n\u0131n kontrol edilmesi, yetkilendirme mekanizmalar\u0131n\u0131n temelini olu\u015fturur. Bu sayede, kullan\u0131c\u0131 kimli\u011fi do\u011fruland\u0131ktan sonra bile, sadece yetkili oldu\u011fu i\u015flemleri yapmas\u0131na veya sayfalara eri\u015fmesine izin verilir. Bu ayr\u0131m, uygulaman\u0131n g\u00fcvenlik modelini \u00e7ok daha esnek ve y\u00f6netilebilir hale getirir, ayn\u0131 zamanda &#8220;en az ayr\u0131cal\u0131k&#8221; ilkesinin uygulanmas\u0131n\u0131 sa\u011flar. Bu prensip, her kullan\u0131c\u0131n\u0131n veya sistemin, g\u00f6revini yerine getirmek i\u00e7in sadece gerekli olan minimum ayr\u0131cal\u0131klara sahip olmas\u0131 gerekti\u011fini belirtir. B\u00f6ylece, bir g\u00fcvenlik ihlali durumunda potansiyel zarar\u0131n kapsam\u0131 s\u0131n\u0131rlanm\u0131\u015f olur.\n    <\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Kimlik do\u011frulama ve yetkilendirme s\u00fcre\u00e7lerini ayr\u0131 servislerde y\u00f6netmek, kodunuzun daha temiz ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar. AuthGuard&#8217;lar\u0131 kullanarak route seviyesinde yetkilendirme kontrol\u00fc yapmak, Angular uygulamalar\u0131nda g\u00fcvenlik katman\u0131n\u0131 g\u00fc\u00e7lendirir.\n    <\/div>\n<h2>Angular \u0130\u00e7in Temel Kimlik Do\u011frulama Ak\u0131\u015flar\u0131 Nas\u0131l Kurulur?<\/h2>\n<p>\n        Angular uygulamalar\u0131nda g\u00fcvenli bir kimlik do\u011frulama ak\u0131\u015f\u0131 olu\u015fturmak, genellikle JWT (JSON Web Token) tabanl\u0131 bir yakla\u015f\u0131mla ger\u00e7ekle\u015ftirilir. Bu yakla\u015f\u0131m, hem esnek hem de modern web uygulamalar\u0131 i\u00e7in olduk\u00e7a uygundur. Temel ak\u0131\u015f, kullan\u0131c\u0131n\u0131n giri\u015f bilgilerini (kullan\u0131c\u0131 ad\u0131 ve \u015fifre) sunmas\u0131, backend&#8217;in bu bilgileri do\u011frulamas\u0131 ve ba\u015far\u0131l\u0131 olursa bir JWT d\u00f6nmesi esas\u0131na dayan\u0131r. Bu token daha sonra istemci taraf\u0131nda g\u00fcvenli bir \u015fekilde saklan\u0131r ve kullan\u0131c\u0131n\u0131n yetkilendirilmi\u015f kaynaklara eri\u015fim taleplerinde kullan\u0131l\u0131r.\n    <\/p>\n<p>\n        \u0130lk ad\u0131m, uygulaman\u0131n kimlik do\u011frulama s\u00fcrecini y\u00f6netecek bir Angular servisi olu\u015fturmakt\u0131r. Bu servis, backend ile ileti\u015fim kuracak, kullan\u0131c\u0131 giri\u015fi yapacak, token&#8217;\u0131 saklayacak ve oturum durumunu y\u00f6netecek metodlar\u0131 i\u00e7erecektir. \u00d6rne\u011fin, bir <code>AuthService<\/code> bu g\u00f6revler i\u00e7in ideal bir yerdir. Servis, <code>HttpClient<\/code> kullanarak API \u00e7a\u011fr\u0131lar\u0131 yapacak ve sunucudan gelen yan\u0131tlar\u0131 i\u015fleyecektir. Kullan\u0131c\u0131 giri\u015fi ba\u015far\u0131l\u0131 oldu\u011funda al\u0131nan JWT, genellikle taray\u0131c\u0131n\u0131n Local Storage veya Session Storage alan\u0131nda saklan\u0131r. Ancak, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha diren\u00e7li olmak i\u00e7in, HttpOnly \u00e7erezleri kullanmak veya token&#8217;\u0131 bellekte tutmak gibi alternatif yakla\u015f\u0131mlar da de\u011ferlendirilebilir. Local Storage&#8217;da saklama kolayl\u0131\u011f\u0131 sunsa da, g\u00fcvenlik risklerini g\u00f6z \u00f6n\u00fcnde bulundurarak dikkatli olunmal\u0131d\u0131r. Ayr\u0131ca, her API iste\u011fi i\u00e7in bu token&#8217;\u0131n <code>Authorization<\/code> ba\u015fl\u0131\u011f\u0131na eklenmesi gerekir. Bu i\u015flem, Angular&#8217;\u0131n <code>HttpInterceptor<\/code> mekanizmas\u0131 kullan\u0131larak otomatikle\u015ftirilebilir. Interceptor&#8217;lar sayesinde, her giden iste\u011fe otomatik olarak token ekleyebilir ve b\u00f6ylece kod tekrar\u0131n\u0131 \u00f6nleyebiliriz.\n    <\/p>\n<p>\n        Kimlik do\u011frulama ak\u0131\u015f\u0131n\u0131n bir di\u011fer \u00f6nemli par\u00e7as\u0131, kullan\u0131c\u0131n\u0131n oturum a\u00e7ma durumu de\u011fi\u015fti\u011finde bunu uygulamaya bildirmektir. Bu, bir <code>BehaviorSubject<\/code> veya <code>Subject<\/code> kullanarak <code>AuthService<\/code> i\u00e7inde bir oturum durumu g\u00f6zlemlenebilir ak\u0131\u015f\u0131 (observable stream) olu\u015fturarak ba\u015far\u0131labilir. B\u00f6ylece, uygulaman\u0131n farkl\u0131 bile\u015fenleri (\u00f6rne\u011fin navigasyon \u00e7ubu\u011fu), kullan\u0131c\u0131n\u0131n giri\u015f yap\u0131p yapmad\u0131\u011f\u0131n\u0131 kolayca takip edebilir ve buna g\u00f6re kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcncelleyebilir. \u00d6rne\u011fin, kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda &#8220;Giri\u015f Yap&#8221; d\u00fc\u011fmesi &#8220;\u00c7\u0131k\u0131\u015f Yap&#8221; olarak de\u011fi\u015febilir ve kullan\u0131c\u0131ya \u00f6zel men\u00fc \u00f6\u011feleri g\u00f6sterilebilir. Son olarak, yetkisiz kullan\u0131c\u0131lar\u0131n belirli sayfalara eri\u015fmesini engellemek i\u00e7in Angular&#8217;\u0131n y\u00f6nlendirme korumalar\u0131 (route guards) kullan\u0131l\u0131r. <code>CanActivate<\/code> aray\u00fcz\u00fcn\u00fc uygulayan bir guard, bir rotaya eri\u015fim izni verilmeden \u00f6nce belirli ko\u015fullar\u0131 kontrol edebilir. Bu, \u00f6zellikle y\u00f6netici paneli veya kullan\u0131c\u0131n\u0131n ki\u015fisel profili gibi hassas rotalar i\u00e7in hayati \u00f6neme sahiptir. T\u00fcm bu par\u00e7alar bir araya geldi\u011finde, Angular uygulaman\u0131z i\u00e7in hem g\u00fcvenli hem de kullan\u0131c\u0131 dostu bir kimlik do\u011frulama sistemi kurulmu\u015f olur. Bu yap\u0131y\u0131 kurarken, sadece fonksiyonelli\u011fi de\u011fil, ayn\u0131 zamanda olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 da s\u00fcrekli olarak g\u00f6z \u00f6n\u00fcnde bulundurmak ve en iyi pratikleri uygulamak, uygulaman\u0131z\u0131n uzun vadeli ba\u015far\u0131s\u0131 i\u00e7in anahtar fakt\u00f6r olacakt\u0131r.\n    <\/p>\n<h3>Uygulamal\u0131 \u00d6rnek: Angular&#8217;da JWT Tabanl\u0131 Bir Giri\u015f Mod\u00fcl\u00fc Geli\u015ftirme<\/h3>\n<p>\n        \u015eimdi, Angular&#8217;da JWT (JSON Web Token) tabanl\u0131 bir giri\u015f mod\u00fcl\u00fcn\u00fc ad\u0131m ad\u0131m nas\u0131l geli\u015ftirece\u011fimizi bir \u00f6rnek \u00fczerinden inceleyelim. Bu \u00f6rnek, bir giri\u015f formu olu\u015fturmay\u0131, kimlik do\u011frulama servisini entegre etmeyi ve ba\u015far\u0131l\u0131 bir giri\u015ften sonra JWT&#8217;yi saklamay\u0131 i\u00e7erecektir.\n    <\/p>\n<p>\n        <strong>1. AuthService Olu\u015fturma:<\/strong><br \/>\n        \u0130lk olarak, kimlik do\u011frulama i\u015flemlerini y\u00f6netecek bir servis olu\u015ftural\u0131m. Bu servis, backend ile ileti\u015fim kuracak ve JWT&#8217;yi Local Storage&#8217;da saklayacakt\u0131r.\n    <\/p>\n<pre><code>\n        \/\/ src\/app\/auth\/auth.service.ts\n        import { Injectable } from '@angular\/core';\n        import { HttpClient } from '@angular\/common\/http';\n        import { Observable, BehaviorSubject } from 'rxjs';\n        import { tap } from 'rxjs\/operators';\n\n        @Injectable({\n          providedIn: 'root'\n        })\n        export class AuthService {\n          private apiUrl = 'http:\/\/localhost:3000\/api\/auth'; \/\/ Backend API URL'niz\n          private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);\n          isAuthenticated$ = this.isAuthenticatedSubject.asObservable();\n\n          constructor(private http: HttpClient) {\n            this.checkTokenValidity();\n          }\n\n          login(credentials: any): Observable<{ token: string }> {\n            return this.http.post<{ token: string }>(<code>${this.apiUrl}\/login<\/code>, credentials).pipe(\n              tap(response => {\n                this.setToken(response.token);\n                this.isAuthenticatedSubject.next(true);\n              })\n            );\n          }\n\n          logout(): void {\n            localStorage.removeItem('jwt_token');\n            this.isAuthenticatedSubject.next(false);\n          }\n\n          private setToken(token: string): void {\n            localStorage.setItem('jwt_token', token);\n          }\n\n          getToken(): string | null {\n            return localStorage.getItem('jwt_token');\n          }\n\n          private checkTokenValidity(): void {\n            const token = this.getToken();\n            \/\/ Basit bir kontrol: token var m\u0131? Ger\u00e7ek uygulamada token'\u0131n s\u00fcresinin dolup dolmad\u0131\u011f\u0131 da kontrol edilmeli.\n            this.isAuthenticatedSubject.next(!!token);\n          }\n        }\n    <\/pre>\n<p><\/code><\/p>\n<p>\n        Bu servis, <code>login<\/code> metodu ile backend'e kimlik bilgilerini g\u00f6nderir ve bir token al\u0131r. <code>tap<\/code> operat\u00f6r\u00fc ile token'\u0131 Local Storage'a kaydederiz. <code>logout<\/code> metodu ise token'\u0131 siler. <code>isAuthenticated$<\/code>, uygulaman\u0131n di\u011fer k\u0131s\u0131mlar\u0131na oturum durumunu g\u00f6zlemleme imkan\u0131 sunar.\n    <\/p>\n<p>\n        <strong>2. Giri\u015f Formu Bile\u015feni Olu\u015fturma:<\/strong><br \/>\n        \u015eimdi, kullan\u0131c\u0131 ad\u0131 ve \u015fifre giri\u015fi i\u00e7in bir bile\u015fen olu\u015ftural\u0131m.\n    <\/p>\n<pre><code>\n        \/\/ src\/app\/auth\/login\/login.component.ts\n        import { Component } from '@angular\/core';\n        import { Router } from '@angular\/router';\n        import { AuthService } from '..\/auth.service';\n\n        @Component({\n          selector: 'app-login',\n          templateUrl: '.\/login.component.html',\n          styleUrls: ['.\/login.component.css']\n        })\n        export class LoginComponent {\n          credentials = { username: '', password: '' };\n          errorMessage: string | null = null;\n\n          constructor(private authService: AuthService, private router: Router) {}\n\n          onSubmit(): void {\n            this.authService.login(this.credentials).subscribe({\n              next: () => {\n                this.router.navigate(['\/dashboard']); \/\/ Ba\u015far\u0131l\u0131 giri\u015ften sonra y\u00f6nlendirme\n              },\n              error: (err) => {\n                this.errorMessage = 'Giri\u015f ba\u015far\u0131s\u0131z: ' + (err.error?.message || 'Bilinmeyen bir hata olu\u015ftu.');\n                console.error('Giri\u015f hatas\u0131:', err);\n              }\n            });\n          }\n        }\n    <\/pre>\n<p><\/code><\/p>\n<pre><code>\n        <!-- src\/app\/auth\/login\/login.component.html -->\n        <div class=\"login-container\">\n          <h2>Giri\u015f Yap<\/h2>\n          <form (ngSubmit)=\"onSubmit()\">\n            <div class=\"form-group\">\n              <label for=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n              <input type=\"text\" id=\"username\" [(ngModel)]=\"credentials.username\" name=\"username\" required>\n            <\/div>\n            <div class=\"form-group\">\n              <label for=\"password\">\u015eifre:<\/label>\n              <input type=\"password\" id=\"password\" [(ngModel)]=\"credentials.password\" name=\"password\" required>\n            <\/div>\n            <button type=\"submit\">Giri\u015f<\/button>\n            <p *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}<\/p>\n          <\/form>\n        <\/div>\n    <\/pre>\n<p><\/code><\/p>\n<pre><code>\n        <!-- src\/app\/auth\/login\/login.component.css -->\n        .login-container {\n          max-width: 400px;\n          margin: 50px auto;\n          padding: 20px;\n          border: 1px solid #ddd;\n          border-radius: 8px;\n          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n          background-color: #fff;\n        }\n\n        .login-container h2 {\n          text-align: center;\n          color: #333;\n          margin-bottom: 20px;\n        }\n\n        .form-group {\n          margin-bottom: 15px;\n        }\n\n        .form-group label {\n          display: block;\n          margin-bottom: 5px;\n          font-weight: bold;\n          color: #555;\n        }\n\n        .form-group input[type=\"text\"],\n        .form-group input[type=\"password\"] {\n          width: 100%;\n          padding: 10px;\n          border: 1px solid #ccc;\n          border-radius: 4px;\n          box-sizing: border-box; \/* Padding ve border geni\u015fli\u011fi etkilemez *\/\n        }\n\n        button[type=\"submit\"] {\n          width: 100%;\n          padding: 10px;\n          background-color: #007bff;\n          color: white;\n          border: none;\n          border-radius: 4px;\n          cursor: pointer;\n          font-size: 16px;\n          transition: background-color 0.3s ease;\n        }\n\n        button[type=\"submit\"]:hover {\n          background-color: #0056b3;\n        }\n\n        .error-message {\n          color: red;\n          text-align: center;\n          margin-top: 10px;\n        }\n\n        \/* Mobil uyumluluk i\u00e7in medya sorgusu *\/\n        @media (max-width: 600px) {\n          .login-container {\n            margin: 20px 10px;\n            padding: 15px;\n          }\n          .form-group input[type=\"text\"],\n          .form-group input[type=\"password\"],\n          button[type=\"submit\"] {\n            font-size: 14px;\n            padding: 8px;\n          }\n        }\n    <\/pre>\n<p><\/code><\/p>\n<p>\n        Bu \u00f6rnek, temel bir giri\u015f formunu ve kimlik do\u011frulama servisi ile nas\u0131l etkile\u015fime girdi\u011fini g\u00f6stermektedir. CSS i\u00e7inde yer alan <code>@media (max-width: 600px)<\/code> blo\u011fu, giri\u015f konteynerinin k\u00fc\u00e7\u00fck ekranlarda daha uygun marjlar ve daha k\u00fc\u00e7\u00fck font boyutlar\u0131 kullanmas\u0131n\u0131 sa\u011flayarak mobil uyumlulu\u011fu destekler.\n    <\/p>\n<h2>Kullan\u0131c\u0131 Deneyimini Art\u0131rmak ve G\u00fcvenli\u011fi Sa\u011flamak \u0130\u00e7in Hangi \u0130leri Teknikler Kullan\u0131lmal\u0131?<\/h2>\n<p>\n        Angular uygulamalar\u0131nda kimlik do\u011frulama sadece bir giri\u015f formundan ibaret de\u011fildir; kullan\u0131c\u0131 deneyimini iyile\u015ftiren ve g\u00fcvenli\u011fi art\u0131ran bir dizi ileri d\u00fczey teknikle desteklenmelidir. Bu teknikler, uygulaman\u0131z\u0131n daha sa\u011flam, kullan\u0131c\u0131 dostu ve sald\u0131r\u0131lara kar\u015f\u0131 daha diren\u00e7li olmas\u0131n\u0131 sa\u011flar.\n    <\/p>\n<p>\n        <strong>1. Refresh Token Mekanizmalar\u0131:<\/strong> JWT'ler genellikle k\u0131sa \u00f6m\u00fcrl\u00fc olacak \u015fekilde tasarlan\u0131r (\u00f6rne\u011fin 15 dakika - 1 saat). Bu, bir JWT \u00e7al\u0131nd\u0131\u011f\u0131nda, sald\u0131rgan\u0131n s\u0131n\u0131rl\u0131 bir s\u00fcre boyunca eri\u015fim sa\u011flayabilece\u011fi anlam\u0131na gelir. Ancak, her k\u0131sa s\u00fcrede kullan\u0131c\u0131dan tekrar giri\u015f yapmas\u0131n\u0131 istemek k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi olu\u015fturur. \u0130\u015fte burada refresh token'lar devreye girer. Refresh token'lar, eri\u015fim token'lar\u0131ndan (access token) daha uzun \u00f6m\u00fcrl\u00fcd\u00fcr ve kullan\u0131c\u0131n\u0131n tekrar giri\u015f yapmas\u0131na gerek kalmadan yeni bir eri\u015fim token'\u0131 almak i\u00e7in kullan\u0131l\u0131r. Backend, refresh token'\u0131 do\u011frular ve ge\u00e7erliyse yeni bir access token ve muhtemelen yeni bir refresh token d\u00f6nd\u00fcr\u00fcr. Bu s\u00fcre\u00e7, kullan\u0131c\u0131n\u0131n oturumunu kesintiye u\u011fratmadan g\u00fcvenli\u011fi art\u0131r\u0131r. Refresh token'lar genellikle HttpOnly \u00e7erezlerinde saklanmal\u0131d\u0131r, bu sayede XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha g\u00fcvenli olurlar, \u00e7\u00fcnk\u00fc JavaScript taraf\u0131ndan eri\u015filemezler. Angular uygulaman\u0131zda, bir interceptor yard\u0131m\u0131yla access token'\u0131n s\u00fcresi doldu\u011funda otomatik olarak bir refresh token iste\u011fi g\u00f6nderecek bir mekanizma kurabilirsiniz. Bu sayede kullan\u0131c\u0131, uygulamay\u0131 sorunsuz bir \u015fekilde kullanmaya devam ederken, arka planda g\u00fcvenli bir \u015fekilde token yenileme i\u015flemi ger\u00e7ekle\u015fir.\n    <\/p>\n<p>\n        <strong>2. HTTP Interceptor'lar ile Otomatik Token Y\u00f6netimi:<\/strong> Angular'\u0131n <code>HttpInterceptor<\/code>'lar\u0131, HTTP isteklerini ve yan\u0131tlar\u0131n\u0131 global olarak yakalamak ve i\u015flemek i\u00e7in g\u00fc\u00e7l\u00fc bir yol sunar. Kimlik do\u011frulama ba\u011flam\u0131nda, interceptor'lar\u0131 kullanarak giden her HTTP iste\u011fine otomatik olarak JWT ekleyebiliriz. Bu, her serviste veya bile\u015fende manuel olarak token eklemekten ka\u00e7\u0131nmam\u0131z\u0131 sa\u011flar ve kod tekrar\u0131n\u0131 \u00f6nler. Ayn\u0131 zamanda, backend'den gelen 401 (Unauthorized) yan\u0131tlar\u0131n\u0131 yakalayarak, s\u00fcresi dolmu\u015f veya ge\u00e7ersiz token durumlar\u0131nda kullan\u0131c\u0131y\u0131 otomatik olarak giri\u015f sayfas\u0131na y\u00f6nlendirme veya refresh token ak\u0131\u015f\u0131n\u0131 ba\u015flatma gibi i\u015flemleri de merkezi olarak y\u00f6netebiliriz. Bu sayede, g\u00fcvenlik mant\u0131\u011f\u0131 uygulaman\u0131n genelinde tutarl\u0131 bir \u015fekilde uygulan\u0131r ve geli\u015ftirme s\u00fcrecini basitle\u015ftirir. \u00d6rne\u011fin, a\u015fa\u011f\u0131daki gibi bir interceptor ile her iste\u011fe token ekleyebilirsiniz:\n    <\/p>\n<pre><code>\n        \/\/ src\/app\/auth\/token.interceptor.ts\n        import { Injectable } from '@angular\/core';\n        import {\n          HttpRequest,\n          HttpHandler,\n          HttpEvent,\n          HttpInterceptor\n        } from '@angular\/common\/http';\n        import { Observable } from 'rxjs';\n        import { AuthService } from '.\/auth.service';\n\n        @Injectable()\n        export class TokenInterceptor implements HttpInterceptor {\n          constructor(private authService: AuthService) {}\n\n          intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\n            const token = this.authService.getToken();\n            if (token) {\n              request = request.clone({\n                setHeaders: {\n                  Authorization: <code>Bearer ${token}<\/code>\n                }\n              });\n            }\n            return next.handle(request);\n          }\n        }\n    <\/pre>\n<p><\/code><\/p>\n<p>\n        Bu interceptor'\u0131 <code>app.module.ts<\/code> i\u00e7inde sa\u011flayarak aktif hale getiririz.\n    <\/p>\n<pre><code>\n        \/\/ src\/app\/app.module.ts (bir k\u0131sm\u0131)\n        import { HTTP_INTERCEPTORS } from '@angular\/common\/http';\n        import { TokenInterceptor } from '.\/auth\/token.interceptor';\n\n        \/\/ ...\n        providers: [\n          {\n            provide: HTTP_INTERCEPTORS,\n            useClass: TokenInterceptor,\n            multi: true\n          }\n        ],\n        \/\/ ...\n    <\/pre>\n<p><\/code><\/p>\n<p>\n        <strong>3. Route Guard'lar ile Yetkilendirme:<\/strong> Angular'\u0131n y\u00f6nlendirme korumalar\u0131 (route guards), uygulaman\u0131z\u0131n belirli rotalar\u0131na eri\u015fimi programatik olarak kontrol etmenizi sa\u011flar. <code>CanActivate<\/code> guard'lar\u0131, bir kullan\u0131c\u0131n\u0131n belirli bir sayfaya eri\u015fip eri\u015femeyece\u011fini belirlemek i\u00e7in idealdir. \u00d6rne\u011fin, sadece giri\u015f yapm\u0131\u015f kullan\u0131c\u0131lar\u0131n veya belirli bir role sahip kullan\u0131c\u0131lar\u0131n bir rotaya eri\u015fmesine izin verebiliriz. Bu, yetkisiz kullan\u0131c\u0131lar\u0131n hassas bilgilere veya i\u015flevlere eri\u015fimini engelleyerek uygulaman\u0131n g\u00fcvenlik katman\u0131n\u0131 g\u00fc\u00e7lendirir. Ayr\u0131ca, <code>CanLoad<\/code> guard'lar\u0131, tembel y\u00fcklenen mod\u00fcllerin (lazy-loaded modules) sadece yetkili kullan\u0131c\u0131lar taraf\u0131ndan indirilmesini sa\u011flayarak bant geni\u015fli\u011fi tasarrufu ve kaynak korumas\u0131 sunar.\n    <\/p>\n<pre><code>\n        \/\/ src\/app\/auth\/auth.guard.ts\n        import { Injectable } from '@angular\/core';\n        import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular\/router';\n        import { Observable } from 'rxjs';\n        import { AuthService } from '.\/auth.service';\n        import { map } from 'rxjs\/operators';\n\n        @Injectable({\n          providedIn: 'root'\n        })\n        export class AuthGuard implements CanActivate {\n          constructor(private authService: AuthService, private router: Router) {}\n\n          canActivate(\n            route: ActivatedRouteSnapshot,\n            state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {\n\n            return this.authService.isAuthenticated$.pipe(\n              map(isAuthenticated => {\n                if (isAuthenticated) {\n                  return true;\n                } else {\n                  \/\/ Kullan\u0131c\u0131 giri\u015f yapmam\u0131\u015fsa giri\u015f sayfas\u0131na y\u00f6nlendir\n                  return this.router.createUrlTree(['\/login']);\n                }\n              })\n            );\n          }\n        }\n    <\/pre>\n<p><\/code><\/p>\n<p>\n        Bu guard, bir kullan\u0131c\u0131n\u0131n giri\u015f yap\u0131p yapmad\u0131\u011f\u0131n\u0131 kontrol eder. Giri\u015f yapmam\u0131\u015fsa, kullan\u0131c\u0131y\u0131 '\/login' rotas\u0131na y\u00f6nlendirir. Bu guard'\u0131, rotalar\u0131n\u0131z\u0131 tan\u0131mlarken kullanabilirsiniz:\n    <\/p>\n<pre><code>\n        \/\/ src\/app\/app-routing.module.ts (bir k\u0131sm\u0131)\n        import { AuthGuard } from '.\/auth\/auth.guard';\n\n        const routes: Routes = [\n          { path: 'login', component: LoginComponent },\n          { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },\n          \/\/ ... di\u011fer rotalar\n        ];\n    <\/pre>\n<p><\/code><\/p>\n<p>\n        <strong>4. Vaka Analizi: B\u00fcy\u00fck \u00d6l\u00e7ekli Bir Uygulamada G\u00fcvenlik Risklerini Minimize Etme<\/strong><br \/>\n        Bir e-ticaret platformu d\u00fc\u015f\u00fcn\u00fcn. Milyonlarca kullan\u0131c\u0131s\u0131 ve her g\u00fcn binlerce i\u015flem ger\u00e7ekle\u015ftiren bir sistemde g\u00fcvenlik, sadece bir \u00f6zellik de\u011fil, i\u015f s\u00fcreklili\u011finin temelidir. Bu t\u00fcr bir uygulamada, yukar\u0131da bahsedilen ileri tekniklerin her biri kritik bir rol oynar. \u00d6rne\u011fin, kullan\u0131c\u0131lar\u0131n sepet bilgilerine, \u00f6deme ge\u00e7mi\u015flerine ve ki\u015fisel bilgilerine yetkisiz eri\u015fimi engellemek i\u00e7in g\u00fc\u00e7l\u00fc bir JWT ve refresh token mekanizmas\u0131 \u015fartt\u0131r. Eri\u015fim token'lar\u0131 k\u0131sa \u00f6m\u00fcrl\u00fc tutulur ve HttpOnly \u00e7erezlerinde saklanan refresh token'lar ile arka planda sorunsuz bir \u015fekilde yenilenir. T\u00fcm API istekleri, bir interceptor arac\u0131l\u0131\u011f\u0131yla otomatik olarak yetkilendirme ba\u015fl\u0131\u011f\u0131 eklenerek g\u00f6nderilir, bu sayede backend her iste\u011fin ge\u00e7erlili\u011fini kontrol edebilir.<br \/>\n        Admin paneli gibi kritik alanlar i\u00e7in ise, \u00e7ok fakt\u00f6rl\u00fc kimlik do\u011frulama (MFA) zorunlu tutulur ve <code>AuthGuard<\/code>'lar sadece belirli rollere sahip (\u00f6rne\u011fin \"admin\") kullan\u0131c\u0131lar\u0131n bu rotalara eri\u015fmesine izin verir. Ayr\u0131ca, t\u00fcm ileti\u015fim HTTPS \u00fczerinden ger\u00e7ekle\u015ftirilir ve sunucu taraf\u0131nda CORS (Cross-Origin Resource Sharing) politikalar\u0131 s\u0131k\u0131 bir \u015fekilde yap\u0131land\u0131r\u0131l\u0131r. Oturum sonland\u0131rma (logout) i\u015flemi, hem istemci taraf\u0131nda token'\u0131 silerek hem de sunucu taraf\u0131nda refresh token'\u0131 iptal ederek eksiksiz bir \u015fekilde uygulan\u0131r. Bu kapsaml\u0131 yakla\u015f\u0131m, uygulaman\u0131n g\u00fcvenlik duru\u015funu maksimize eder ve potansiyel g\u00fcvenlik ihlallerinin etkisini minimize eder, b\u00f6ylece hem kullan\u0131c\u0131lar\u0131n hem de i\u015fin g\u00fcvenli\u011fi sa\u011flan\u0131r. Bu, sadece teknik bir uygulama de\u011fil, ayn\u0131 zamanda s\u00fcrekli g\u00f6zden ge\u00e7irilmesi ve g\u00fcncellenmesi gereken stratejik bir g\u00fcvenlik duru\u015fudur.\n    <\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular (SSS) ve Kapan\u0131\u015f<\/h2>\n<p>\n        Angular uygulamalar\u0131nda g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7leri olu\u015fturmak, modern web geli\u015ftiricileri i\u00e7in temel bir beceridir. Bu makalede, kimlik do\u011frulama ve yetkilendirme aras\u0131ndaki farklardan ba\u015flayarak, JWT tabanl\u0131 bir sistemin nas\u0131l kurulaca\u011f\u0131na, ileri d\u00fczey g\u00fcvenlik tekniklerine ve ger\u00e7ek d\u00fcnya vaka analizlerine kadar bir\u00e7ok konuyu ele ald\u0131k. Unutmay\u0131n ki g\u00fcvenlik s\u00fcrekli bir s\u00fcre\u00e7tir ve uygulaman\u0131z\u0131 g\u00fcncel tehditlere kar\u015f\u0131 korumak i\u00e7in en iyi pratikleri d\u00fczenli olarak takip etmek \u00f6nemlidir. \u015eimdi, konuyu \u00f6zetlemek ve s\u0131k\u00e7a sorulan baz\u0131 sorular\u0131 yan\u0131tlamak i\u00e7in kapan\u0131\u015f b\u00f6l\u00fcm\u00fcne ge\u00e7elim.\n    <\/p>\n<p>\n        \u00d6zetle, Angular'da kimlik do\u011frulama s\u00fcre\u00e7lerini tasarlarken \u015fu ad\u0131mlar\u0131 takip etmek faydal\u0131 olacakt\u0131r: \u00f6ncelikle, kullan\u0131c\u0131 kimli\u011fini do\u011frulamak i\u00e7in g\u00fcvenilir bir backend API'si ve bu API ile ileti\u015fim kuracak bir <code>AuthService<\/code> olu\u015fturun. \u0130kinci olarak, kullan\u0131c\u0131 giri\u015f bilgilerini toplamak ve g\u00f6ndermek i\u00e7in bir giri\u015f formu bile\u015feni tasarlay\u0131n. \u00dc\u00e7\u00fcnc\u00fc olarak, backend'den gelen JWT'yi g\u00fcvenli bir \u015fekilde saklay\u0131n (tercihen HttpOnly \u00e7erezleri veya memory storage). D\u00f6rd\u00fcnc\u00fc olarak, <code>HttpInterceptor<\/code> kullanarak t\u00fcm giden isteklere otomatik olarak yetkilendirme ba\u015fl\u0131\u011f\u0131 ekleyin. Son olarak, <code>AuthGuard<\/code>'lar arac\u0131l\u0131\u011f\u0131yla uygulama rotalar\u0131na eri\u015fimi yetkilendirin ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in refresh token mekanizmalar\u0131n\u0131 entegre edin. Bu ad\u0131mlar, uygulaman\u0131z\u0131n sa\u011flam ve g\u00fcvenli bir temele sahip olmas\u0131n\u0131 sa\u011flayacakt\u0131r.\n    <\/p>\n<div class=\"faq-section\">\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li>\n                <strong>S: JWT'yi Local Storage'da saklamak g\u00fcvenli mi?<\/strong><\/p>\n<p>C: Local Storage, XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 hassast\u0131r. Bir sald\u0131rgan, JavaScript kodu enjekte edebilirse, Local Storage'daki JWT'ye eri\u015febilir ve bunu k\u00f6t\u00fcye kullanabilir. Bu nedenle, HttpOnly \u00e7erezleri veya memory storage gibi daha g\u00fcvenli alternatifler d\u00fc\u015f\u00fcn\u00fclmelidir. HttpOnly \u00e7erezleri, taray\u0131c\u0131 taraf\u0131ndan otomatik olarak g\u00f6nderilir ve JavaScript taraf\u0131ndan okunamaz, bu da XSS riskini azalt\u0131r.<\/p>\n<\/li>\n<li>\n                <strong>S: Refresh token nedir ve neden kullan\u0131l\u0131r?<\/strong><\/p>\n<p>C: Refresh token, genellikle daha uzun \u00f6m\u00fcrl\u00fc olan ve k\u0131sa \u00f6m\u00fcrl\u00fc access token'lar\u0131n s\u00fcresi doldu\u011funda yenilerini almak i\u00e7in kullan\u0131lan bir token t\u00fcr\u00fcd\u00fcr. Kullan\u0131c\u0131n\u0131n her k\u0131sa s\u00fcrede tekrar giri\u015f yapmas\u0131n\u0131 engelleyerek kullan\u0131c\u0131 deneyimini iyile\u015ftirirken, \u00e7al\u0131nan bir access token'\u0131n potansiyel zarar\u0131n\u0131 s\u0131n\u0131rlayarak g\u00fcvenli\u011fi art\u0131r\u0131r.<\/p>\n<\/li>\n<li>\n                <strong>S: Angular'da yetkilendirme i\u00e7in en iyi y\u00f6ntem nedir?<\/strong><\/p>\n<p>C: Angular'da yetkilendirme i\u00e7in en iyi y\u00f6ntem, genellikle <code>CanActivate<\/code> gibi route guard'lar\u0131 kullanmakt\u0131r. Bu guard'lar, kullan\u0131c\u0131n\u0131n belirli bir rotaya eri\u015fip eri\u015femeyece\u011fini kontrol etmek i\u00e7in kullan\u0131l\u0131r. Ayr\u0131ca, API seviyesinde yetkilendirme kontrolleri de yapmak, uygulaman\u0131z\u0131n u\u00e7tan uca g\u00fcvenli\u011fini sa\u011flar.<\/p>\n<\/li>\n<li>\n                <strong>S: CORS nedir ve Angular kimlik do\u011frulamas\u0131nda neden \u00f6nemlidir?<\/strong><\/p>\n<p>C: CORS (Cross-Origin Resource Sharing), taray\u0131c\u0131lar\u0131n, farkl\u0131 bir kaynakta (domain, protokol veya port) bulunan bir web uygulamas\u0131na kaynak talepleri yapmas\u0131na olanak tan\u0131yan bir mekanizmad\u0131r. Angular uygulamas\u0131 genellikle backend API'sinden farkl\u0131 bir kaynakta \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in CORS \u00f6nemlidir. Backend'in, Angular uygulamas\u0131ndan gelen isteklere izin verecek \u015fekilde do\u011fru yap\u0131land\u0131r\u0131lmas\u0131 gerekir, aksi takdirde taray\u0131c\u0131 g\u00fcvenlik politikalar\u0131 nedeniyle API \u00e7a\u011fr\u0131lar\u0131 engellenir.<\/p>\n<\/li>\n<li>\n                <strong>S: \u00c7ok fakt\u00f6rl\u00fc kimlik do\u011frulama (MFA) Angular uygulamas\u0131nda nas\u0131l entegre edilir?<\/strong><\/p>\n<p>C: MFA entegrasyonu genellikle backend taraf\u0131ndan y\u00f6netilir. Angular taraf\u0131nda, kullan\u0131c\u0131dan ek bir do\u011frulama kodu (\u00f6rne\u011fin SMS ile gelen OTP veya bir authenticator uygulamas\u0131ndan gelen kod) girmesini isteyen bir aray\u00fcz olu\u015fturulur. Bu kod, backend'e giri\u015f bilgileriyle birlikte g\u00f6nderilir ve backend, kullan\u0131c\u0131n\u0131n kimli\u011fini do\u011frulamak i\u00e7in hem \u015fifreyi hem de MFA kodunu kontrol eder. Angular sadece kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc ve bu kodun g\u00f6nderilmesini sa\u011flar.<\/p>\n<\/li>\n<\/ul><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular&#8217;da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-35252","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular&#039;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi<\/title>\n<meta name=\"description\" content=\"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular&#039;da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular&#039;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi\" \/>\n<meta property=\"og:description\" content=\"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular&#039;da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-27T09:30:56+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular&#8217;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi\",\"datePublished\":\"2025-11-27T09:30:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\"},\"wordCount\":3417,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\",\"name\":\"Angular'da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-27T09:30:56+00:00\",\"description\":\"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular'da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular&#8217;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular'da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi","description":"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular'da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular'da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi","og_description":"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular'da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.","og_url":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-27T09:30:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular&#8217;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi","datePublished":"2025-11-27T09:30:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/"},"wordCount":3417,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/","name":"Angular'da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-27T09:30:56+00:00","description":"Angular uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frulamak ve yetkilendirmek, g\u00fcvenli\u011fin temelini olu\u015fturur. Bu makalede, Angular'da ad\u0131m ad\u0131m g\u00fcvenli giri\u015f ve kimlik do\u011frulama s\u00fcre\u00e7lerini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131, JWT (JSON Web Token) kullan\u0131m\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Uygulaman\u0131z\u0131n siber tehditlere kar\u015f\u0131 sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in bilmeniz gereken her \u015feyi burada bulacaks\u0131n\u0131z.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-guvenli-giris-ve-kimlik-dogrulama-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular&#8217;da G\u00fcvenli Giri\u015f ve Kimlik Do\u011frulama Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35252"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35252\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}