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 al momento della creazione dell'app. Il codice non corrispondono a un paese o a una provincia, anche se potrebbero essere visualizzati alcuni ID regione in modo simile ai codici 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 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 per poter offrire a ogni utente 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 dalla sezione Creazione di un'app Python 3 e completare tutti i passaggi per arrivare 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 l'anteprima come file ZIP ed estrarlo.
2. Vai alla directory che contiene una copia dei file dal 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 il metodo Aggiungi lo strumento di progetto nella console di Firebase.

Puoi anche scegliere di utilizzare un account Firebase con un nome diverso, non 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 Crea > 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 abilitato il provider, fai clic su Salva.
5. Esegui la stessa operazione per il provider di accesso Google.
  
  Suggerimento: per saperne di più sull'attivazione di altri provider, consulta la sezione "Prima di iniziare" sezioni di Facebook, Twitter, e GitHub guide su Firebase.
Affinché Firebase venga autenticato 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 nuovamente questo snippet di codice in un secondo momento, vai alla pagina Impostazioni progetto per l'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é solo i contenuti in templates/index.html sono un esempio di Firebase i servizi di machine learning. 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 attiva 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 UI di Firebase per il web documentazione.

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.

Indietro

Gestione dei dati

Avanti

Autenticazione degli utenti