Autenticazione degli utenti su App Engine mediante Firebase

---

Questo tutorial mostra come recuperare, verificare e archiviare le credenziali utente utilizzando Firebase Authentication, l'ambiente standard di App Engine e Datastore.

Questo documento illustra un'applicazione semplice per scrivere note chiamata Firenote, che memorizza le note degli utenti nei blocchi note personali. I blocchi note sono archiviati per utente e sono identificati dall'ID Firebase univoco di ogni utente. L'applicazione include i seguenti componenti:

• Il frontend configura l'interfaccia utente di accesso e recupera l'ID Firebase Authentication. Gestisce inoltre le modifiche dello stato di autenticazione e consente agli utenti di visualizzare le loro note.

• FirebaseUI è una soluzione open source con rilascio che semplifica le attività di autenticazione e UI. L'SDK gestisce l'accesso degli utenti, collegando più provider a un account, recuperando le password e altro ancora. Implementa le best practice di autenticazione per un'esperienza di accesso sicura e fluida.

  

• Il backend verifica lo stato di autenticazione dell'utente e restituisce le informazioni del profilo utente e le note dell'utente.

L'applicazione archivia le credenziali utente in Datastore utilizzando la libreria client NDB, ma puoi memorizzarle in un database a tua scelta.

Il seguente diagramma mostra in che modo il frontend e il backend comunicano tra loro e come le credenziali utente si spostano da Firebase al database.

Firenotes si basa sul framework dell'applicazione web Flask. L'app di esempio utilizza Flask per la sua semplicità e facilità d'uso, ma i concetti e le tecnologie esplorati sono applicabili indipendentemente dal framework che utilizzi.

Obiettivi

Completando questo tutorial, sarai in grado di:

• Configurare l'interfaccia utente di Firebase Authentication.
• Ottenere un token ID Firebase e verificarlo utilizzando l'autenticazione lato server.
• Archiviare le credenziali utente e i dati associati in Datastore.
• Esegui una query su un database utilizzando la libreria client NDB.
• Eseguire il deployment di un'app in App Engine.

Costi

Questo tutorial utilizza i componenti fatturabili di Google Cloud, tra cui:

• Datastore

Utilizza il Calcolatore prezzi per generare una stima dei costi in base all'utilizzo previsto. I nuovi utenti di Google Cloud potrebbero essere idonei alla prova gratuita.

Prima di iniziare

1. Installa Git, Python 2.7 e virtualenv. Per ulteriori informazioni sulla configurazione dell'ambiente di sviluppo Python, ad esempio l'installazione della versione più recente di Python, consulta Configurare un ambiente di sviluppo Python per Google Cloud.
2. Accedi al tuo account Google Cloud. Se non conosci Google Cloud, crea un account per valutare le prestazioni dei nostri prodotti in scenari reali. I nuovi clienti ricevono anche 300 $di crediti gratuiti per l'esecuzione, il test e il deployment dei carichi di lavoro.

3. Nella pagina del selettore dei progetti in Google Cloud Console, seleziona o crea un progetto Google Cloud.

   Nota: se non hai intenzione di mantenere le risorse che crei in questa procedura, crea un progetto invece di selezionarne uno esistente. Dopo aver completato questi passaggi, puoi eliminare il progetto e rimuovere tutte le risorse associate.

   Vai al selettore progetti

4. Installa Google Cloud CLI.

5. Per inizializzare l'interfaccia a riga di comando gcloud, esegui il comando seguente:

   gcloud init

6. Nella pagina del selettore dei progetti in Google Cloud Console, seleziona o crea un progetto Google Cloud.

   Nota: se non hai intenzione di mantenere le risorse che crei in questa procedura, crea un progetto invece di selezionarne uno esistente. Dopo aver completato questi passaggi, puoi eliminare il progetto e rimuovere tutte le risorse associate.

   Vai al selettore progetti

7. Installa Google Cloud CLI.

8. Per inizializzare l'interfaccia a riga di comando gcloud, esegui il comando seguente:

   gcloud init

Se hai già installato e inizializzato l'SDK su un progetto diverso, imposta il progetto gcloud sull'ID progetto App Engine che stai utilizzando per Firenotes. Consulta Gestire le configurazioni di Google Cloud SDK per comandi specifici per aggiornare un progetto con lo strumento gcloud.

Clonazione dell'app di esempio

Per scaricare l'esempio nella macchina locale:

1. Clona il repository dell'applicazione di esempio nella macchina locale:

   git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

   In alternativa, puoi scaricare l'esempio come file ZIP ed estrarlo.

2. Vai alla directory che contiene il codice di esempio:

   cd python-docs-samples/appengine/standard/firebase/firenotes
   

   Per configurare FirebaseUI e abilitare i provider di identità:

3. Aggiungi Firebase alla tua app seguendo questa procedura:

   1. Crea un progetto Firebase nella console Firebase.
      • Se non hai ancora un progetto Firebase, fai clic su Aggiungi progetto e inserisci il nome di un progetto Google Cloud esistente o uno nuovo.
      • Se hai già un progetto Firebase che vuoi utilizzare, selezionalo dalla console.
   2. Nella pagina della panoramica del progetto, fai clic su Aggiungi Firebase alla tua applicazione web. Se il progetto ha già un'applicazione, seleziona Aggiungi applicazione dalla pagina di riepilogo del progetto.

   3. Usa la sezione Initialize Firebase dello snippet di codice personalizzato del tuo progetto per compilare la seguente sezione del file frontend/main.js:

      appengine/standard/firebase/firenotes/frontend/main.js

      Visualizza su GitHub

      // Obtain the following from the "Add Firebase to your web app" dialogue
      // Initialize Firebase
      var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        projectId: "<PROJECT_ID>",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<MESSAGING_SENDER_ID>"
      };

4. Nel file frontend/main.js, configura il widget di accesso di FirebaseUI selezionando i provider che vuoi offrire ai tuoi utenti.

   appengine/standard/firebase/firenotes/frontend/main.js

   Visualizza su GitHub

   // Firebase log-in widget
   function configureFirebaseLoginWidget() {
     var uiConfig = {
       'signInSuccessUrl': '/',
       'signInOptions': [
         // Leave the lines as is for the providers you want to offer your users.
         firebase.auth.GoogleAuthProvider.PROVIDER_ID,
         firebase.auth.FacebookAuthProvider.PROVIDER_ID,
         firebase.auth.TwitterAuthProvider.PROVIDER_ID,
         firebase.auth.GithubAuthProvider.PROVIDER_ID,
         firebase.auth.EmailAuthProvider.PROVIDER_ID
       ],
       // Terms of service url
       'tosUrl': '<your-tos-url>',
     };
   
     var ui = new firebaseui.auth.AuthUI(firebase.auth());
     ui.start('#firebaseui-auth-container', uiConfig);
   }

5. Attiva i provider che hai scelto di mantenere nella console Firebase facendo clic su Autenticazione > Metodo di accesso. Quindi, in Provider di accesso, passa il mouse sopra un provider e fai clic sull'icona a forma di matita.

   

   1. Attiva il pulsante Attiva e, per i provider di identità di terze parti, inserisci l'ID provider e il secret dal sito per sviluppatori del provider. I documenti Firebase forniscono istruzioni specifiche nelle sezioni "Prima di iniziare" delle guide Facebook, Twitter e GitHub. Dopo aver attivato un fornitore, fai clic su Salva.

      

   2. Nella Console Firebase, in Domini autorizzati, fai clic su Aggiungi dominio e inserisci il dominio della tua app su App Engine nel seguente formato:

      [PROJECT_ID].appspot.com
      

      Non includere http:// prima del nome di dominio.

Installazione delle dipendenze

1. Passa alla directory backend e completa la configurazione dell'applicazione:

   cd backend/
   

2. Installa le dipendenze in una directory lib nel tuo progetto:

   pip install -t lib -r requirements.txt
   

3. In appengine_config.py, il metodo vendor.add() registra le librerie nella directory lib.

Esecuzione locale dell'applicazione

Per eseguire l'applicazione in locale, utilizza il server di sviluppo locale di App Engine:

1. Aggiungi il seguente URL come backendHostURL in main.js:

   http://localhost:8081

2. Vai alla directory radice dell'applicazione. Quindi avvia il server di sviluppo:

   dev_appserver.py frontend/app.yaml backend/app.yaml
   

3. Visita la pagina http://localhost:8080/ in un browser web.

Autenticazione degli utenti sul server

Ora che hai configurato un progetto e inizializzato un'applicazione per lo sviluppo, puoi esaminare il codice per capire come recuperare e verificare i token ID Firebase sul server.

Ottenere un token ID da Firebase

Il primo passaggio dell'autenticazione lato server consiste nel recuperare un token di accesso da verificare. Le richieste di autenticazione vengono gestite con l'elenco di onAuthStateChanged() di Firebase:

appengine/standard/firebase/firenotes/frontend/main.js

Visualizza su GitHub

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $('#logged-out').hide();
    var name = user.displayName;

    /* If the provider gives a display name, use the name for the
    personal welcome message. Otherwise, use the user's email. */
    var welcomeName = name ? name : user.email;

    user.getIdToken().then(function(idToken) {
      userIdToken = idToken;

      /* Now that the user is authenicated, fetch the notes. */
      fetchNotes();

      $('#user').text(welcomeName);
      $('#logged-in').show();

    });

  } else {
    $('#logged-in').hide();
    $('#logged-out').show();

  }
});

Dopo che un utente ha eseguito l'accesso, il metodo Firebase getToken() nel callback restituisce un token dell'ID Firebase sotto forma di un token web JSON (JWT).

Verifica dei token sul server

Dopo che un utente esegue l'accesso, il servizio di frontend recupera le note esistenti nel blocco note dell'utente tramite una richiesta AJAX GET. Questa operazione richiede l'autorizzazione ad accedere ai dati dell'utente, quindi il JWT viene inviato nell'intestazione Authorization della richiesta utilizzando lo schema Bearer:

appengine/standard/firebase/firenotes/frontend/main.js

Visualizza su GitHub

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  })

Prima che il client possa accedere ai dati del server, quest'ultimo deve verificare che il token sia firmato da Firebase. Puoi verificare questo token utilizzando la libreria di autenticazione di Google per Python. Utilizza la funzione verify_firebase_token della libreria di autenticazione per verificare il token di connessione ed estrarre le rivendicazioni:

appengine/standard/firebase/firenotes/backend/main.py

Visualizza su GitHub

id_token = request.headers['Authorization'].split(' ').pop()
claims = google.oauth2.id_token.verify_firebase_token(
    id_token, HTTP_REQUEST, audience=os.environ.get('GOOGLE_CLOUD_PROJECT'))
if not claims:
    return 'Unauthorized', 401

Ogni provider di identità invia un insieme diverso di rivendicazioni, ognuna delle quali ha almeno una rivendicazione sub con un ID utente univoco e una rivendicazione che fornisce alcune informazioni del profilo, ad esempio name o email, che puoi utilizzare per personalizzare l'esperienza utente nella tua app.

Gestione dei dati utente in Datastore

Dopo l'autenticazione di un utente, devi archiviarne i dati affinché questi rimangano disponibili al termine della sessione in cui hai eseguito l'accesso. Le seguenti sezioni spiegano come archiviare una nota come entità Datastore e separare le entità in base all'ID utente.

Creazione di entità per archiviare dati utente

Puoi creare un'entità in Datastore dichiarando una classe modello NDB con alcune proprietà come numeri interi o stringhe. Datastore indicizza le entità per kind; nel caso delle Firenote, il tipo di ciascuna entità è Note. A scopo di query, ogni Note viene archiviato con un nome di chiave, ovvero lo User-ID ottenuto dalla rivendicazione sub nella sezione precedente.

Il codice seguente mostra come impostare le proprietà di un'entità, sia con il metodo del costruttore per la classe del modello quando viene creata l'entità, sia con l'assegnazione di singole proprietà dopo la creazione:

appengine/standard/firebase/firenotes/backend/main.py

Visualizza su GitHub

data = request.get_json()

# Populates note properties according to the model,
# with the user ID as the key name.
note = Note(
    parent=ndb.Key(Note, claims['sub']),
    message=data['message'])

# Some providers do not provide one of these so either can be used.
note.friendly_id = claims.get('name', claims.get('email', 'Unknown'))

Per scrivere Note appena creato in Datastore, chiama il metodo put() nell'oggetto note.

Recupero dei dati utente in corso...

Per recuperare i dati utente associati a un determinato ID utente, utilizza il metodo NDB query() per cercare nel database le note nello stesso gruppo di entità. Le entità nello stesso gruppo, o percorso predecessore, condividono un nome chiave comune, che in questo caso è l'ID utente.

appengine/standard/firebase/firenotes/backend/main.py

Visualizza su GitHub

def query_database(user_id):
    """Fetches all notes associated with user_id.

    Notes are ordered them by date created, with most recent note added
    first.
    """
    ancestor_key = ndb.Key(Note, user_id)
    query = Note.query(ancestor=ancestor_key).order(-Note.created)
    notes = query.fetch()

    note_messages = []

    for note in notes:
        note_messages.append({
            'friendly_id': note.friendly_id,
            'message': note.message,
            'created': note.created
        })

    return note_messages

Puoi quindi recuperare i dati delle query e visualizzare le note nel client:

appengine/standard/firebase/firenotes/frontend/main.js

Visualizza su GitHub

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  }).then(function(data){
    $('#notes-container').empty();
    // Iterate over user data to display user's notes from database.
    data.forEach(function(note){
      $('#notes-container').append($('<p>').text(note.message));
    });
  });
}

Deployment dell'app

Hai eseguito l'integrazione di Firebase Authentication con la tua applicazione App Engine. Per vedere la tua applicazione in esecuzione in un ambiente di produzione attivo:

1. Modifica l'URL dell'host di backend in main.js in https://backend-dot-[PROJECT_ID].appspot.com. Sostituisci [PROJECT_ID] con l'ID progetto.

2. Esegui il deployment dell'applicazione utilizzando l'interfaccia a riga di comando di Google Cloud SDK:

   gcloud app deploy backend/index.yaml frontend/app.yaml backend/app.yaml
   

3. Visualizza l'applicazione in diretta all'indirizzo https://[PROJECT_ID].appspot.com.

   Nota: l'aggiornamento degli indici Datastore richiede alcuni minuti, quindi l'applicazione potrebbe non essere completamente funzionante subito dopo il deployment.

Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo tutorial, elimina il progetto di App Engine:

Elimina il progetto

Il modo più semplice per eliminare la fatturazione è eliminare il progetto che hai creato per il tutorial.

Per eliminare il progetto:

Attenzione: l'eliminazione di un progetto ha i seguenti effetti:

• L'intero contenuto del progetto viene eliminato. Se hai utilizzato un progetto esistente per questo tutorial, quando lo elimini elimini anche qualsiasi altro lavoro svolto.
• Gli ID progetto personalizzati non sono più disponibili. Quando hai creato questo progetto, potresti aver creato un ID progetto personalizzato che vuoi utilizzare in futuro. Per conservare gli URL che utilizzano l'ID progetto, ad esempio un URL appspot.com, elimina le risorse selezionate all'interno del progetto anziché eliminare l'intero progetto.

Se intendi esplorare più tutorial e guide rapide, puoi riutilizzare i progetti ed evitare così di superare i limiti di quota.

1. In Google Cloud Console, vai alla pagina Gestisci risorse.

   Vai a Gestisci risorse

2. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
3. Nella finestra di dialogo, digita l'ID del progetto e fai clic su Chiudi per eliminare il progetto.

Passaggi successivi

• Esplora architetture di riferimento, diagrammi e best practice su Google Cloud. Dai un'occhiata al nostro Cloud Architecture Center.