Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

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

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

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

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

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

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

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

يتوفر دليل مفصل في Connect your app to Authentication emulator . لمزيد من المعلومات ، راجع مقدمة Local Emulator Suite .

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

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

أنشئ نموذجًا يسمح للمستخدمين الجدد بالتسجيل في تطبيقك باستخدام عنوان بريدهم الإلكتروني وكلمة المرور. عندما يكمل المستخدم النموذج ، تحقق من صحة عنوان البريد الإلكتروني وكلمة المرور createUserWithEmailAndPassword المستخدم ، ثم createUserWithEmailAndPassword طريقة 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
    // ...
  }
});

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

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