تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

بدء مصادقة Firebase على المواقع الإلكترونية

يمكنك استخدام مصادقة Firebase للسماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام المزيد من طرق تسجيل الدخول، بما في ذلك عنوان البريد الإلكتروني وكلمة المرور لتسجيل الدخول موفري الهوية الموحدة مثل "تسجيل الدخول بحساب Google" و"تسجيل الدخول إلى Facebook". هذا النمط يساعدك هذا البرنامج التعليمي في بدء استخدام مصادقة Firebase من خلال توضيح كيفية إضافة وعنوان البريد الإلكتروني وكلمة المرور لتسجيل الدخول إلى التطبيق.

إضافة حزمة تطوير البرامج للمصادقة وإعدادها

إذا لم تكن قد قمت بذلك بالفعل، تثبيت حزمة تطوير البرامج (SDK) لـ Firebase JS وإعداد Firebase
إضافة حزمة SDK الخاصة بـ Firebase لمصادقة Firebase وإعداد مصادقة Firebase:

Web

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(اختياري) إنشاء نموذج أولي واختباره باستخدام "حزمة أدوات المحاكاة المحلية من Firebase"

قبل الحديث عن آلية تطبيقك في المصادقة على المستخدمين، إليك مجموعة من في الأدوات التي يمكنك استخدامها لإنشاء نموذج أولي واختبار وظيفة المصادقة: مجموعة أدوات المحاكاة المحلية في Firebase إذا كنت تريد الاختيار من بين أساليب المصادقة ومقدمي الخدمات، وتجربة نماذج بيانات مختلفة باستخدام بيانات عامة وخاصة باستخدام قواعد أمان Firebase والمصادقة، أو إنشاء نماذج أولية لتصميمات واجهة المستخدم لتسجيل الدخول، والقدرة على أن يكون العمل محليًا دون نشر خدمات مباشرة قد يكون فكرة رائعة.

يُعد محاكي المصادقة جزءًا من مجموعة أدوات المحاكاة المحلية، التي لتطبيقك من التفاعل مع محتوى قواعد البيانات التي تمت محاكاتها وإعداداتها، بالإضافة إلى موارد المشروع التي تمت محاكاتها (الدوال وقواعد البيانات الأخرى وقواعد الأمان).

يتضمن استخدام محاكي المصادقة بضع خطوات فقط:

إضافة سطر من الرمز إلى إعدادات اختبار تطبيقك للاتصال بالمحاكي.
من جذر دليل المشروع المحلي، مع تشغيل firebase emulators:start.
استخدام واجهة مستخدم مجموعة أدوات المحاكاة المحلية لإنشاء النماذج الأولية التفاعلية، أو واجهة برمجة تطبيقات REST لمحاكي المصادقة للاختبار غير التفاعلي

يتوفّر دليل تفصيلي في ربط تطبيقك بمحاكي المصادقة. لمزيد من المعلومات، اطّلِع على مقدمة عن مجموعة أدوات المحاكاة المحلية.

لننتقل الآن إلى كيفية مصادقة المستخدمين.

تسجيل اشتراك مستخدمين جدد

إنشاء نموذج يسمح للمستخدمين الجدد بالتسجيل في تطبيقك باستخدام بريدهم الإلكتروني وعنوانك وكلمة مرور. إثبات صحة عنوان البريد الإلكتروني عندما يُكمل المستخدم النموذج العنوان وكلمة المرور اللذين قدمهما المستخدم، ثم تمريرهما إلى طريقة createUserWithEmailAndPassword:

Web

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });auth_signup_password.js

Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });email.js

تسجيل دخول المستخدمين الحاليين

إنشاء نموذج يسمح للمستخدمين الحاليين بتسجيل الدخول باستخدام عنوان بريدهم الإلكتروني وكلمة المرور. عندما يُكمل المستخدم النموذج، يمكنك طلب طريقة signInWithEmailAndPassword:

Web

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });auth_signin_password.js

Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });email.js

ضبط أداة مراقبة حالة المصادقة والحصول على بيانات المستخدمين

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

أرفق المراقب باستخدام طريقة onAuthStateChanged. عندما يختار المستخدم سجّل الدخول بنجاح، يمكنك الحصول على معلومات حول المستخدم في قسم المراقب.

Web

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});auth_state_listener.js

Web

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});index.js

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

التعرُّف على كيفية إتاحة موفِّري الهوية الآخرين والضيف المجهول الحسابات: