‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

با FirebaseUI، به‌راحتی به برنامه وب خود ورود به سیستم اضافه کنید

‫FirebaseUI for Web مجموعه‌ای از کتابخانه‌ها است که روی کیت توسعه نرم‌افزار جاوا اسکریپت Firebase Authentication ساخته شده است و به شما کمک می‌کند جریان‌های اصالت‌سنجی را به‌سرعت ارسال کنید.

‫FirebaseUI برای وب این مزایا را ارائه می‌دهد:

پشتیبانی از کیت توسعه نرم‌افزار واحد مدرن با initializeApp(...) و کیت توسعه نرم‌افزار Firebase JS کنونی.
صفحه‌ها، فرم‌ها، و دکمه‌های ترکیبی به‌جای یک ابزارک یکپارچه.
پشتیبانی از React،‏ Shadcn، و Angular.
عملکردهای قابل پیکربندی برای جریان‌های هدایت مجدد دربرابر جریان‌های بالاپَر، «یک‌ضرب Google»، ارتقای ناشناس، تنظیمات تلفن، و غیره.
پشتیبانی از بومی‌سازی ازطریق @firebase-oss/ui-translations.
پشتیبانی داخلی برای ایمیل/گذرواژه، پیوند ایمیل، اصالت‌سنجی تلفنی، ارائه‌دهندگان OAuth، و جریان‌های چندعاملی.

این راهنما مراحل نصب، مقداردهی اولیه، روش‌های ورود به سیستم، و پیکربندی رایج برای برنامه‌های React،‏ Shadcn، و Angular را توضیح می‌دهد.

قبل از شروع

افزودن Firebase به برنامه وب:

اصالت‌سنجی را در کنسول Firebase فعال کنید.

اگر firebase ازقبل در پروژه‌تان نیست، آن را نصب کنید:
```
npm install firebase
```
از کیت توسعه نرم‌افزار Firebase JS واحدی استفاده کنید:
```
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});
```
پلاتفرم خود را انتخاب کنید و FirebaseUI را نصب کنید:

برای برنامه‌های React مبتنی بر shadcn/ui، ثبت Firebase را به components.json اضافه کنید:
```
{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}
```
عناصر اصالت‌سنجی که در سراسر این راهنما استفاده شده‌اند در آن ثبت دردسترس هستند، ازجمله sign-in-auth-screen، sign-up-auth-screen، email-link-auth-screen، oauth-screen، phone-auth-screen، google-sign-in-button، apple-sign-in-button، و github-sign-in-button.

سپس عناصر موردنظرتان را برای استفاده اضافه کنید:
```
npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
```
این کار وابستگی‌های زیربنایی React FirebaseUI را برای شما نصب می‌کند.

برای برنامه‌های React بدون shadcn/ui، موارد زیر را نصب کنید:
```
npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
```
برای برنامه‌های Angular، موارد زیر را نصب کنید:
```
npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
```

مقداردهی اولیه FirebaseUI

فروشگاه میانای کاربر مشترکی با initializeUI(...) ایجاد کنید، سپس آن را به یکپارچه‌سازی چارچوب خود منتقل کنید.

واکنش نشان دادن

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

Shadcn

‫Shadcn از همان راه‌اندازی React استفاده می‌کند، زیرا از @firebase-oss/ui-react نیز در زیر استفاده می‌کند:

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

این عناصر از سبک‌های shadcn موجود شما استفاده می‌کنند؛ معمولاً هنگام استفاده از ثبت shadcn، CSS دسته‌بندی‌شده FirebaseUI را وارد نمی‌کنید.

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirebaseUI } from '@firebase-oss/ui-angular';
import { initializeUI } from '@firebase-oss/ui-core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp({
        /* your Firebase config */
      }),
    ),
    provideFirebaseUI((apps) =>
      initializeUI({
        app: apps[0],
      }),
    ),
  ],
};

دربرگیرنده سبک‌ها

‫FirebaseUI دارای عناصر رابط کاربری ازپیش ساخته‌شده برای React و Angular است. برای استفاده از عناصر، باید CSS آن‌ها را اضافه کنید:

اگر از Tailwind با React یا Angular استفاده می‌کنید:

درغیراین‌صورت، سبک‌های FirebaseUI را اضافه کنید:

@import '@firebase-oss/ui-styles/dist.min.css';

‫FirebaseUI برای وب از زمینه‌سازی سفارشی ازطریق لغو متغیر CSS پشتیبانی می‌کند. برای جزئیات بیشتر، مستندات زمینه‌سازی را ببینید.

قبل‌از اینکه کاربران بتوانند به سیستم وارد شوند، هر ارائه‌دهنده‌ای را که می‌خواهید در اصالت‌سنجی -> روش ورود به سیستم در «کنسول Firebase» فعال کنید.

‫FirebaseUI برای وب از صفحه‌ها، فرم‌ها، و دکمه‌هایی استفاده می‌کند که مستقیماً ارائه می‌کنید. پیکربندی مشترک برای این جریان‌ها در behaviors قرار دارد که به initializeUI(...) منتقل شده است.

نشانی ایمیل و گذرواژه

ایمیل/گذرواژه را در کنسول Firebase فعال کنید.
‫SignInAuthScreen یا SignUpAuthScreen را در React، sign-in-auth-screen یا sign-up-auth-screen را در Shadcn، یا fui-sign-in-auth-screen یا fui-sign-up-auth-screen را در Angular پردازش کنید.

اصالت‌سنجی پیوند ایمیل

ایمیل/گذرواژه و پیوند ایمیل (ورود به سیستم بدون گذرواژه) را در کنسول Firebase فعال کنید.
‫EmailLinkAuthScreen را در React، عنصر email-link-auth-screen تولیدشده در Shadcn، یا fui-email-link-auth-screen را در Angular پرداز کنید.
درصورت نیاز، بااستفاده از یاری‌رسان‌های اصلی، ورود به سیستم را با نشانی وب فعلی تکمیل کنید.

import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

await completeEmailLinkSignIn(ui, window.location.href);

ارائه‌دهندگان OAuth

‫FirebaseUI برای وب از دکمه‌های داخلی برای ارائه‌دهندگانی مثل Google،‏ Apple،‏ Facebook،‏ GitHub،‏ Microsoft، و X/Twitter پشتیبانی می‌کند.

ارائه‌دهنده را در کنسول Firebase فعال کنید.
دامنه برنامه‌تان را درصورت نیاز به دامنه‌های مجاز اضافه کنید.
OAuthScreen را با دکمه‌های ارائه‌دهنده‌ای که می‌خواهید، مثل GoogleSignInButton،‏ AppleSignInButton،‏ FacebookSignInButton، GitHubSignInButton،‏ MicrosoftSignInButton، یا TwitterSignInButton در React، معادل‌های shadcn تولیدشده در برنامه‌تان، یا fui-oauth-screen با fui-google-sign-in-button، fui-apple-sign-in-button،‏ fui-facebook-sign-in-button، fui-github-sign-in-button،‏ fui-microsoft-sign-in-button، یا fui-twitter-sign-in-button در Angular پرداز کنید.

شماره تلفن

تلفن را در کنسول Firebase فعال کنید.
دامنه برنامه‌تان را به دامنه‌های مجاز اضافه کنید.
‫PhoneAuthScreen یا PhoneAuthForm را در React، phone-auth-screen یا phone-auth-form را در Shadcn، یا fui-phone-auth-screen را در Angular پرداز کنید.

اختیاری: کشورهای مجاز، کشور پیش‌فرض، یا رفتار reCAPTCHA را پیکربندی کنید:

import {
  countryCodes,
  initializeUI,
  recaptchaVerification,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    countryCodes({
      allowedCountries: ['GB', 'US', 'FR'],
      defaultCountry: 'GB',
    }),
    recaptchaVerification({
      size: 'compact',
      theme: 'light',
    }),
  ],
});

سفارشی‌سازی

پیکربندی رفتار اصالت‌سنجی مشترک در behaviors منتقل‌شده به initializeUI(...).

نام نمایشی درطول ثبت‌نام الزامی است

import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [requireDisplayName()],
});

ارتقا دادن کاربران ناشناس

از رفتار autoUpgradeAnonymousUsers(...) برای ادغام کردن جلسه ناشناس در حساب واردشده به سیستم استفاده کنید.

import {
  autoUpgradeAnonymousUsers,
  initializeUI,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    autoUpgradeAnonymousUsers({
      async onUpgrade(ui, oldUserId, credential) {
        // Migrate or merge user data here if needed.
      },
    }),
  ],
});

برای جزئیات انتقال، MIGRATION.md را ببینید.

صفحه اصالت‌سنجی موردنظرتان را پرداز بزنید و موفقیت را در بازخوان‌های مؤلفه یا بروندادهای Angular مدیریت کنید.

واکنش نشان دادن

```tsx import { SignInAuthScreen } from '@firebase-oss/ui-react'; import { useNavigate } from 'react-router';

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Shadcn

‫Shadcn از همان زمان اجرا و جریان React استفاده می‌کند. تنها تفاوت این است که به‌جای اینکه عنصر تولیدشده را از @firebase-oss/ui-react وارد کنید، آن را از برنامه‌تان وارد می‌کنید:

```tsx import { SignInAuthScreen } from '@/components/sign-in-auth-screen'; import { useNavigate } from 'react-router';

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Angular

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
import type { User } from '@angular/fire/auth';

@Component({
  selector: 'app-sign-in-page',
  standalone: true,
  imports: [SignInAuthScreenComponent],
  template: `
    <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />
  `,
})
export class SignInPageComponent {
  constructor(private router: Router) {}

  onSignIn(user: User) {
    this.router.navigate(['/dashboard']);
  }
}

خروج از سیستم

برای خارج کردن کاربران از سیستم، از API استاندارد خروج از سیستم «اصالت‌سنجی Firebase» استفاده کنید:

import { getAuth, signOut } from 'firebase/auth';

const auth = getAuth(app);
await signOut(auth);

جریان ورود به سیستم ارائه‌دهنده را با رفتارها انتخاب کنید:

‫providerPopupStrategy() برای جریان‌های بالاپر
‫providerRedirectStrategy() برای جریان‌های هدایت مجدد

بالاپر پیش‌فرض است، بنابراین فقط باید هدایت مجدد را به‌طور صریح پیکربندی کنید:

import { initializeUI, providerRedirectStrategy } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [providerRedirectStrategy()],
});

برای پرداز کردن دکمه‌های OAuth، آن‌ها را به صفحه مختص پلاتفرم خود اضافه کنید.

واکنش نشان دادن

import {
  GitHubSignInButton,
  GoogleSignInButton,
  OAuthScreen,
} from '@firebase-oss/ui-react';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Shadcn

import { GitHubSignInButton } from '@/components/github-sign-in-button';
import { GoogleSignInButton } from '@/components/google-sign-in-button';
import { OAuthScreen } from '@/components/oauth-screen';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Angular

import { Component } from '@angular/core';
import {
  GithubSignInButtonComponent,
  GoogleSignInButtonComponent,
  OAuthScreenComponent,
} from '@firebase-oss/ui-angular';

@Component({
  selector: 'app-oauth-page',
  standalone: true,
  imports: [
    OAuthScreenComponent,
    GoogleSignInButtonComponent,
    GithubSignInButtonComponent,
  ],
  template: `
    <fui-oauth-screen>
      <fui-google-sign-in-button />
      <fui-github-sign-in-button />
    </fui-oauth-screen>
  `,
})
export class OAuthPageComponent {}

تک‌ضرب Google One

برای فعال کردن «تک‌ضرب Google»، از رفتار oneTapSignIn(...) استفاده کنید:

import { initializeUI, oneTapSignIn } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    oneTapSignIn({
      clientId: 'YOUR_GOOGLE_WEB_CLIENT_ID',
      autoSelect: false,
      cancelOnTapOutside: false,
    }),
  ],
});

مطمئن شوید که ورود به سیستم Google در کنسول Firebase فعال باشد، سپس شناسه کارخواه وب را از تنظیمات ارائه‌دهنده Google کپی کنید.

شرایط خدمات و خط‌مشی رازداری

پیوندهای خط‌مشی را ازطریق پیکربندی ارائه‌دهنده پلاتفرم پیوست کنید.

واکنش نشان دادن

```tsx import { FirebaseUIProvider } from '@firebase-oss/ui-react';

<FirebaseUIProvider ui={ui} policies={{ termsOfServiceUrl: 'https://example.com/terms', privacyPolicyUrl: 'https://example.com/privacy', }}

{children} ; ```

Shadcn

از همان پیکربندی FirebaseUIProvider که React استفاده می‌کند استفاده کنید.

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseUIPolicies(() => ({
      termsOfServiceUrl: 'https://example.com/terms',
      privacyPolicyUrl: 'https://example.com/privacy',
    })),
  ],
};

ترجمه‌ها

‫FirebaseUI برای وب از طریق @firebase-oss/ui-translations از بومی‌سازی پشتیبانی می‌کند.

import { initializeUI } from '@firebase-oss/ui-core';
import { registerLocale } from '@firebase-oss/ui-translations';

const enUsCustom = registerLocale('en-US', {
  labels: {
    signIn: 'Continue',
  },
});

const ui = initializeUI({
  app,
  locale: enUsCustom,
});

مراحل بعدی

برای مشاهده API کامل، رفتارها، و مرجع عنصر، README.md را بخوانید.
اگر درحال انتقال برنامه موجود به FirebaseUI برای وب هستید، MIGRATION.md را بخوانید.
اسناد مختص بسته را در packages/react/README.md، packages/shadcn/README.md، و packages/angular/README.md ببینید.
مثال‌ها را در examples/react، examples/shadcn، و examples/angular کاوش کنید.

با FirebaseUI، به‌راحتی به برنامه وب خود ورود به سیستم اضافه کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

قبل از شروع

مقداردهی اولیه FirebaseUI

واکنش نشان دادن

Shadcn

Angular

دربرگیرنده سبک‌ها

راه‌اندازی روش‌های ورود به سیستم

نشانی ایمیل و گذرواژه

اصالت‌سنجی پیوند ایمیل

ارائه‌دهندگان OAuth

شماره تلفن

سفارشی‌سازی

نام نمایشی درطول ثبت‌نام الزامی است

ارتقا دادن کاربران ناشناس

ورود به سیستم

واکنش نشان دادن

Shadcn

Angular

خروج از سیستم

ارائه‌دهندگان OAuth: بالاپر دربرابر هدایت

واکنش نشان دادن

Shadcn

Angular

تک‌ضرب Google One

شرایط خدمات و خط‌مشی رازداری

واکنش نشان دادن

Shadcn

Angular

ترجمه‌ها

مراحل بعدی

با FirebaseUI، به‌راحتی به برنامه وب خود ورود به سیستم اضافه کنید