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

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

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

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

2. أضِف حزمة تطوير البرامج (SDK) JavaScript لنظام التشغيل 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 لإنشاء نماذج أولية تفاعلية، أو Authentication لمحاكي REST API لأغراض الاختبارات غير التفاعلية.

يتوفّر دليل تفصيلي في مقالة ربط تطبيقك بمحاكي 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
• تسجيل الدخول إلى Twitter
• تسجيل الدخول إلى GitHub
• تسجيل الدخول مع إخفاء الهوية