Aggiungere Firebase al servizio web

ID regione

REGION_ID è un codice abbreviato assegnato da Google in base alla regione selezionata quando crei l'app. Il codice non corrisponde a un paese o a una provincia, anche se alcuni ID regione possono sembrare simili ai codici di paesi e province di uso comune. Per le app create dopo febbraio 2020, REGION_ID.r è incluso negli URL di App Engine. Per le app esistenti create prima di questa data, l'ID regione è facoltativo nell'URL.

Scopri di più sugli ID regione.

Ok

Nota: se stai eseguendo il deployment di un nuovo servizio web Python su Google Cloud, consigliamo di iniziare con Cloud Run.

Aggiungi Firebase al tuo progetto Google Cloud, configura le impostazioni di autenticazione e poi aggiungi Firebase al tuo servizio web.

L'aggiunta di Firebase al tuo servizio web ti consente di autenticare gli utenti in modo da offrire a ciascuno un'esperienza personalizzata.

Prima di iniziare

Se hai completato tutti i passaggi precedenti di questa guida, salta questa sezione. In caso contrario, completa una delle seguenti operazioni:

• Inizia da Creare un'app Python 3 e completa tutti i passaggi precedenti a questo.

• Se hai già un progetto Google Cloud, puoi continuare scaricando una copia del servizio web:

  1. Scarica il repository dell'applicazione di esempio utilizzando Git:

     git clone https://github.com/GoogleCloudPlatform/python-docs-samples
     

     In alternativa, puoi scaricare il sample come file ZIP e poi estrarlo.

  2. Vai alla directory che contiene una copia dei file del passaggio precedente:

     cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1
     

Aggiungere Firebase al progetto Google Cloud

Per utilizzare l'autenticazione Firebase con il tuo servizio web, aggiungi Firebase al tuo progetto Google Cloud e configura le impostazioni di autenticazione.

1. Aggiungi Firebase al tuo progetto Google Cloud esistente utilizzando lo strumento Aggiungi progetto nella Console Firebase.

   Puoi anche scegliere di utilizzare un account Firebase con un nome diverso, non associato al tuo progetto Google Cloud esistente.

2. Attiva i provider di accesso per l'autenticazione nella Console Firebase. Per questo servizio web, dovrai attivare i fornitori di accesso Email/Password e Google:

   1. Fai clic su Build > Autenticazione > Metodo di accesso.

   2. In Provider di accesso, passa il cursore sopra il provider Email/password e fai clic sull'icona a forma di matita.

      

   3. Attiva/disattiva il pulsante Attiva per utilizzare l'autenticazione Email/password.

      

   4. Dopo aver attivato il provider, fai clic su Salva.

   5. Fai lo stesso per il provider di accesso Google.

      Suggerimento: per ulteriori informazioni sull'attivazione di altri provider, consulta le sezioni "Prima di iniziare" delle guide su Facebook, Twitter e GitHub su Firebase.

3. Affinché Firebase possa autenticarsi correttamente, il tuo dominio deve essere autorizzato per i reindirizzamenti OAuth. Per autorizzare il dominio:

   1. Seleziona Build > Autenticazione > Impostazioni.

   2. In Domini autorizzati nella pagina Impostazioni, fai clic su Aggiungi dominio.

   3. Inserisci il dominio della tua app su App Engine, escluso il prefisso http://:

      PROJECT_ID. REGION_ID.r.appspot.com dove PROJECT_ID è l'ID del tuo progetto Google Cloud.

Aggiungere Firebase al servizio web

Per aggiungere Firebase al tuo servizio web, copia lo snippet di codice personalizzato, i file JavaScript e CSS del tuo progetto Firebase nel servizio web:

1. Vai alla console Firebase e seleziona il tuo progetto.

2. Nella pagina Panoramica del progetto, sotto il testo Inizia aggiungendo Firebase alla tua app, seleziona web. Se hai già aggiunto un'app al progetto, potresti non vedere questo testo. In questo caso, vai a Panoramica del progetto > Impostazioni progetto > Generale della tua app esistente, scorri verso il basso e seleziona Aggiungi app.

3. Una volta registrata l'app, verrà visualizzato uno snippet di codice personalizzato. Copia i contenuti dello snippet. Per visualizzare di nuovo questo snippet di codice in un secondo momento, vai alla pagina Impostazioni progetto della tua app Firebase.

4. Aggiorna il file templates/index.html completando i seguenti passaggi:

   1. Aggiungi le seguenti righe al tag <head>:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

   2. Aggiungi lo snippet di codice personalizzato al tag <body>.

      Per questo tutorial, puoi aggiungere il codice nella parte superiore del corpo, poiché gli unici contenuti in templates/index.html sono un esempio di servizi Firebase. Nell'ambiente di produzione, ti consigliamo di aggiungere lo snippet di codice alla fine del corpo, ma prima di utilizzare qualsiasi servizio Firebase.

      Il codice personalizzato sarà simile a questo snippet simulato:

      <!-- MOCK SNIPPET: DO NOT COPY -->
      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
      
      <!-- TODO: Add SDKs for Firebase products that you want to use
           https://firebase.google.com/docs/web/setup#available-libraries -->
      
      <script>
        var config = {
          apiKey: "<API_KEY>",
          authDomain: "<PROJECT_ID>.firebaseapp.com",
          databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
          projectId: "<PROJECT_ID>",
          storageBucket: "<BUCKET>.appspot.com",
          messagingSenderId: "<SENDER_ID>",
        };
        firebase.initializeApp(config);
      </script>
      

   3. Sostituisci TODO nello snippet precedente con il seguente tag script per attivare il componente Authentication di Firebase:

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

      Questi indirizzi script sono documentati nella documentazione dell'interfaccia utente di Firebase per il web.

   4. Sostituisci il resto del corpo con il seguente codice, che utilizzerai più avanti in questa guida per visualizzare i dati utente autenticati:

      <div id="firebaseui-auth-container"></div>
      
      <button id="sign-out" hidden=true>Sign Out</button>
      
      <div id="login-info" hidden=true>
        <h2>Login info:</h2>
        {% if user_data %}
          <dl>
            <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
            <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
            <dt>Last 10 visits</dt><dd>
      	{% for time in times %}
                <p>{{ time['timestamp'] }}</p>
              {% endfor %} </dd>
          </dl>
        {% elif error_message %}
          <p>Error: {{ error_message }}</p>
        {% endif %}
      </div>

Passaggi successivi

Ora che hai aggiunto Firebase al tuo progetto Google Cloud e al tuo servizio web, puoi aggiungere codice al servizio web per consentirgli di autenticare gli utenti.