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

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

إضافة حزمة تطوير البرامج (SDK) الخاصة بميزة Authentication وتهيئتها

  1. إذا لم يسبق لك ذلك، ثبِّت حزمة Firebase JS SDK وهيِّئ Firebase.

  2. أضِف حزمة Firebase Authentication JS SDK و هيِّئ Firebase Authentication:

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 Local Emulator Suite

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

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

لا يتطلّب استخدام المحاكي Authentication سوى بضع خطوات:

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

يتوفّر دليل مفصّل في مقالة ربط تطبيقك بالمحاكي Authentication. لمزيد من المعلومات، يُرجى الاطّلاع على مقدّمة Local Emulator Suite.

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

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

أنشئ نموذجًا يتيح للمستخدمين الجدد التسجيل في تطبيقك باستخدام عنوان بريدهم الإلكتروني وكلمة مرور. عندما يملأ المستخدم النموذج، تحقَّق من صحة عنوان البريد الإلكتروني وكلمة المرور اللذين قدّمهما المستخدم، ثم مرِّرهما إلى طريقة 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;
    // ..
  });

Web

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

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

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

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

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

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

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