Autenticare gli utenti con Firebase

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

Ok

Aggiungi un flusso di accesso dell'utente al servizio web che utilizza Autenticazione Firebase.

In questo passaggio della guida, aggiorni il tuo web service per autenticare gli utenti e recuperare e visualizzare le informazioni personali di un utente dopo l'autenticazione. Tieni presente che, per questo passaggio, i tempi di richiesta del sito saranno comunque globali anziché specifiche per l'utente.

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 che precedono questo.

• Se disponi già di un progetto Google Cloud, puoi continuare scaricando una copia del servizio web e aggiungendo Firebase:

  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 del passaggio precedente:

     cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-2
     

  3. Aggiungi Firebase al progetto e al servizio web Google Cloud.

Aggiungi metodi di autenticazione Firebase

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

Per aggiungere i comportamenti richiesti per un flusso di autenticazione, sostituisci il valore Metodo listener di eventi attuale 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 accede o esce, memorizza il token ID dell'utente come cookie. Questo token ID è un token univoco generato da Firebase automaticamente quando un utente accede correttamente e viene utilizzato dal server per autenticare l'utente.

Suggerimento: l'inclusione di un URL dei Termini di servizio è facoltativa.

Aggiorna il servizio web per utilizzare i token

Poi, verifica gli utenti sul server utilizzando il loro token ID Firebase univoco e decriptare il token, così potrai stampare i relativi dati.

Per utilizzare il token ID Firebase:

1. Recupera, verifica e decripta il token nel metodo root della tua main.py file:

   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
       )
   
   

   Suggerimento: assicurati di importare request da Flask in modo da poter recuperare il contenente il token ID dell'utente.

2. 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
   

Testa il servizio web

Testa il servizio web eseguendolo localmente in un ambiente virtuale:

1. Esegui questi comandi principale del progetto per installare nuove dipendenze ed eseguire del tuo servizio web. Se non hai configurato un ambiente virtuale per i test locali, consulta Eseguire il test del servizio web.

   pip install -r requirements.txt
   python main.py
   

2. Inserisci il seguente indirizzo nel browser web per visualizzare il servizio web:

   http://localhost:8080
   

Nota: poiché questo servizio web utilizza Firebase, devi utilizzare l'URL localhost anziché l'indirizzo IP completo del tuo host locale, altrimenti riceverai di autenticazione. Questo perché l'indirizzo IP del tuo host locale non è elencato come dominio autorizzato nel tuo progetto Firebase.

Deployment del servizio web

Ora che l'autenticazione funziona localmente, puoi rieseguire il deployment in App Engine.

Esegui il comando seguente dalla directory principale 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, consulta la sezione Gestione dei servizi e delle versioni.

Visualizza il tuo servizio

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

gcloud app browse

Passaggi successivi

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