Google 致力于为黑人社区推动种族平等。查看具体举措。
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Aggiungi Firebase al tuo progetto JavaScript

Segui questa guida per utilizzare Firebase JavaScript SDK nella tua app web o come client per l'accesso dell'utente finale, ad esempio, in un'applicazione desktop o IoT Node.js.

Prerequisiti

  • Installa il tuo editor o IDE preferito.

  • Accedi a Firebase utilizzando il tuo account Google.

Se non disponi già di un progetto JavaScript e desideri solo provare un prodotto Firebase, puoi scaricare uno dei nostri esempi di avvio rapido .

Passaggio 1 : crea un progetto Firebase

Prima di poter aggiungere Firebase alla tua app JavaScript, devi creare un progetto Firebase per connetterti alla tua app.

Visita Comprendere i progetti Firebase per ulteriori informazioni sui progetti Firebase e sulle best practice per l'aggiunta di app ai progetti.

Passaggio 2 : registra la tua app con Firebase

Dopo aver creato un progetto Firebase, puoi aggiungervi la tua app web.

Visita Comprendere i progetti Firebase per saperne di più sulle best practice e considerazioni per l'aggiunta di app a un progetto Firebase.

  1. Al centro della pagina della panoramica del progetto della console Firebase , fai clic sull'icona Web ( ) per avviare il flusso di lavoro di configurazione.

    Se hai già aggiunto un'app al tuo progetto Firebase, fai clic su Aggiungi app per visualizzare le opzioni della piattaforma.

  2. Inserisci il nickname della tua app.
    Questo soprannome è un identificatore di convenienza interno ed è visibile solo a te nella console Firebase.

  3. (Facoltativo) Configura Firebase Hosting per la tua app web.

    • Puoi configurare Firebase Hosting ora o successivamente . Puoi anche collegare la tua app Web Firebase a un sito di hosting in qualsiasi momento nelle impostazioni del progetto .

    • Se scegli di configurare l'hosting adesso, seleziona un sito dall'elenco a discesa da collegare alla tua app Web Firebase.

      • Questo elenco mostra il sito di hosting predefinito del tuo progetto e tutti gli altri siti che hai impostato nel tuo progetto.

      • Qualsiasi sito che hai già collegato a un'app Web Firebase non è disponibile per ulteriori collegamenti. Ogni sito di hosting può essere collegato solo a una singola app Web Firebase.

  4. Fare clic su Registra app .

Passaggio 3 : aggiungi gli SDK Firebase e inizializza Firebase

Puoi aggiungere qualsiasi prodotto Firebase supportato alla tua app.

Il modo in cui aggiungi gli SDK Firebase alla tua app dipende se hai scelto di utilizzare Firebase Hosting per la tua app, quale strumento stai utilizzando con la tua app (come un bundler) o se stai configurando un'app Node.js.

Da Hosting URL

Quando utilizzi Firebase Hosting, puoi configurare la tua app per caricare dinamicamente le librerie Firebase JavaScript SDK da URL riservati. Ulteriori informazioni sull'aggiunta di SDK tramite URL di hosting riservati .

Con questa opzione di configurazione, dopo la distribuzione su Firebase , la tua app estrae automaticamente l'oggetto di configurazione Firebase dal progetto Firebase in cui hai distribuito. Puoi distribuire la stessa base di codice a più progetti Firebase, ma non devi tenere traccia della configurazione Firebase che stai utilizzando per firebase.initializeApp() .

Questa opzione di configurazione funziona anche per testare la tua app web in locale .

  1. Per includere solo prodotti Firebase specifici (ad esempio, Analytics, Authentication o Cloud Firestore), aggiungi i seguenti script in fondo al tag <body> , ma prima di utilizzare qualsiasi servizio Firebase:

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.2.3/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.2.3/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.2.3/firebase-auth.js"></script>
  <script src="/__/firebase/8.2.3/firebase-firestore.js"></script>
</body>


  2. Inizializza Firebase nella tua app (non è necessario includere l'oggetto di configurazione Firebase quando utilizzi URL di hosting riservati):

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

Dal CDN

Puoi configurare l'importazione parziale dell'SDK Firebase JavaScript e caricare solo i prodotti Firebase di cui hai bisogno. Firebase archivia ciascuna libreria dell'SDK JavaScript Firebase sulla nostra CDN (rete di distribuzione dei contenuti) globale.

  1. Per includere solo prodotti Firebase specifici (ad esempio, Autenticazione e Cloud Firestore), aggiungi i seguenti script in fondo al tag <body> , ma prima di utilizzare qualsiasi servizio Firebase:

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-firestore.js"></script>
</body>


  2. Inizializza Firebase nella tua app:

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

Utilizzo di bundle di moduli

Puoi configurare l'importazione parziale dell'SDK Firebase JavaScript e caricare solo i prodotti Firebase di cui hai bisogno. Se stai utilizzando un bundler (come Browserify o webpack), puoi import singoli prodotti Firebase quando ne hai bisogno.

  1. Installa Firebase JavaScript SDK:

    1. Se non hai già un file package.json , creane uno eseguendo il seguente comando dalla radice del tuo progetto JavaScript:

      npm init

    2. Installa il pacchetto firebase npm e salvalo nel tuo file package.json eseguendo:

      npm install --save firebase

  2. Per includere solo prodotti Firebase specifici (come Authentication e Cloud Firestore), import moduli Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Inizializza Firebase nella tua app:

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

App Node.js.

  1. Installa Firebase JavaScript SDK:

    1. Se non hai già un file package.json , creane uno eseguendo il seguente comando dalla radice del tuo progetto JavaScript:

      npm init

    2. Installa il pacchetto firebase npm e salvalo nel tuo file package.json eseguendo:

      npm install --save firebase

  2. Utilizza una delle seguenti opzioni per utilizzare il modulo Firebase nella tua app:

    • Puoi require moduli da qualsiasi file JavaScript

      Per includere solo prodotti Firebase specifici (come Autenticazione e Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");


    • È possibile utilizzare ES2015 per import moduli

      Per includere solo prodotti Firebase specifici (come Autenticazione e Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Inizializza Firebase nella tua app:

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Informazioni sull'oggetto di configurazione Firebase

Per inizializzare Firebase nella tua app, devi fornire la configurazione del progetto Firebase della tua app. Puoi ottenere il tuo oggetto di configurazione Firebase in qualsiasi momento.

  • Se utilizzi URL di hosting riservati , la configurazione di Firebase viene automaticamente estratta dal tuo progetto Firebase, quindi non è necessario fornire esplicitamente l'oggetto di configurazione nel codice.

  • Si sconsiglia di modificare manualmente l'oggetto di configurazione, in particolare le seguenti "opzioni Firebase" apiKey : apiKey , projectId e appID . Se inizializzi la tua app con valori non validi o mancanti per queste "opzioni Firebase" obbligatorie, gli utenti della tua app potrebbero riscontrare seri problemi.

  • Se hai abilitato Google Analytics nel tuo progetto Firebase, il tuo oggetto di configurazione contiene il campo measurementId . Ulteriori informazioni su questo campo nella pagina iniziale di Analytics .

Ecco il formato di un oggetto di configurazione con tutti i servizi abilitati (questi valori vengono popolati automaticamente):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Ecco un oggetto di configurazione con valori di esempio :

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Passaggio 4 : (facoltativo) installa la CLI e distribuisci su Firebase Hosting

Se hai collegato la tua app Web Firebase a un sito di hosting Firebase, puoi distribuire il contenuto e la configurazione del tuo sito ora (durante la configurazione dell'app web) o in qualsiasi momento successivamente.

Per eseguire il deployment su Firebase, utilizzerai la Firebase CLI, uno strumento da riga di comando.

  1. Visita la documentazione della CLI di Firebase per scoprire come installare la CLI o aggiornarla alla versione più recente .

  2. Inizializza il tuo progetto Firebase. Esegui il seguente comando dalla radice della directory dell'app locale:

    firebase init

  3. Distribuisci i tuoi contenuti e la configurazione di hosting su Firebase Hosting.

    Sito di hosting predefinito

    Per impostazione predefinita, ogni progetto Firebase ha sottodomini gratuiti sui domini web.app e firebaseapp.com ( project-id .web.app e project-id .firebaseapp.com ).

    1. Distribuisci sul tuo sito. Esegui il seguente comando dalla directory principale della tua app:

      firebase deploy

    2. Visualizza il tuo sito in uno dei tuoi siti predefiniti:

      • project-id .web.app
      • project-id .firebaseapp.com

    Sito di hosting non predefinito

    I progetti Firebase supportano più siti (questi sono considerati i tuoi siti non predefiniti ). Puoi aggiungere altri siti al tuo progetto durante il flusso di lavoro di configurazione dell'app Web della console o dalla pagina Hosting della console.

    1. Aggiungi il tuo sito al tuo file firebase.json (che è stato creato durante firebase init ).

      Tieni presente che questa configurazione firebase.json presuppone che tu abbia repository separati per ciascuno dei tuoi siti.

      {
  "hosting": {
    "site": "site-name>",
    "public": "public",

    // ...
  }
}

    2. Distribuisci sul tuo sito. Esegui il seguente comando dalla directory principale della tua app:

      firebase deploy --only hosting:site-name

    3. Visualizza il tuo sito in:

      • site-name .web.app
      • site-name .firebaseapp.com

Passaggio 5 : accedi a Firebase nella tua app

Firebase JavaScript SDK supporta i seguenti prodotti Firebase. Ogni prodotto è facoltativo ed è possibile accedervi dallo spazio firebase nomi firebase .

Scopri i metodi disponibili nella documentazione di riferimento di Firebase JavaScript .

Prodotto Firebase Spazio dei nomi ragnatela Node.js
Analytics firebase.analytics()
Autenticazione firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions per Firebase Client SDK firebase.functions()
Messaggistica cloud firebase.messaging()
Cloud Storage firebase.storage()
Monitoraggio delle prestazioni (versione beta ) firebase.performance()
Database in tempo reale firebase.database()
Remote Config (versione beta ) firebase.remoteConfig()

Librerie disponibili

Opzioni di configurazione aggiuntive

Ritarda il caricamento degli SDK Firebase (da CDN)

Puoi ritardare l'inclusione degli SDK Firebase fino al caricamento dell'intera pagina.

  1. Aggiungi un flag di defer a ogni tag di script per gli SDK Firebase, quindi rimanda l'inizializzazione di Firebase utilizzando un secondo script, ad esempio:

    <script defer src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.2.3/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Crea un file init-firebase.js , quindi includi quanto segue nel file:

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Usa più progetti Firebase in una singola app

Nella maggior parte dei casi, devi solo inizializzare Firebase in un'unica app predefinita. Puoi accedere a Firebase da quell'app in due modi equivalenti:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

A volte, tuttavia, è necessario accedere a più progetti Firebase contemporaneamente. Ad esempio, potresti voler leggere i dati dal database di un progetto Firebase ma archiviare i file in un progetto Firebase diverso. Oppure potresti voler autenticare un progetto mantenendo un secondo progetto non autenticato.

Firebase JavaScript SDK ti consente di inizializzare e utilizzare più progetti Firebase in una singola app contemporaneamente, con ogni progetto che utilizza le proprie informazioni di configurazione Firebase.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Esegui un server web locale per lo sviluppo

Se stai creando un'app Web, alcune parti dell'SDK JavaScript di Firebase richiedono che la tua app Web venga fornita da un server anziché dal file system locale. Puoi utilizzare la Firebase CLI per eseguire un server locale.

Se hai già configurato Firebase Hosting per la tua app, potresti aver già completato molti dei passaggi seguenti.

Per servire la tua app web, utilizzerai la Firebase CLI, uno strumento da riga di comando.

  1. Visita la documentazione della CLI di Firebase per scoprire come installare la CLI o aggiornarla alla versione più recente .

  2. Inizializza il tuo progetto Firebase. Esegui il seguente comando dalla radice della directory dell'app locale:

    firebase init

  3. Avvia il server locale per lo sviluppo. Esegui il seguente comando dalla radice della directory dell'app locale:

    firebase serve

Prossimi passi

Informazioni su Firebase:

Aggiungi i servizi Firebase alla tua app: