Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiunta di 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 il giorno Febbraio 2020, REGION_ID.r è incluso in 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 progetto Google Cloud, configura l'autenticazione e poi 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 della 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 delle applicazioni 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
```

Aggiunta di 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.

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, associati al tuo progetto Google Cloud esistente.
Abilita i provider di accesso per l'autenticazione nel Console Firebase. Per questo nel servizio web, attiverai Email/Password e l'accesso a Google di altri fornitori:
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 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.
Affinché Firebase possa autenticarsi correttamente, il tuo dominio deve essere autorizzato per i reindirizzamenti OAuth. Per autorizzare il dominio:
1. Seleziona Crea > Autenticazione > Impostazioni.
2. In Domini autorizzati nella pagina Impostazioni, fai clic su Aggiungi dominio.
3. Inserisci il dominio dell'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.

Aggiunta di Firebase al tuo servizio web

Per aggiungere Firebase al tuo servizio web, copia il codice personalizzato del progetto Firebase snippet, JavaScript e CSS nel tuo servizio web:

Vai alla console Firebase e seleziona il tuo progetto.
Nella pagina Panoramica del progetto, sotto il testo Inizia aggiungendo Firebase alla tua app, seleziona Web. Se hai già aggiunto un'app a nel progetto, potresti non vedere questo testo; accedi alla sezione 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 della tua 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é 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 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>

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.

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 alla tua servizio, puoi aggiungere codice al servizio web per abilitarlo autenticare gli utenti.

Indietro

Gestione dei dati

Avanti

Autenticazione degli utenti