Questa pagina è stata tradotta dall'API Cloud Translation.

Autenticare gli utenti con Firebase

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 un flusso di accesso utente al tuo servizio web che utilizza Firebase Authentication.

In questo passaggio della guida, aggiorna il tuo servizio web per autenticare gli utenti e per recuperare e visualizzare le informazioni personali di un utente dopo l'autenticazione. Tieni presente che, per questo passaggio, gli orari delle richieste del sito saranno ancora globali anziché specifici per l'utente.

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 Google Cloud progetto, puoi continuare scaricando una copia del servizio web e aggiungendo Firebase:
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-2
```
3. Aggiungi Firebase al tuo Google Cloud progetto e al tuo servizio web.

Aggiungere metodi di autenticazione Firebase

Firebase fornisce metodi e variabili JavaScript che puoi utilizzare per configurare il comportamento di accesso per il tuo servizio web. Per questo servizio web, aggiungi una funzione di disconnessione, una variabile che configura la UI di accesso e una funzione che controlla cosa cambia quando un utente accede o si disconnette.

Per aggiungere i comportamenti richiesti per un flusso di autenticazione, sostituisci il metodo di listener di eventi corrente del file static/script.js con il seguente codice:

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      // Comment out any lines corresponding to providers you did not check in
      // the Firebase console.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
      //firebase.auth.PhoneAuthProvider.PROVIDER_ID

    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        // Add the token to the browser's cookies. The server will then be
        // able to verify the token against the API.
        // SECURITY NOTE: As cookies can easily be modified, only put the
        // token (which is verified server-side) in a cookie; do not add other
        // user information.
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

Tieni presente che il metodo onAuthStateChanged(), che controlla le modifiche quando un utente esegue l'accesso o la disconnessione, memorizza il token ID utente come cookie. Questo token ID è un token univoco generato automaticamente da Firebase quando un utente esegue l'accesso e viene utilizzato dal server per autenticare l'utente.

Aggiorna il servizio web per utilizzare i token

Successivamente, verifica gli utenti sul server utilizzando il token ID Firebase univoco, quindi decripta il token in modo da poter stampare i dati.

Per utilizzare il token ID Firebase:

Recupera, verifica e decripta il token nel metodo root del file main.py:

from flask import Flask, render_template, request
from google.auth.transport import requests
from google.cloud import datastore
import google.oauth2.id_token

firebase_request_adapter = requests.Request()
@app.route("/")
def root():
    # Verify Firebase auth.
    id_token = request.cookies.get("token")
    error_message = None
    claims = None
    times = None

    if id_token:
        try:
            # Verify the token against the Firebase Auth API. This example
            # verifies the token on each page load. For improved performance,
            # some applications may wish to cache results in an encrypted
            # session store (see for instance
            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
            claims = google.oauth2.id_token.verify_firebase_token(
                id_token, firebase_request_adapter
            )
        except ValueError as exc:
            # This will be raised if the token is expired or any other
            # verification checks fail.
            error_message = str(exc)

        # Record and fetch the recent times a logged-in user has accessed
        # the site. This is currently shared amongst all users, but will be
        # individualized in a following step.
        store_time(datetime.datetime.now(tz=datetime.timezone.utc))
        times = fetch_times(10)

    return render_template(
        "index.html", user_data=claims, error_message=error_message, times=times
    )

Assicurati che il file requirements.txt includa tutte le dipendenze necessarie:

Flask==3.0.0
google-cloud-datastore==2.15.1
google-auth==2.17.3
requests==2.28.2

Testare il servizio web

Testa il tuo servizio web eseguendolo localmente in un ambiente virtuale:

Esegui questi comandi nella directory principale del progetto per installare nuove dipendenze ed eseguire il servizio web. Se non hai configurato un ambiente virtuale per i test locali, consulta la sezione Testare il servizio web.
```
pip install -r requirements.txt
python main.py
```
Inserisci il seguente indirizzo nel browser web per visualizzare il servizio web:
```
http://localhost:8080
```

Deployment del servizio web

Ora che l'autenticazione funziona localmente, puoi eseguire nuovamente il deployment del servizio web in App Engine.

Esegui questo comando dalla directory radice del tuo progetto, dove si trova il file app.yaml:

gcloud app deploy

Tutto il traffico viene instradato automaticamente alla nuova versione che hai implementato.

Per saperne di più sulla gestione delle versioni, consulta Gestione di servizi e versioni.

Visualizzare il servizio

Per avviare rapidamente il browser e accedere al servizio web all'indirizzo https://PROJECT_ID.REGION_ID.r.appspot.com, esegui questo comando:

gcloud app browse

Passaggi successivi

Ora che hai configurato l'autenticazione utente, puoi scoprire come aggiornare il tuo web service per personalizzare i dati per gli utenti autenticati.

Indietro

Aggiungi Firebase

Avanti

Personalizzazione dei dati