Sosyal Giriş
Sosyal Giriş, Angular uygulamalarında kullanıcıların Google, Facebook veya diğer üçüncü taraf servis hesaplarıyla hızlı ve güvenli bir şekilde oturum açmasını sağlayan bir özelliktir. Modern web uygulamalarında ve tek sayfa uygulamalarında (SPA) kullanıcı deneyimini iyileştirmek için kritik öneme sahiptir. Sosyal giriş, kullanıcıların parolalarını hatırlama zorunluluğunu ortadan kaldırır, kayıt sürecini hızlandırır ve uygulamaya girişte güvenliği artırır.
Angular’da Sosyal Giriş uygularken, temel kavramlar arasında bileşenler (components), durum yönetimi (state management), veri akışı (data flow) ve yaşam döngüsü (lifecycle hooks) bulunur. Bu kavramları etkin kullanarak, yeniden kullanılabilir ve modüler bileşenler oluşturabilir, veri akışını reaktif bir şekilde yönetebilir ve gereksiz yeniden render’ların önüne geçebilirsiniz.
Bu eğitimde, temel bir Sosyal Giriş bileşeni oluşturmayı, üçüncü taraf sağlayıcılarla entegrasyonu, kullanıcı durumunun yönetimini ve Angular’ın en iyi uygulamalarını öğreneceksiniz. Öğrenciler, SPA projelerinde Sosyal Giriş işlevselliğini güvenli, ölçeklenebilir ve performanslı bir şekilde uygulayabilecek bilgi ve deneyime sahip olacaklar.
Temel Örnek
typescriptimport { Component } from '@angular/core';
import { SocialAuthService, GoogleLoginProvider, SocialUser } from 'angularx-social-login';
@Component({
selector: 'app-social-login',
template: ` <div *ngIf="!user"> <button (click)="signInWithGoogle()">Google ile Giriş Yap</button> </div> <div *ngIf="user"> <p>Hoşgeldiniz, {{ user.name }}</p> <button (click)="signOut()">Çıkış Yap</button> </div>
`
})
export class SocialLoginComponent {
user: SocialUser | null = null;
constructor(private authService: SocialAuthService) {
this.authService.authState.subscribe(user => {
this.user = user;
});
}
signInWithGoogle(): void {
this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
}
signOut(): void {
this.authService.signOut();
}
}Yukarıdaki SocialLoginComponent, Google hesabı ile giriş yapmayı sağlar. SocialAuthService injekte edilerek authState üzerinden kullanıcı durumu takip edilir ve UI reaktif şekilde güncellenir. *ngIf direktifleri, kullanıcının giriş durumuna göre farklı içerik gösterir. signInWithGoogle() metodu giriş işlemini başlatır, signOut() metodu ise çıkış işlemini yönetir.
Bu yapı, UI ve iş mantığını ayırır, prop drilling ve doğrudan state mutasyonlarını önler. Observable kullanımı sayesinde bileşenler modüler ve yeniden kullanılabilir olur. Bu yaklaşım, SPA’larda kullanıcı durumunun güvenli ve performanslı yönetimini sağlar.
Pratik Örnek
typescriptimport { Component, OnInit, OnDestroy } from '@angular/core';
import { SocialAuthService, GoogleLoginProvider, SocialUser } from 'angularx-social-login';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-advanced-social-login',
template: ` <div *ngIf="!user"> <button (click)="signInWithGoogle()">Google ile Giriş Yap</button> </div> <div *ngIf="user"> <p>Hoşgeldiniz, {{ user.name }}</p> <p>Email: {{ user.email }}</p> <button (click)="signOut()">Çıkış Yap</button> </div>
`
})
export class AdvancedSocialLoginComponent implements OnInit, OnDestroy {
user: SocialUser | null = null;
private authSubscription: Subscription | null = null;
constructor(private authService: SocialAuthService) {}
ngOnInit(): void {
this.authSubscription = this.authService.authState.subscribe(user => {
this.user = user;
if (user) {
console.log('Kullanıcı giriş yaptı:', user);
}
});
}
signInWithGoogle(): void {
this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).catch(err => {
console.error('Giriş hatası:', err);
});
}
signOut(): void {
this.authService.signOut().then(() => {
console.log('Kullanıcı çıkış yaptı');
}).catch(err => {
console.error('Çıkış hatası:', err);
});
}
ngOnDestroy(): void {
this.authSubscription?.unsubscribe();
}
}AdvancedSocialLoginComponent, gerçek dünya senaryolarına uygun bir Sosyal Giriş uygulamasıdır. ngOnInit ve ngOnDestroy hook’ları, Observable aboneliklerini yöneterek bellek sızıntılarını önler. Hatalar catch ile yakalanır ve kullanıcıya doğru şekilde aktarılır. authState aboneliği sayesinde UI her zaman güncel kalır, gereksiz render’lar önlenir ve state yönetimi merkezi hale gelir. Bu tasarım, modülerlik ve ölçeklenebilirlik açısından Angular projelerinde ideal bir örnektir.
En iyi uygulamalar, UI ve iş mantığını ayırmak, merkezi state yönetimi kullanmak, Lifecycle hook’ları doğru kullanmak ve reaktif veri akışı sağlamaktır. Kaçınılması gereken hatalar: prop drilling, doğrudan state mutasyonu ve gereksiz re-render. Angular DevTools ve tarayıcı konsolu ile debugging yapılabilir. Performans optimizasyonu için Change Detection Strategy OnPush kullanılmalı, güvenlik için OAuth anahtarları güvenli şekilde saklanmalı ve token doğrulaması sunucu tarafında yapılmalıdır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| SocialLoginComponent | Sosyal Giriş UI bileşeni | <app-social-login></app-social-login> |
| SocialAuthService | Kullanıcı durumu yönetim servisi | this.authService.signIn(GoogleLoginProvider.PROVIDER_ID) |
| authState | Kullanıcı durumunu gözlemleyen Observable | this.authService.authState.subscribe(user => {...}) |
| ngOnInit / ngOnDestroy | Abonelikleri yönetmek için lifecycle hook’ları | ngOnInit() { ... } ngOnDestroy() { this.subscription.unsubscribe(); } |
| OnPush Change Detection | Gereksiz render’ları önler | ChangeDetectionStrategy.OnPush |
Sosyal Giriş, Angular uygulamalarında güvenli, performanslı ve modüler SPA’lar oluşturmak için kritik bir özelliktir. Öğrenilenler, birden fazla sağlayıcı entegrasyonu, JWT token doğrulaması, hata yönetimi ve performans optimizasyonu gibi ileri seviye konulara temel oluşturur. Angular dokümantasyonu ve angularx-social-login kütüphanesi, konuyu derinlemesine öğrenmek için ideal kaynaklardır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek