Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere Firebase al servizio web

ID regione

Il REGION_ID è un codice abbreviato che Google assegna in base alla regione selezionata durante la creazione dell'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 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 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 Crea un'app Python 3 e completa tutti i passaggi precedenti.
Se hai già un progetto, puoi continuare scaricando una copia del servizio web:Google Cloud
1. Scarica il repository dell'applicazione di esempio utilizzando Git:
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  In alternativa, puoi scaricare il campione 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
```

Aggiungi Firebase al tuo 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, non associato al tuo progetto Google Cloud esistente.
Attiva i provider di accesso per l'autenticazione nella console Firebase. Per questo servizio web, devi attivare i provider di accesso Email/Password e Google:
1. Fai clic su Build (Crea) > Authentication (Autenticazione) > Sign-in method (Metodo di accesso).
2. Nella sezione Provider di accesso, seleziona Email/Password.
3. Attiva il pulsante Attiva per utilizzare l'autenticazione tramite email e password e fai clic su Salva.
  
  Suggerimento: per ulteriori informazioni sull'attivazione di altri provider, consulta le sezioni "Prima di iniziare" delle guide di Google, Facebook, Twitter e GitHub su Firebase.
Affinché Firebase esegua l'autenticazione correttamente, il tuo dominio deve essere autorizzato per i reindirizzamenti OAuth. Per autorizzare il dominio:
1. Seleziona Build (Crea) > Authentication (Autenticazione) > Settings (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 progettoGoogle Cloud .

Aggiungi Firebase al tuo 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 tuo servizio web:

Vai alla console Firebase e seleziona il tuo progetto.
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 > Generale della tua 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 le seguenti operazioni:

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 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 di esempio:

<!-- 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 il 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 di script sono documentati nella documentazione dell'UI 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 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 progetto Google Cloud e al tuo servizio web, puoi aggiungere codice al tuo servizio web per consentirgli di autenticare gli utenti.

Indietro

Gestione dei dati

Avanti

Autenticazione degli utenti