دمج حِزم تطوير البرامج (SDK) لمنصّة Firebase مع تطبيقك على الويب

Firebase App Hosting مناسب تمامًا لتطبيقات الويب الديناميكية التي تم إنشاؤها باستخدام Firebase JavaScript SDK وFirebase Admin SDK لنظام Node.js. في تطبيق ويب كامل الميزات ، تؤدي حِزم Firebase SDK، مثل Authentication وCloud Firestore وApp Check ، أدوارًا مهمة. يصف هذا الدليل بعض الاستراتيجيات الرئيسية التي تساعد في تحسين حِزم Firebase SDK وبدء إنشاء Firebase في تطبيق الويب على Firebase App Hosting.

الإعداد التلقائي لـ Firebase Admin SDK وحِزم SDK للويب

توفر بيئات Google، مثل Firebase App Hosting، إعدادًا مبسطًا للتطبيق من خلال استدعاء المنشئ بدون وسيطات في مدّة التصميم ووقت التشغيل. هذه ميزة في كلٍّ من Firebase Admin SDK لنظام Node.js، وهي حزمة SDK من جهة الخادم تتيح مساحة كبيرة من وظائف Firebase ويمكن أن تكون مفيدة جدًا في تطبيق الويب، وحزمة Firebase JavaScript SDK.

باستخدام initializeApp()، يمكنك السماح لـ Firebase App Hosting بملء إعدادات تطبيق الويب تلقائيًا لك مع الاحتفاظ بخيار التحكّم الدقيق في قيم معيّنة إذا أردت إلغاء القيم التلقائية.

الإعداد بدون وسيطات

لإعداد إما Firebase Admin SDK أو Firebase JavaScript SDK باستخدام قيم الإعدادات التلقائية ، استخدِم initializeApp() بدون تقديم أي وسيطات.

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

بالنسبة إلى Admin SDK، تعمل إستراتيجية الإعداد هذه في App Hosting بالإضافة إلى بيئات خادم Google الأخرى، بما في ذلك Cloud Run، App Engine، ووظائف Cloud Run.

JavaScript SDK

import { initializeApp } from 'firebase/app';
const app = initializeApp();

بالنسبة إلى حزمة JavaScript SDK، تعمل إستراتيجية الإعداد هذه في App Hosting.

إلغاء القيم التي يتم ملؤها تلقائيًا

يمكنك إلغاء الإعدادات التلقائية التي يتم إدخالها تلقائيًا. يُرجى العِلم أنّ هذه الخيارات تختلف بين Admin SDK وحزمة JavaScript SDK.

إلغاء Admin SDK

لتحديد خيارات الإعداد المخصّصة للخدمات، مثل قاعدة بيانات الوقت الفعلي أو Cloud Storage أو Cloud Functions، بشكل اختياري، استخدِم متغيّر البيئة FIREBASE_CONFIG. إذا بدأ محتوى المتغيّر FIREBASE_CONFIG بالحرف {، سيتم تحليله ككائن JSON. بخلاف ذلك، تفترض حزمة SDK أنّ السلسلة هي مسار ملف JSON يحتوي على الخيارات.

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

إلغاء حزمة JavaScript SDK

لإلغاء القيم التلقائية لـ FIREBASE_WEBAPP_CONFIG التي تُدخلها App Hosting لإعداد حزمة JavaScript SDK، يمكنك تحديد القيم في apphosting.yaml:

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

استخدام الإعداد التلقائي في بيئات أخرى

يتم إعداد الإعداد التلقائي باستخدام نص برمجي npm postinstall script عند تثبيت حزمة Firebase JavaScript SDK. يبحث النص البرمجي postinstall عن متغيّر البيئة FIREBASE_WEBAPP_CONFIG، الذي يتم ضبطه تلقائيًا في بيئة إصدار App Hosting Cloud.

إذا كنت تثبّت حزمة JS SDK خارج Cloud Build، عليك ضبط متغيّر البيئة هذا بنفسك عند تثبيت حزمة Firebase JavaScript SDK.

لإعداد البيئة يدويًا عند التثبيت، اتّبِع الخطوات التالية:

  1. انسخ كائن إعداد تطبيق الويب من Firebase من وحدة التحكّم Firebase.

  2. من إحدى الوحدات الطرفية، اضبط متغيّر البيئة FIREBASE_WEBAPP_CONFIG قبل تشغيل الأمر npm install.

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

في أي وقت تغيّر فيه مشروع Firebase أو تطبيق الويب، أعِد تشغيل هذا الأمر. قد تحتاج أيضًا إلى محو ذاكرات التخزين المؤقتة الوسيطة (مثل .next/cache).

استخدِم FirebaseServerApp للعرض من جهة الخادم

إذا كنت قد استخدمت حزمة Firebase JS SDK أو حِزم Firebase SDK الأخرى من جهة العميل في تطوير تطبيق الويب، من المحتمل أنّك على دراية بواجهة FirebaseApp وكيفية استخدامها لإعداد مثيلات التطبيق. لتسهيل إجراء عمليات مماثلة من جهة الخادم، توفّر Firebase واجهة FirebaseServerApp.

FirebaseServerApp هي صيغة من FirebaseApp تُستخدم في بيئات العرض من جهة الخادم (SSR). تتضمّن أدوات لمتابعة جلسات Firebase التي تمتد على نطاق العرض من جهة العميل (CSR) والعرض من جهة الخادم.

استخدِم FirebaseServerApp من أجل:

  • تنفيذ الرمز من جهة الخادم ضمن سياق المستخدم، على عكس Firebase Admin SDK التي لديها حقوق إدارية كاملة.
  • تفعيل استخدام App Check في بيئات العرض من جهة الخادم.
  • متابعة جلسة Firebase Auth التي تم إنشاؤها في العميل.

للحصول على تفاصيل كاملة حول استخدام FirebaseServerApp لهذه الأغراض، يُرجى الاطّلاع على مقالة استخدام Firebase في تطبيقات الويب الديناميكية مع العرض من جهة الخادم.

تفعيل App Check في تطبيق الويب

يمكنك استخدام App Check لتعزيز أمان تطبيق الويب الديناميكي على App Hosting. من خلال تنفيذ بعض الاستراتيجيات المحدّدة من جهة الخادم الموضّحة في مقالة استخدام Firebase في تطبيقات الويب الديناميكية مع العرض من جهة الخادم، يمكنك حماية أنظمة App Hosting الخلفية من إساءة الاستخدام.