Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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

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

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

قبل البدء

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

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

ثبِّت firebase إذا لم يكن متوفّرًا في مشروعك:
```
npm install firebase
```
استخدِم حزمة تطوير البرامج المعيارية من Firebase:
```
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