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

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

إضافة حزمة تطوير البرامج (SDK) لنظام التشغيل Authentication وإعدادها

  1. ثبِّت حزمة تطوير البرامج (SDK) لـ Firebase JS وفعِّل Firebase، إذا لم يسبق لك إجراء ذلك.

  2. أضِف حزمة تطوير البرامج (SDK) لـ Firebase Authentication JS وفعِّل 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 لإنشاء النماذج التفاعلية أو واجهة برمجة التطبيقات Authenticationemualtor REST API للاختبار غير التفاعلي

يتوفّر دليل تفصيلي في مقالة ربط تطبيقك بمحاكي 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;
    // ..
  });
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

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

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