Autenticazione degli utenti con Firebase

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

In questo passaggio della guida, aggiorni il servizio web per autenticare gli utenti e per recuperare e visualizzare le informazioni degli utenti dopo che hanno eseguito l'autenticazione. Tieni presente che, per questo passaggio, i tempi di richiesta del sito saranno comunque 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 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 e aggiungendo Firebase:
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-2
```
3. Aggiungi Firebase al servizio web e al progetto Google Cloud.

Aggiungere metodi di autenticazione di Firebase

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

Per aggiungere i comportamenti richiesti per un flusso di autenticazione, sostituisci l'attuale metodo del listener di eventi 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)
  });
});

Nota che il metodo onAuthStateChanged(), che controlla cosa cambia quando un utente esce dall'account, archivia il token ID dell'utente come cookie. Questo token ID è un token univoco che Firebase genera automaticamente quando un utente esegue l'accesso e viene utilizzato dal server per autenticare l'utente.

Aggiornamento del servizio web per utilizzare i token

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

Per utilizzare il token ID Firebase:

Recupera, verifica e decripta il token nel metodo root del tuo 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

Test del servizio web

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

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

Deployment del servizio web

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

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

gcloud app deploy

Tutto il traffico viene instradato automaticamente alla nuova versione di cui hai eseguito il deployment.

Per ulteriori informazioni sulla gestione delle versioni, vedi Gestione di servizi e versioni.

Visualizzazione del servizio

Per avviare rapidamente il browser e accedere al tuo 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 servizio web per personalizzare i dati per gli utenti autenticati.

Indietro

Aggiungi Firebase

Avanti

Personalizzazione dei dati