Aggiungere Firebase al servizio web

ID regione

L'elemento REGION_ID è un codice abbreviato che Google assegna 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.

Aggiungi Firebase al tuo Google Cloud progetto, 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 fino a questo.

  • Se hai già un Google Cloud progetto, 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 l'esempio come file ZIP ed 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 tuo Google Cloud progetto

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

  1. Aggiungi Firebase al tuo progetto esistente Google Cloud 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 esistente Google Cloud .

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

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

    2. In Provider di accesso, seleziona Email/Password.

    3. Attiva il pulsante Attiva per utilizzare l'autenticazione tramite email e password e fai clic su Salva.

  3. Affinché Firebase esegua l'autenticazione correttamente, il tuo dominio deve essere autorizzato a eseguire il reindirizzamento OAuth. Per autorizzare il dominio:

    1. Seleziona Build > Autenticazione > Impostazioni.

    2. Nella sezione Domini autorizzati della 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 Google Cloud progetto.

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. Apri la console Firebase e seleziona il tuo progetto.

  2. Nella pagina di panoramica del progetto, sotto il testo Inizia aggiungendo Firebase alla tua app, seleziona web. Se hai già aggiunto un'app al progetto, potresti non visualizzare questo testo. In questo caso, vai alla pagina Panoramica del progetto > Impostazioni progetto > Generali dell'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 all'inizio del corpo, poiché l'unico contenuto in templates/index.html è un esempio di servizi Firebase. Nell'ambiente di produzione, ti consigliamo di aggiungere lo snippet di codice in fondo al corpo, ma prima di utilizzare qualsiasi servizio Firebase.

      Il codice personalizzato sarà simile a questo snippet fittizio:

      <!-- 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 il segnaposto TODO nello snippet sopra con il seguente tag di script per attivare il componente di autenticazione di Firebase:

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

      Questi indirizzi degli script sono documentati nella documentazione di Firebase UI for Web.

    4. Sostituisci il resto del corpo con il seguente codice, che utilizzerai più avanti in questa guida per visualizzare i dati degli utenti 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 Google Cloud progetto e al tuo servizio web, puoi aggiungere codice al servizio web per consentirgli di autenticare gli utenti.

Indietro
Gestione dei dati
Avanti
Autenticazione degli utenti