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

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

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

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

  2. إضافة حزمة 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 والمصادقة، أو إنشاء نماذج أولية لتصميمات واجهة المستخدم لتسجيل الدخول، إذ إنّ القدرة على العمل محليًا بدون نشر الخدمات المباشرة قد تكون فكرة رائعة.

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

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

  1. إضافة سطر من الرمز إلى إعدادات اختبار تطبيقك للاتصال بالمحاكي.
  2. من جذر دليل المشروع المحلي، مع تشغيل firebase emulators:start.
  3. استخدام واجهة مستخدم مجموعة أدوات المحاكاة المحلية لإنشاء النماذج الأولية التفاعلية أو واجهة برمجة التطبيقات لمحاكي المصادقة 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

الخطوات اللاحقة

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