ابدأ باستخدام مصادقة Firebase على مواقع الويب

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

إضافة وتهيئة SDK للمصادقة

  1. إذا لم تكن قد قمت بذلك بالفعل، فقم بتثبيت Firebase JS SDK وقم بتهيئة Firebase .

  2. أضف Firebase Authentication JS SDK وقم بتهيئة مصادقة Firebase:

واجهة برمجة تطبيقات الويب المعيارية

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

قبل الحديث عن كيفية مصادقة تطبيقك للمستخدمين، دعنا نقدم مجموعة من الأدوات التي يمكنك استخدامها لإنشاء نموذج أولي واختبار وظيفة المصادقة: Firebase Local Emulator Suite. إذا كنت تختار بين تقنيات وموفري المصادقة، أو تجربة نماذج بيانات مختلفة مع البيانات العامة والخاصة باستخدام قواعد المصادقة وأمان Firebase، أو إنشاء نماذج أولية لتصميمات واجهة المستخدم لتسجيل الدخول، فقد تكون القدرة على العمل محليًا دون نشر الخدمات المباشرة فكرة رائعة .

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

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

  1. إضافة سطر من التعليمات البرمجية إلى التكوين التجريبي لتطبيقك للاتصال بالمحاكي.
  2. من جذر دليل مشروعك المحلي، قم بتشغيل firebase emulators:start .
  3. استخدام Local Emulator Suite UI للنماذج الأولية التفاعلية، أو REST API لمحاكي المصادقة للاختبارات غير التفاعلية.

يتوفر دليل تفصيلي على توصيل تطبيقك بمحاكي المصادقة . لمزيد من المعلومات، راجع مقدمة Local Emulator Suite .

لنتابع الآن كيفية مصادقة المستخدمين.

تسجيل مستخدمين جدد

قم بإنشاء نموذج يسمح للمستخدمين الجدد بالتسجيل في تطبيقك باستخدام عنوان بريدهم الإلكتروني وكلمة المرور. عندما يكمل المستخدم النموذج، تحقق من صحة عنوان البريد الإلكتروني وكلمة المرور اللذين قدمهما المستخدم، ثم قم بتمريرهما إلى الأسلوب createUserWithEmailAndPassword :

Web modular API

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 namespaced API

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 modular API

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 namespaced API

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 modular API

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 namespaced API

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

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

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