OIDC در Angular

OIDC (مخفف OpenID Connect) یک پروتکل احراز هویت (Authentication) است که بر پایه OAuth 2.0 ساخته شده است. این پروتکل برای مدیریت هویت کاربران در برنامه‌های وب و موبایل استفاده می‌شود. OIDC به برنامه‌ها اجازه می‌دهد تا هویت کاربران را از طریق یک ارائه‌دهنده هویت (Identity Provider یا IdP) مثل Google، Microsoft، Okta یا Keycloak تأیید کنند و اطلاعاتی مثل نام، ایمیل یا نقش‌های کاربر را دریافت کنند.

در Angular، OIDC معمولاً برای پیاده‌سازی Single Sign-On (SSO) یا ورود امن کاربران به برنامه استفاده می‌شود. به جای اینکه برنامه Angular خودش فرایند ورود (login) را مدیریت کند، این کار به یک IdP خارجی واگذار می‌شود که امنیت و مقیاس‌پذیری بالاتری ارائه می‌دهد.

اجزای اصلی OIDC:

1. Identity Provider (IdP): سرویسی که هویت کاربر را تأیید می‌کند (مثل Google یا Keycloak).
2. Access Token: توکنی که برای دسترسی به APIها یا منابع محافظت‌شده استفاده می‌شود.
3. ID Token: توکن JWT که شامل اطلاعات هویت کاربر (مثل نام، ایمیل) است.
4. Refresh Token (اختیاری): برای دریافت توکن‌های جدید بدون نیاز به ورود مجدد.
5. Endpoints:

• Authorization Endpoint: جایی که کاربر برای ورود هدایت می‌شود.
• Token Endpoint: برای دریافت توکن‌ها.
• UserInfo Endpoint: برای دریافت اطلاعات کاربر.

OIDC در Angular کجا به درد می‌خورد؟

OIDC در سناریوهای زیر در Angular کاربرد دارد:

1. Single Sign-On (SSO):

• اگر چندین برنامه دارید (مثل وب‌سایت، اپ موبایل)، با OIDC کاربر یک‌بار وارد IdP می‌شود و می‌تواند به همه برنامه‌ها دسترسی داشته باشد بدون نیاز به ورود مجدد.
• مثال: ورود با حساب Google یا Microsoft در چندین سرویس.

1. امنیت بالا:

• OIDC از استانداردهای امنیتی مثل JWT و رمزنگاری HTTPS استفاده می‌کند، بنابراین نیازی به ذخیره رمزهای کاربران در برنامه خودتان نیست.
• مناسب برای برنامه‌هایی که امنیت حساس دارند (مثل اپلیکیشن‌های بانکی یا سازمانی).

1. مدیریت هویت متمرکز:

• اگر سازمان شما از IdPهایی مثل Okta، Auth0 یا Azure AD استفاده می‌کند، OIDC به شما امکان می‌دهد هویت کاربران را به صورت متمرکز مدیریت کنید.
• مثال: برنامه‌های سازمانی که کاربران با حساب‌های شرکتی وارد می‌شوند.

1. برنامه‌های SPA (Single Page Application):

• Angular یک فریم‌ورک SPA است. OIDC برای SPAها مناسب است چون از Implicit Flow یا Authorization Code Flow with PKCE پشتیبانی می‌کند که برای برنامه‌های کلاینت‌ساید امن هستند.
• مثال: برنامه‌ای که با APIهای بک‌اند کار می‌کند و نیاز به توکن برای احراز هویت درخواست‌ها دارد.

1. دسترسی به اطلاعات کاربر:

• با OIDC می‌توانید اطلاعاتی مثل نام، ایمیل یا نقش‌های کاربر را از IdP بگیرید و در برنامه Angular نمایش دهید.
• مثال: نمایش نام کاربر در هدر برنامه پس از ورود.

پیاده‌سازی OIDC در Angular

برای استفاده از OIDC در Angular، معمولاً از کتابخانه‌هایی مثل angular-oauth2-oidc یا @auth0/auth0-angular استفاده می‌شود. مراحل کلی پیاده‌سازی:

1. نصب کتابخانه:

   npm install angular-oauth2-oidc

2. پیکربندی OIDC در Angular:
   در فایل app.module.ts یا یک ماژول جداگانه، تنظیمات OIDC را وارد کنید:

   import { AuthConfig, OAuthModule, OAuthService } from 'angular-oauth2-oidc';
   import { NgModule } from '@angular/core';

   export const authConfig: AuthConfig = {
     issuer: 'https://your-idp.com', // آدرس IdP
     redirectUri: window.location.origin + '/callback', // URL برای redirect پس از ورود
     clientId: 'your-client-id', // از IdP دریافت می‌شود
     responseType: 'code', // برای Authorization Code Flow
     scope: 'openid profile email', // scopes مورد نیاز
     showDebugInformation: true,
   };

   @NgModule({
     imports: [OAuthModule.forRoot()],
     providers: [
       { provide: AuthConfig, useValue: authConfig }
     ]
   })
   export class AppModule {
     constructor(private oauthService: OAuthService) {
       this.oauthService.configure(authConfig);
       this.oauthService.loadDiscoveryDocumentAndTryLogin();
     }
   }

3. مدیریت ورود و خروج:

   // در component
   export class LoginComponent {
     constructor(private oauthService: OAuthService) {}

     login() {
       this.oauthService.initLoginFlow(); // هدایت کاربر به IdP
     }

     logout() {
       this.oauthService.logOut(); // خروج کاربر
     }

     get userProfile() {
       return this.oauthService.getIdentityClaims(); // دریافت اطلاعات کاربر
     }
   }

4. محافظت از مسیرها (Guard):
   برای محدود کردن دسترسی به صفحات خاص:

   import { CanActivate } from '@angular/router';
   import { OAuthService } from 'angular-oauth2-oidc';
   import { Injectable } from '@angular/core';

   @Injectable()
   export class AuthGuard implements CanActivate {
     constructor(private oauthService: OAuthService) {}

     canActivate(): boolean {
       return !!this.oauthService.hasValidAccessToken();
     }
   }

   // در app-routing.module.ts
   const routes: Routes = [
     { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] },
     { path: 'callback', component: CallbackComponent },
   ];

5. ارسال توکن به API:
   برای ارسال Access Token به بک‌اند:

   import { HttpClient } from '@angular/common/http';
   import { OAuthService } from 'angular-oauth2-oidc';

   export class ApiService {
     constructor(private http: HttpClient, private oauthService: OAuthService) {}

     getData() {
       const headers = { Authorization: `Bearer ${this.oauthService.getAccessToken()}` };
       return this.http.get('https://api.example.com/data', { headers });
     }
   }

کجا به درد می‌خورد؟

• برنامه‌های سازمانی: برای SSO در شرکت‌ها (مثل ورود با حساب Microsoft).
• برنامه‌های عمومی: ورود با Google، Facebook یا سایر IdPها.
• برنامه‌های امن: جایی که امنیت اولویت دارد و نمی‌خواهید رمزها را ذخیره کنید.
• اپلیکیشن‌های چندسکویی: وقتی برنامه وب و موبایل دارید و می‌خواهید تجربه ورود یکپارچه باشد.

نکات مهم:

• Authorization Code Flow with PKCE برای SPAها امن‌تر است و توصیه می‌شود (به جای Implicit Flow).
• از کتابخانه‌های استاندارد مثل angular-oauth2-oidc یا auth0 استفاده کنید تا پیچیدگی‌های OIDC را مدیریت کنند.
• مطمئن شوید IdP شما (مثل Keycloak یا Auth0) به درستی پیکربندی شده است.
• توکن‌ها را در localStorage یا sessionStorage ذخیره نکنید مگر اینکه از تدابیر امنیتی اضافی استفاده کنید.

جمع‌بندی:

OIDC در Angular برای مدیریت احراز هویت امن و یکپارچه کاربران در برنامه‌های SPA استفاده می‌شود. با استفاده از کتابخانه‌های مناسب، می‌توانید به سرعت SSO و مدیریت هویت را پیاده‌سازی کنید.