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

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

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

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

2. أضِف حزمة تطوير البرامج (SDK) لـ JS في Firebase Authentication وابدأ Firebase Authentication:

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);

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:

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

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:

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

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. عندما يسجّل المستخدم الدخول بنجاح، يمكنك الحصول على معلومات عنه في المراقب.

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

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

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

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

• تسجيل الدخول باستخدام حساب Google
• Facebook Login
• تسجيل الدخول باستخدام Twitter
• تسجيل الدخول إلى GitHub
• تسجيل الدخول مع إخفاء الهوية