G\u00fcn\u00fcm\u00fcz modern web uygulamalar\u0131nda g\u00fcvenlik, yaz\u0131l\u0131m geli\u015ftirme s\u00fcre\u00e7lerinin en kritik unsurlar\u0131ndan biri haline gelmi\u015ftir. Kullan\u0131c\u0131 verilerinin korunmas\u0131, yetkisiz eri\u015fimlerin engellenmesi ve g\u00fcvenli oturum y\u00f6netimi, tek sayfal\u0131 uygulamalarda (Single Page Applications – SPA) \u00f6zel bir mimari yakla\u015f\u0131m gerektirir. Angular gibi g\u00fc\u00e7l\u00fc ve mod\u00fcler bir \u00f6n y\u00fcz \u00e7er\u00e7evesiyle \u00e7al\u0131\u015f\u0131rken, kimlik do\u011frulama (Authentication) ve yetkilendirme (Authorization) altyap\u0131s\u0131n\u0131 s\u0131f\u0131rdan in\u015fa etmek hem zaman al\u0131c\u0131d\u0131r hem de ciddi g\u00fcvenlik risklerini beraberinde getirebilir.<\/p>\n
Bu noktada Auth0, Bulut tabanl\u0131 Kimlik Hizmeti (Identity-as-a-Service – IDaaS) sa\u011flay\u0131c\u0131s\u0131 olarak devreye girer. Auth0, geli\u015ftiricilere \u00f6l\u00e7eklenebilir, g\u00fcvenli ve esnek bir kimlik do\u011frulama ekosistemi sunar. Auth0’\u0131n sundu\u011fu en pratik \u00e7\u00f6z\u00fcmlerden biri olan Auth0 Lock<\/strong>, \u00f6zelle\u015ftirilebilir, duyarl\u0131 (responsive) ve t\u00fcm modern giri\u015f senaryolar\u0131n\u0131 (kullan\u0131c\u0131 ad\u0131\/\u015fifre, sosyal medya ile giri\u015f, \u015fifresiz giri\u015f) destekleyen haz\u0131r bir kimlik do\u011frulama aray\u00fcz\u00fcd\u00fcr (Widget). Bu makalede, Angular uygulamalar\u0131nda Auth0 ve Auth0 Lock entegrasyonunu u\u00e7tan uca, mimari detaylar\u0131 ve en iyi uygulama standartlar\u0131yla ele alaca\u011f\u0131z.<\/p>\n Angular uygulamas\u0131nda Auth0 ve Auth0 Lock entegrasyonuna ge\u00e7meden \u00f6nce, altta yatan protokollerin ve bile\u015fenlerin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak kritik \u00f6nem ta\u015f\u0131r.<\/p>\n Auth0, standart olarak OAuth 2.0 yetkilendirme \u00e7er\u00e7evesini ve bunun \u00fczerine in\u015fa edilmi\u015f OpenID Connect (OIDC) kimlik do\u011frulama katman\u0131n\u0131 kullan\u0131r. OAuth 2.0, uygulaman\u0131n kullan\u0131c\u0131 ad\u0131na kaynaklara eri\u015fmesini sa\u011flarken; OIDC, kullan\u0131c\u0131n\u0131n kimli\u011fini do\u011frular ve istemciye (Angular uygulamas\u0131) kullan\u0131c\u0131 hakk\u0131nda standart bilgiler (ID Token) sa\u011flar.<\/p>\n Auth0 mimarisinde temel olarak iki t\u00fcr token ile \u00e7al\u0131\u015f\u0131l\u0131r:<\/p>\n Auth0 Lock, tek bir bile\u015fenle t\u00fcm kimlik do\u011frulama ak\u0131\u015f\u0131n\u0131 y\u00f6neten bir JavaScript k\u00fct\u00fcphanesidir. Geli\u015ftiricileri her bir giri\u015f t\u00fcr\u00fc i\u00e7in ayr\u0131 form tasarlama, validation yazma ve sosyal a\u011f entegrasyonlar\u0131 i\u00e7in ayr\u0131 SDK’lar ba\u011flama y\u00fck\u00fcnden kurtar\u0131r. Lock k\u00fct\u00fcphanesi, Auth0 backend’i ile do\u011frudan g\u00fcvenli bir \u015fekilde haberle\u015ferek kullan\u0131c\u0131 oturumunu a\u00e7ar ve gerekli token’lar\u0131 Angular uygulamas\u0131na teslim eder.<\/p>\n Entegrasyonun ilk ad\u0131m\u0131, Auth0 y\u00f6netim panelinde (Dashboard) bir uygulama tan\u0131mlamak ve g\u00fcvenlik parametrelerini ayarlamakt\u0131r.<\/p>\n Olu\u015fturulan uygulaman\u0131n detay sayfas\u0131na girerek a\u015fa\u011f\u0131daki parametrelerin yap\u0131land\u0131r\u0131lmas\u0131 gerekir:<\/p>\n Auth0 Lock k\u00fct\u00fcphanesini bir Angular projesine dahil etmek i\u00e7in gerekli npm paketlerinin kurulmas\u0131 ve ortam de\u011fi\u015fkenlerinin (environment) ayarlanmas\u0131 gerekir.<\/p>\n Terminal \u00fczerinden projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak Auth0 bilgilerinizi kod i\u00e7erisine sabit yazmak yerine Angular’\u0131n Angular’da kimlik do\u011frulama mant\u0131\u011f\u0131n\u0131 bile\u015fenlerden (Component) ay\u0131rarak merkezi bir servis (Injectable Service) i\u00e7erisinde toplamak, kodun s\u00fcrd\u00fcr\u00fclebilirli\u011fi ve test edilebilirli\u011fi a\u00e7\u0131s\u0131ndan elzemdir.<\/p>\n A\u015fa\u011f\u0131da, Auth0 Lock bile\u015fenini ba\u015flatan, olaylar\u0131 (events) dinleyen ve token y\u00f6netimini \u00fcstlenen \u00f6rnek bir Yetkisiz kullan\u0131c\u0131lar\u0131n belirli rotalara (Route) eri\u015fimini engellemek i\u00e7in Angular’\u0131n Fonksiyonel mimariye uygun \u00f6rnek bir Bu Guard, Kullan\u0131c\u0131 do\u011fruland\u0131ktan sonra, Angular uygulamas\u0131n\u0131n korunan API u\u00e7 noktalar\u0131na yapaca\u011f\u0131 her istekte Access Token g\u00f6ndermesi gerekir. Bu i\u015flem manuel yap\u0131lmak yerine bir HTTP Interceptor arac\u0131l\u0131\u011f\u0131yla otomatize edilir.<\/p>\n A\u015fa\u011f\u0131da, istek ba\u015fl\u0131\u011f\u0131na Bearer Token ekleyen bir Interceptor \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n HTTP Interceptor, Auth0 Lock, kullan\u0131c\u0131n\u0131n e-posta adresi, ad\u0131 ve profil resmi gibi temel bilgileri alman\u0131za imkan tan\u0131r. Bu bilgilere eri\u015fmek i\u00e7in Lock nesnesinin Bile\u015fen (Component) taraf\u0131nda kullan\u0131m \u00f6rne\u011fi:<\/p>\n Auth0 Lock’un en b\u00fcy\u00fck avantajlar\u0131ndan biri, markan\u0131z\u0131n kurumsal kimli\u011fine tam uyum sa\u011flayacak \u015fekilde \u00f6zelle\u015ftirilebilmesidir. Lock yap\u0131land\u0131rma nesnesi ( Auth0 Lock, varsay\u0131lan olarak \u0130ngilizce aray\u00fczle gelir. Ancak Uygulaman\u0131zda yaln\u0131zca sosyal medya (Google, GitHub) veya yaln\u0131zca kurumsal DB ba\u011flant\u0131lar\u0131n\u0131 izinli k\u0131labilirsiniz:<\/p>\n Angular ve Auth0 Lock kullan\u0131rken g\u00fcvenli\u011fi en \u00fcst seviyeye \u00e7\u0131karmak i\u00e7in a\u015fa\u011f\u0131daki mimari kurallara dikkat edilmelidir:<\/p>\n Geleneksel SPA’larda kullan\u0131lan Implicit Flow (do\u011frudan token alma) g\u00fcvenlik standartlar\u0131nda art\u0131k \u00f6nerilmemektedir. Bunun yerine Auth0 v12+ ve modern SPA standartlar\u0131nda Authorization Code Flow with PKCE (Proof Key for Code Exchange)<\/strong> tercih edilmelidir. Lock k\u00fct\u00fcphanesi yap\u0131land\u0131rmas\u0131nda Token’lar\u0131n Uygulaman\u0131z\u0131n HTML yap\u0131s\u0131na kat\u0131 CSP kurallar\u0131 ekleyerek d\u0131\u015far\u0131dan zararl\u0131 betiklerin y\u00fcr\u00fct\u00fclmesi engellenmelidir. Auth0 etki alan\u0131na (domain) ve Lock kaynaklar\u0131na CSP ba\u015fl\u0131klar\u0131nda izin verilmelidir.<\/p>\n E\u011fer konsolda Auth0 Client ID veya Domain bilgilerinin yanl\u0131\u015f yaz\u0131lmas\u0131 veya t\u0131rnak i\u015faretleri aras\u0131nda bo\u015fluk kalmas\u0131 durumunda Lock ba\u015flat\u0131lamaz. Ayr\u0131ca, taray\u0131c\u0131da \u00e7al\u0131\u015fmay\u0131 engelleyen bir reklam engelleyici (AdBlocker) olup olmad\u0131\u011f\u0131 kontrol edilmelidir.<\/p>\n Backend servisinize g\u00f6nderdi\u011finiz Access Token kabul edilmiyorsa, Auth0 Dashboard \u00fczerinde olu\u015fturulan API’nizin Identifier (Audience) de\u011feri ile Angular uygulaman\u0131zdaki Angular ve Auth0 Lock kombinasyonu, modern web uygulamalar\u0131 i\u00e7in son derece g\u00fcvenli, h\u0131zl\u0131 entegre edilebilir ve esnek bir kimlik do\u011frulama \u00e7\u00f6z\u00fcm\u00fc sunar. Geli\u015ftiricileri karma\u015f\u0131k g\u00fcvenlik protokollerini ba\u015ftan yazma zorunlulu\u011fundan kurtar\u0131rken, kullan\u0131c\u0131lara sorunsuz ve \u015f\u0131k bir giri\u015f deneyimi sa\u011flar.<\/p>\n Bu rehberde kapsanan AuthService mimarisi, HTTP Interceptor kullan\u0131m\u0131, Route Guard korumas\u0131 ve g\u00fcvenlik en iyi uygulamalar\u0131 sayesinde, Angular projelerinizde kurumsal seviyede bir kimlik do\u011frulama altyap\u0131s\u0131n\u0131 g\u00fcvenle kurgulayabilirsiniz. Projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ba\u011fl\u0131 olarak rolled-based access control (RBAC) ve multi-factor authentication (MFA) gibi ek Auth0 \u00f6zelliklerini de bu mimariye kolayca entegre edebilirsiniz.<\/p>\n1. Temel Kavramlar ve Mimari Yap\u0131<\/h2>\n
OAuth 2.0 ve OpenID Connect (OIDC)<\/h3>\n
Token Tipleri<\/h3>\n
\n
Auth0 Lock Nedir?<\/h3>\n
2. Auth0 Dashboard \u00dczerinde Yap\u0131land\u0131rma<\/h2>\n
Uygulama Olu\u015fturma<\/h3>\n
\n
Uygulama Ayarlar\u0131 (Application Settings)<\/h3>\n
\n
dev-domain.us.auth0.com<\/code>).<\/li>\nhttp:\/\/localhost:4200<\/code> eklenmelidir.<\/li>\nhttp:\/\/localhost:4200<\/code> tan\u0131mlanmal\u0131d\u0131r.<\/li>\nhttp:\/\/localhost:4200<\/code>).<\/li>\n<\/ul>\n3. Angular Projesinin Haz\u0131rlanmas\u0131 ve Ba\u011f\u0131ml\u0131l\u0131klar\u0131n Kurulmas\u0131<\/h2>\n
Paket Kurulumu<\/h3>\n
auth0-lock<\/code> k\u00fct\u00fcphanesini ve TypeScript tip tan\u0131mlamalar\u0131n\u0131 y\u00fckleyin:<\/p>\nnpm install auth0-lock --save\nnpm install @types\/auth0-lock --save-dev\n<\/code><\/pre>\nEnvironment Yap\u0131land\u0131rmas\u0131<\/h3>\n
src\/environments\/environment.ts<\/code> dosyas\u0131 i\u00e7erisinde tutmak en do\u011fru yakla\u015f\u0131md\u0131r:<\/p>\nexport const environment = {\n production: false,\n auth0: {\n domain: 'YOUR_AUTH0_DOMAIN.us.auth0.com',\n clientId: 'YOUR_AUTH0_CLIENT_ID',\n callbackURL: 'http:\/\/localhost:4200',\n audience: 'https:\/\/YOUR_AUTH0_DOMAIN.us.auth0.com\/api\/v2\/'\n }\n};\n<\/code><\/pre>\n4. Auth0 Lock Servisinin (AuthService) Tasarlanmas\u0131<\/h2>\n
AuthService<\/code> uygulamas\u0131 yer almaktad\u0131r:<\/p>\nimport { Injectable } from '@angular\/core';\nimport { Router } from '@angular\/router';\nimport Auth0Lock from 'auth0-lock';\nimport { environment } from '..\/..\/environments\/environment';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class AuthService {\n private lock: Auth0LockStatic;\n\n constructor(private router: Router) {\n this.initLock();\n this.handleAuthentication();\n }\n\n private initLock(): void {\n const options: Auth0LockConstructorOptions = {\n auth: {\n redirectUrl: environment.auth0.callbackURL,\n responseType: 'token id_token',\n audience: environment.auth0.audience,\n params: {\n scope: 'openid profile email'\n }\n },\n autoclose: true,\n oidcConformant: true,\n theme: {\n logo: 'assets\/logo.png',\n primaryColor: '#311b92'\n },\n languageDictionary: {\n title: \"G\u00fcvenli Giri\u015f\"\n }\n };\n\n this.lock = new Auth0Lock(\n environment.auth0.clientId,\n environment.auth0.domain,\n options\n );\n }\n\n public login(): void {\n this.lock.show();\n }\n\n private handleAuthentication(): void {\n this.lock.on('authenticated', (authResult: any) => {\n if (authResult && authResult.accessToken && authResult.idToken) {\n this.setSession(authResult);\n this.router.navigate(['\/dashboard']);\n }\n });\n\n this.lock.on('authorization_error', (error: any) => {\n console.error('Kimlik do\u011frulama hatas\u0131:', error);\n });\n }\n\n private setSession(authResult: any): void {\n const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());\n localStorage.setItem('access_token', authResult.accessToken);\n localStorage.setItem('id_token', authResult.idToken);\n localStorage.setItem('expires_at', expiresAt);\n }\n\n public logout(): void {\n localStorage.removeItem('access_token');\n localStorage.removeItem('id_token');\n localStorage.removeItem('expires_at');\n this.router.navigate(['\/']);\n }\n\n public isAuthenticated(): boolean {\n const expiresAt = JSON.parse(localStorage.getItem('expires_at') || '0');\n return new Date().getTime() < expiresAt;\n }\n\n public getAccessToken(): string | null {\n return localStorage.getItem('access_token');\n }\n}\n<\/code><\/pre>\nKodun Teknik Analizi<\/h3>\n
\n
responseType: 'token id_token'<\/code> se\u00e7ene\u011fi, ba\u015far\u0131l\u0131 giri\u015f sonras\u0131 hem access hem de ID token d\u00f6nmesini sa\u011flar.<\/li>\nauthResult<\/code> nesnesi i\u00e7erisinden token’lar al\u0131n\u0131r.<\/li>\n5. Angular Route Guard ile Sayfa Korumas\u0131<\/h2>\n
CanActivate<\/code> veya g\u00fcncel fonksiyonel guard yap\u0131lar\u0131 kullan\u0131l\u0131r. Kullan\u0131c\u0131 oturum a\u00e7mam\u0131\u015fsa otomatik olarak Lock ekran\u0131na veya ana sayfaya y\u00f6nlendirilir.<\/p>\nAuthGuard<\/code> tan\u0131m\u0131:<\/p>\nimport { inject } from '@angular\/core';\nimport { CanActivateFn, Router } from '@angular\/router';\nimport { AuthService } from '.\/auth.service';\n\nexport const authGuard: CanActivateFn = (route, state) => {\n const authService = inject(AuthService);\n const router = inject(Router);\n\n if (authService.isAuthenticated()) {\n return true;\n } else {\n authService.login();\n return false;\n }\n};\n<\/code><\/pre>\napp.routes.ts<\/code> veya app-routing.module.ts<\/code> i\u00e7erisindeki rotalara \u015fu \u015fekilde eklenir:<\/p>\nimport { Routes } from '@angular\/router';\nimport { DashboardComponent } from '.\/dashboard\/dashboard.component';\nimport { authGuard } from '.\/auth.guard';\n\nexport const routes: Routes = [\n { \n path: 'dashboard', \n component: DashboardComponent, \n canActivate: [authGuard] \n }\n];\n<\/code><\/pre>\n6. HTTP Interceptor ile Otomatik Token Ekleme<\/h2>\n
import { HttpInterceptorFn } from '@angular\/common\/http';\nimport { inject } from '@angular\/core';\nimport { AuthService } from '.\/auth.service';\n\nexport const jwtInterceptor: HttpInterceptorFn = (req, next) => {\n const authService = inject(AuthService);\n const token = authService.getAccessToken();\n\n if (token && authService.isAuthenticated()) {\n const cloned = req.clone({\n setHeaders: {\n Authorization: Bearer ${token}<\/code>\n }\n });\n return next(cloned);\n }\n\n return next(req);\n};\n<\/code><\/pre>\napp.config.ts<\/code> dosyas\u0131 i\u00e7erisinde provideHttpClient<\/code> ile birlikte kaydedilmelidir:<\/p>\nimport { provideHttpClient, withInterceptors } from '@angular\/common\/http';\nimport { ApplicationConfig } from '@angular\/core';\nimport { jwtInterceptor } from '.\/jwt.interceptor';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideHttpClient(withInterceptors([jwtInterceptor]))\n ]\n};\n<\/code><\/pre>\n7. Kullan\u0131c\u0131 Profili Y\u00f6netimi<\/h2>\n
getUserInfo<\/code> metodundan faydalan\u0131l\u0131r.<\/p>\nAuthService<\/code> s\u0131n\u0131f\u0131na eklenebilecek profil getirme metodu:<\/p>\npublic getUserProfile(callback: (err: any, profile: any) => void): void {\n const accessToken = this.getAccessToken();\n if (!accessToken) {\n callback('Access token bulunamad\u0131', null);\n return;\n }\n\n this.lock.getUserInfo(accessToken, (error, profile) => {\n if (error) {\n console.error('Profil bilgisi alma hatas\u0131:', error);\n return callback(error, null);\n }\n callback(null, profile);\n });\n}\n<\/code><\/pre>\nimport { Component, OnInit } from '@angular\/core';\nimport { AuthService } from '..\/auth.service';\n\n@Component({\n selector: 'app-user-profile',\n template: \n <div *ngIf=\"userProfile\" class=\"profile-card\">\n <img [src]=\"userProfile.picture\" alt=\"Profil Resmi\" \/>\n <h3>{{ userProfile.name }}<\/h3>\n <p>{{ userProfile.email }}<\/p>\n <\/div>\n <\/code>\n})\nexport class UserProfileComponent implements OnInit {\n userProfile: any;\n\n constructor(private authService: AuthService) {}\n\n ngOnInit(): void {\n if (this.authService.isAuthenticated()) {\n this.authService.getUserProfile((err, profile) => {\n if (profile) {\n this.userProfile = profile;\n }\n });\n }\n }\n}\n<\/code><\/pre>\n8. Auth0 Lock \u00d6zelle\u015ftirme ve Tema Ayarlar\u0131<\/h2>\n
Auth0LockConstructorOptions<\/code>) \u00fczerinden bir\u00e7ok g\u00f6rsel ve davran\u0131\u015fsal parametre de\u011fi\u015ftirilebilir.<\/p>\nG\u00f6rsel Tema \u00d6zelle\u015ftirmesi<\/h3>\n
theme: {\n logo: 'https:\/\/ornek-sitemiz.com\/assets\/logo.png',\n primaryColor: '#1E88E5',\n labeledSubmitButton: true\n}\n<\/code><\/pre>\nT\u00fcrk\u00e7e Dil Deste\u011fi (Localization)<\/h3>\n
languageDictionary<\/code> \u00f6zelli\u011fi veya dil se\u00e7ene\u011fi kullan\u0131larak tamamen T\u00fcrk\u00e7e hale getirilebilir:<\/p>\nlanguage: 'tr',\nlanguageDictionary: {\n emailInputPlaceholder: \"yol@ornek.com\",\n title: \"Giri\u015f Yap\u0131n\",\n signUpTitle: \"Kay\u0131t Ol\",\n passwordInputPlaceholder: \"\u015eifreniz\"\n}\n<\/code><\/pre>\nGiri\u015f Y\u00f6ntemlerini S\u0131n\u0131rland\u0131rma<\/h3>\n
allowedConnections: ['google-oauth2', 'github', 'Username-Password-Authentication']\n<\/code><\/pre>\n9. G\u00fcvenlik Best Practices (En \u0130yi Uygulamalar)<\/h2>\n
1. Implicit Flow Yerine Authorization Code Flow with PKCE<\/h3>\n
oidcConformant: true<\/code> se\u00e7ilerek modern standartlara uyum sa\u011flan\u0131r.<\/p>\n2. Token Depolama G\u00fcvenli\u011fi (LocalStorage vs In-Memory)<\/h3>\n
LocalStorage<\/code> i\u00e7erisinde saklanmas\u0131, uygulaman\u0131zda olu\u015fabilecek bir Cross-Site Scripting (XSS) zafiyeti durumunda token’\u0131n \u00e7al\u0131nma riskini do\u011furur. En g\u00fcvenli yakla\u015f\u0131m:<\/p>\n\n
3. Content Security Policy (CSP)<\/h3>\n
10. Kar\u015f\u0131la\u015f\u0131lan Yayg\u0131n Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h2>\n
CORS (Cross-Origin Resource Sharing) Hatalar\u0131<\/h3>\n
Origin http:\/\/localhost:4200 is not allowed<\/code> \u015feklinde bir hata al\u0131yorsan\u0131z, Auth0 Dashboard \u00fczerindeki uygulaman\u0131z\u0131n Allowed Web Origins<\/strong> ve Allowed Callback URLs<\/strong> alanlar\u0131n\u0131 kontrol etmelisiniz. Bu alanlarda adres sonunda taksim i\u015fareti (\/<\/code>) bulunmamas\u0131na dikkat edilmelidir.<\/p>\nLock Ekran\u0131 Y\u00fcklenmiyor veya A\u00e7\u0131lm\u0131yor<\/h3>\n
JWT Token \u0130mzas\u0131 Do\u011frulama Hatas\u0131<\/h3>\n
audience<\/code> parametresinin birebir e\u015fle\u015fti\u011finden emin olun.<\/p>\n11. Sonu\u00e7<\/h2>\n