ورود اجتماعی
ورود اجتماعی در انگولار به کاربران اجازه می‌دهد تا از طریق سرویس‌های ثالث مانند Google، Facebook یا GitHub وارد برنامه شوند. این روش باعث بهبود تجربه کاربری، کاهش نیاز به مدیریت رمز عبور و ساده‌سازی فرآیند ثبت‌نام می‌شود. در برنامه‌های مدرن Single-Page Applications (SPA)، ادغام ورود اجتماعی باعث می‌شود ورود و دسترسی کاربران سریع، امن و بدون قطعی تجربه شود.
در انگولار، مفاهیم کلیدی شامل کامپوننت‌ها، مدیریت وضعیت (State Management)، جریان داده (Data Flow) و Hookهای چرخه حیات (Lifecycle Hooks) هستند. توسعه‌دهندگان می‌توانند کامپوننت‌های قابل استفاده مجدد بسازند که منطق ورود را در خود جای می‌دهند، وضعیت کاربران را با استفاده از سرویس‌ها به‌صورت متمرکز مدیریت کنند و با Observables رابط کاربری را به‌صورت واکنشی (Reactive) به‌روز کنند. این روش از مشکلات رایج مانند Prop Drilling، Re-Renders غیرضروری و تغییر مستقیم وضعیت جلوگیری می‌کند.
در این آموزش، خواننده یاد می‌گیرد چگونه کامپوننت‌های پایه برای ورود اجتماعی ایجاد کند، ارائه‌دهندگان ثالث را ادغام کند و جریان داده و مدیریت وضعیت را در پروژه‌های واقعی به‌کار گیرد. پس از پایان آموزش، توانایی ساخت یک سیستم ورود اجتماعی امن، مدولار و مقیاس‌پذیر در انگولار را خواهند داشت.
مثال پایه
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</button> </div> <div *ngIf="user"> <p>خوش آمدید، {{ user.name }}</p> <button (click)="signOut()">خروج</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();
}
}در این مثال، SocialLoginComponent یک کامپوننت ساده برای مدیریت ورود با Google است. سرویس SocialAuthService به‌عنوان Dependency Injection وارد شده و با Subscribing به authState، رابط کاربری به‌صورت واکنشی به‌روزرسانی می‌شود. استفاده از *ngIf وضعیت نمایش دکمه‌های ورود و خروج را کنترل می‌کند.
متد signInWithGoogle() عملیات ورود را از طریق GoogleProvider انجام می‌دهد و signOut() برای خروج کاربر است. این روش نحوه جداسازی منطق و نمایش در انگولار را نشان می‌دهد. استفاده از Observables و جریان داده واکنشی باعث جلوگیری از Prop Drilling و تغییر مستقیم وضعیت می‌شود و کامپوننت را مدولار و قابل استفاده مجدد می‌کند.
مثال کاربردی
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</button> </div> <div *ngIf="user"> <p>خوش آمدید، {{ user.name }}</p> <p>ایمیل: {{ user.email }}</p> <button (click)="signOut()">خروج</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('کاربر وارد شده:', user);
}
});
}
signInWithGoogle(): void {
this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).catch(err => {
console.error('خطای ورود:', err);
});
}
signOut(): void {
this.authService.signOut().then(() => {
console.log('کاربر خارج شد');
}).catch(err => {
console.error('خطای خروج:', err);
});
}
ngOnDestroy(): void {
this.authSubscription?.unsubscribe();
}
}AdvancedSocialLoginComponent نشان‌دهنده یک نمونه واقعی ورود اجتماعی است. در اینجا از Lifecycle Hooks مانند ngOnInit و ngOnDestroy برای مدیریت Subscriptions و جلوگیری از نشت حافظه استفاده شده است. خطاها در catch بلوک مدیریت می‌شوند.
اطلاعات کاربر مانند نام و ایمیل در UI نمایش داده می‌شود. Subscribing به authState باعث می‌شود رابط کاربری به‌طور خودکار به‌روزرسانی شود، از Re-Renders غیرضروری جلوگیری شود و وضعیت کاربر به‌صورت متمرکز مدیریت گردد. این رویکرد کامپوننتی مدولار، قابل نگهداری و مقیاس‌پذیر ایجاد می‌کند.
بهترین شیوه‌ها شامل جداسازی منطق و UI، مدیریت متمرکز وضعیت، استفاده صحیح از Lifecycle Hooks و جریان داده واکنشی است. اشتباهات رایج شامل Prop Drilling، تغییر مستقیم وضعیت و Re-Renders غیرضروری هستند. برای اشکال‌زدایی از Angular DevTools یا کنسول استفاده کنید. برای بهینه‌سازی عملکرد، از OnPush Change Detection بهره ببرید. امنیت شامل حفاظت از OAuth Keys، ذخیره‌سازی امن داده‌ها و اعتبارسنجی توکن سمت سرور است.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| SocialLoginComponent | کامپوننت رابط کاربری ورود اجتماعی | <app-social-login></app-social-login> |
| SocialAuthService | سرویس مدیریت وضعیت و ورود کاربران | this.authService.signIn(GoogleLoginProvider.PROVIDER_ID) |
| authState | Observable پیگیری وضعیت کاربر | this.authService.authState.subscribe(user => {...}) |
| ngOnInit / ngOnDestroy | Lifecycle Hooks مدیریت Subscriptions | ngOnInit() { ... } ngOnDestroy() { this.subscription.unsubscribe(); } |
| OnPush Change Detection | جلوگیری از Re-Renders غیرضروری | ChangeDetectionStrategy.OnPush |
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود