يمكنك استخدام مصادقة Firebase للسماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام طريقة واحدة أو أكثر من طرق تسجيل الدخول، بما في ذلك عنوان البريد الإلكتروني وتسجيل الدخول باستخدام كلمة المرور، وموفِّري الهوية الموحّدة مثل "تسجيل الدخول بحساب Google" وتسجيل الدخول إلى Facebook. يساعدك هذا البرنامج التعليمي في بدء استخدام مصادقة Firebase من خلال توضيح كيفية إضافة عنوان البريد الإلكتروني وتسجيل الدخول باستخدام كلمة المرور إلى تطبيقك.
إضافة حزمة تطوير البرامج للمصادقة وإعدادها
ثبِّت حزمة تطوير البرامج (SDK) لـ Firebase JS وابدأ في تهيئة Firebase، إذا لم يسبق لك إجراء ذلك.
إضافة حزمة SDK الخاصة بـ Firebase لمصادقة Firebase وإعداد مصادقة Firebase:
Web
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);
Web
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"
قبل الحديث عن كيفية مصادقة تطبيقك للمستخدمين، يُرجى تقديم مجموعة من الأدوات التي يمكنك استخدامها لإنشاء نموذج أوّلي واختبار وظائف المصادقة: مجموعة أدوات المحاكاة المحلية من Firebase. إذا كنت تختار من بين تقنيات المصادقة ومقدّمي الخدمات، يمكنك تجربة نماذج بيانات مختلفة مع بيانات عامة وخاصة باستخدام قواعد أمان Firebase والمصادقة، أو إنشاء نماذج أولية لتصميمات واجهة المستخدم لتسجيل الدخول، إذ إنّ القدرة على العمل محليًا بدون نشر الخدمات المباشرة قد تكون فكرة رائعة.
محاكي المصادقة هو جزء من مجموعة أدوات المحاكاة المحلية التي تمكّن تطبيقك من التفاعل مع محتوى قواعد البيانات التي تمت محاكاتها وتهيئتها، بالإضافة إلى موارد المشروع التي تمّت محاكاتها (الوظائف وقواعد البيانات الأخرى وقواعد الأمان).
يتضمن استخدام محاكي المصادقة بضع خطوات فقط:
- إضافة سطر من الرمز إلى إعدادات اختبار تطبيقك للاتصال بالمحاكي.
- من جذر دليل المشروع المحلي، مع تشغيل
firebase emulators:start
. - استخدام واجهة مستخدم مجموعة أدوات المحاكاة المحلية لإنشاء النماذج الأولية التفاعلية أو واجهة برمجة التطبيقات لمحاكي المصادقة REST للاختبار غير التفاعلي
يتوفّر دليل تفصيلي في ربط تطبيقك بمحاكي المصادقة. لمزيد من المعلومات، اطّلِع على مقدمة عن مجموعة أدوات المحاكاة المحلية.
لننتقل الآن إلى كيفية مصادقة المستخدمين.
تسجيل اشتراك مستخدمين جدد
يمكنك إنشاء نموذج يسمح للمستخدمين الجدد بالتسجيل في تطبيقك باستخدام عنوان بريدهم الإلكتروني وكلمة مرور. عندما يكمل المستخدم النموذج، تحقَّق من صحة عنوان البريد الإلكتروني
وكلمة المرور اللذين قدّمهما المستخدم، ثم مرِّرهما إلى
الطريقة createUserWithEmailAndPassword
:
Web
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; // .. });
Web
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
تسجيل دخول المستخدمين الحاليين
إنشاء نموذج يتيح للمستخدمين الحاليين تسجيل الدخول باستخدام عنوان البريد الإلكتروني
وكلمة المرور. عندما يُكمل المستخدم النموذج، يمكنك استدعاء
طريقة signInWithEmailAndPassword
:
Web
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; });
Web
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
ضبط أداة مراقبة حالة المصادقة والحصول على بيانات المستخدمين
بالنسبة إلى كل صفحة من صفحات تطبيقك التي تحتاج إلى معلومات عن المستخدم الذي سجّل الدخول، يمكنك إرفاق مراقَب بعنصر المصادقة العام. يتم استدعاء هذا المراقب كلما تغيرت حالة تسجيل دخول المستخدم.
أرفق المراقب باستخدام طريقة onAuthStateChanged
. عندما يسجِّل المستخدم دخوله بنجاح، يمكنك الحصول على معلومات حول المستخدم في قسم المراقب.
Web
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 // ... } });
Web
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 // ... } });
الخطوات اللاحقة
تعرَّف على كيفية إتاحة موفِّري الهوية الآخرين وحسابات الضيوف المجهولة الهوية:
- تسجيل الدخول باستخدام حساب Google
- تسجيل الدخول إلى Facebook
- تسجيل الدخول إلى Twitter
- تسجيل الدخول إلى GitHub
- تسجيل الدخول مع إخفاء الهوية