بدء مصادقة 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
    // ...
  }
});

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

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