Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

ابدأ باستخدام مصادقة Firebase على مواقع الويب

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

قم بإضافة وتهيئة المصادقة SDK

  1. إذا لم تكن قد قمت بذلك بالفعل ، فثبّت Firebase JS SDK وقم بتهيئة Firebase .

  2. أضف Firebase Authentication JS SDK وقم بتهيئة مصادقة Firebase:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

(اختياري) النموذج الأولي والاختبار باستخدام Firebase Local Emulator Suite

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

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

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

  1. إضافة سطر من التعليمات البرمجية إلى التكوين التجريبي لتطبيقك للاتصال بالمحاكي.
  2. من جذر دليل المشروع المحلي ، قم بتشغيل firebase emulators:start .
  3. استخدام Local Emulator Suite UI للنماذج الأولية التفاعلية ، أو محاكي المصادقة REST API للاختبار غير التفاعلي.

يتوفر دليل مفصل في Connect your app to Authentication emulator . لمزيد من المعلومات ، راجع مقدمة Local Emulator Suite .

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

تسجيل مستخدمين جدد

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

Web version 9

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

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

Web version 8

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

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

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

Web version 9

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

Web version 8

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

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

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

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

Web version 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web version 8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

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

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