Aggiunta di Firebase al servizio web

ID regione

REGION_ID è un codice abbreviato assegnato da Google in base alla regione selezionata al momento della creazione dell'app. Non corrisponde a un paese o a una provincia, anche se alcuni ID regione possono apparire simili ai codici di paese e provincia 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 progetto Google Cloud, configura le impostazioni di autenticazione e aggiungi Firebase al 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 Creazione di un'app Python 3 e completa tutti i passaggi precedenti.
Se hai già un progetto Google Cloud, puoi continuare scaricando una copia del servizio web:
1. Scarica il repository di applicazioni 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
```

Aggiunta di Firebase al progetto Google Cloud

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

Aggiungi Firebase al tuo progetto Google Cloud esistente utilizzando lo strumento Aggiungi progetto nella console di Firebase.

Puoi anche scegliere di utilizzare un account Firebase con un nome diverso, non associato al tuo progetto Google Cloud esistente.
Abilita i provider per l'accesso all'autenticazione nella Console di Firebase. Per questo servizio web, vengono attivati i provider di accesso Email/Password e Google:
1. Fai clic su Crea > Autenticazione > Metodo di accesso.
2. Nella sezione Provider di accesso, passa il cursore sopra il provider Email/Password e fai clic sull'icona a forma di matita.
3. Attiva il pulsante Attiva per utilizzare l'autenticazione email/password.
4. Dopo aver abilitato il provider, fai clic su Salva.
5. Ripeti l'operazione per il fornitore di servizi di accesso Google.
  
  Suggerimento: per ulteriori informazioni sull'abilitazione di altri provider, consulta le sezioni "Prima di iniziare" delle guide di Facebook, Twitter e GitHub su Firebase.
Affinché Firebase possa eseguire l'autenticazione correttamente, il tuo dominio deve essere autorizzato a eseguire i reindirizzamenti OAuth. Per autorizzare il dominio:
1. Seleziona Build > Authentication > Settings (Impostazioni).
2. In Domini autorizzati nella pagina Impostazioni, fai clic su Aggiungi dominio.
3. Inserisci il dominio della tua app in App Engine, escluso il prefisso http://:
  
  PROJECT_ID. REGION_ID.r.appspot.com dove PROJECT_ID è l'ID del tuo progetto Google Cloud.

Aggiunta di Firebase al servizio web

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

Vai alla console di Firebase e seleziona il tuo progetto.
Nella pagina della 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. Vai alla pagina Panoramica del progetto > Impostazioni progetto > Generali dell'app esistente, scorri verso il basso e seleziona Aggiungi app.
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 dell'app Firebase.

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

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" />

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

Per questo tutorial, puoi aggiungere il codice nella parte superiore del corpo, poiché l'unico contenuto in templates/index.html è un esempio dei servizi Firebase. Nel tuo ambiente di produzione, consigliamo di aggiungere lo snippet di codice in fondo al corpo, ma prima di utilizzare i servizi 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>

Sostituisci l'istruzione TODO nello snippet precedente con il seguente tag di script per attivare il componente Authentication di Firebase:
```
 <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
 
```
Questi indirizzi di script sono documentati nella documentazione relativa all'interfaccia utente di Firebase per il web.

Sostituisci il resto del corpo con il codice seguente, 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 progetto Google Cloud e al servizio web, puoi aggiungere codice al servizio web per abilitare il codice per l'autenticazione degli utenti.

Indietro

Gestione dei dati

Avanti

Autenticazione degli utenti