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

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

قم بإضافة وتهيئة مصادقة 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/app";
import "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
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 للاختبار غير التفاعلي.

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

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

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

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

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

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

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

• جوجل تسجيل الدخول
• تسجيل الدخول الى الفيسبوك
• تسجيل الدخول إلى Twitter
• تسجيل الدخول على جيثب
• تسجيل دخول مجهول