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

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

اربط تطبيقك بـ Firebase

تثبيت SDK Firebase . تأكد من لصق رمز التكوين في صفحة الويب الخاصة بك كما هو موضح.

(اختياري) النموذج الأولي والاختبار باستخدام Firebase Local Emulator Suite

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

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

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

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

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

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

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

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

الويب v8

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

الويب الإصدار 9

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

تسجيل دخول المستخدمين الحاليين

أنشئ نموذجًا يسمح للمستخدمين الحاليين بتسجيل الدخول باستخدام عنوان بريدهم الإلكتروني وكلمة المرور. عندما يقوم مستخدم بإكمال النموذج، استدعاء signInWithEmailAndPassword الأسلوب:

الويب v8

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

الويب الإصدار 9

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

قم بتعيين مراقب حالة المصادقة واحصل على بيانات المستخدم

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

إرفاق المراقب باستخدام onAuthStateChanged الأسلوب. عندما يقوم المستخدم بتسجيل الدخول بنجاح ، يمكنك الحصول على معلومات حول المستخدم في المراقب.

الويب v8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

الويب الإصدار 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

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

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