تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

إضافة بيانات تسجيل الدخول بسهولة إلى تطبيق الويب باستخدام FirebaseUI

‫FirebaseUI للويب هي مجموعة من المكتبات المستندة إلى حزمة تطوير البرامج (SDK) بلغة JavaScript الخاصة بخدمة Firebase Authentication، وتساعدك هذه المكتبات في إطلاق مسارات المصادقة بسرعة.

توفّر FirebaseUI للويب المزايا التالية:

توافُق حزمة تطوير البرامج (SDK) الحديثة ذات الوحدات مع initializeApp(...) وحزمة تطوير البرامج (SDK) الحالية من Firebase JS
شاشات ونماذج وأزرار قابلة للإنشاء بدلاً من أداة واحدة متكاملة
التوافق مع React وShadcn وAngular
سلوكيات قابلة للإعداد لإعادة التوجيه مقابل النوافذ المنبثقة، وGoogle One Tap، والترقية بدون الكشف عن الهوية، وإعدادات الهاتف، وغير ذلك
إتاحة الأقلمة من خلال @firebase-oss/ui-translations
تتوفّر إمكانية استخدام البريد الإلكتروني/كلمة المرور ورابط البريد الإلكتروني ومصادقة الهاتف ومزوّدي خدمة OAuth وتدفقات المصادقة المتعدّدة العوامل.

يقدّم هذا الدليل شرحًا تفصيليًا لعملية التثبيت والإعداد وطرق تسجيل الدخول والإعدادات الشائعة لتطبيقات React وShadcn وAngular.

قبل البدء

أضِف Firebase إلى تطبيق الويب الخاص بك:

فعِّل المصادقة في وحدة تحكّم Firebase.

ثبِّت firebase إذا لم يكن متوفّرًا في مشروعك:
```
npm install firebase
```
استخدِم حزمة تطوير البرامج (SDK) المعيارية في 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 الحالية، ولا تحتاج عادةً إلى استيراد حزمة CSS المضمّنة في FirebaseUI عند استخدام سجلّ shadcn.

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.
أكمِل عملية تسجيل الدخول باستخدام عنوان URL الحالي من خلال أدوات المساعدة الأساسية عند الحاجة.

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']);
  }
}

تسجيل الخروج

لتسجيل خروج المستخدمين، استخدِم واجهة برمجة التطبيقات العادية لتسجيل الخروج في مصادقة 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 Tap

استخدِم سلوك oneTapSignIn(...) لتفعيل ميزة "نقرة واحدة" من Google:

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,
});

الخطوات التالية

يمكنك الاطّلاع على README.md للحصول على واجهة برمجة التطبيقات الكاملة والسلوكيات ومرجع المكوّن.
اطّلِع على MIGRATION.md إذا كنت تريد نقل تطبيق حالي إلى FirebaseUI للويب.
يمكنك الاطّلاع على المستندات الخاصة بالحزمة في 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 Tap

بنود الخدمة وسياسة الخصوصية

تفاعُل

Shadcn

Angular

الترجمات

الخطوات التالية

إضافة بيانات تسجيل الدخول بسهولة إلى تطبيق الويب باستخدام FirebaseUI