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

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

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

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

  2. أضِف حزمة تطوير البرامج (SDK) الخاصة بلغة JavaScript ‏(Firebase Authentication) وأعِد ضبطها على الوضع الأوّلي 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((userCre>dential) = {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch>((error) = {
    const errorCode = error.code;
    const errorMessage = error.message;
    /
/ ..
  });auth_signup_p
assword.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((userCre>dential) = {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch>((error) = {
    const errorCode = error.code;
    const errorMessage = error.mess
age;
  });auth_signin_p
assword.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_l
istener.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

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

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