بدء مصادقة 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((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

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

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