Accesso degli utenti su App Engine

Questo tutorial mostra come recuperare, verificare e archiviare i file di terze parti le credenziali utilizzando Identity Platform, App Engine ambiente standard e Datastore.

Questo documento ti guida attraverso una semplice applicazione per prendere appunti chiamata Firenote che memorizzano i dati note nei propri blocchi note personali. Notebooks vengono memorizzati per utente e identificati in base all'ID univoco di ciascun utente ID Identity Platform. L'applicazione include i seguenti componenti:

  • Il frontend configura l'interfaccia utente di accesso e recupera i ID Identity Platform. Gestisce anche le modifiche allo stato dell'autenticazione gli utenti vedranno le note.

  • FirebaseUI è una soluzione open source integrata che semplifica l'autenticazione e le attività dell'interfaccia utente. L'SDK gestisce l'accesso utente, collegando più provider a un unico account, recupero delle password e altro ancora. Implementa best practice per l'autenticazione per un'esperienza di accesso semplice e sicura.

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

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

Firenotes si basa sul Fiocco framework per applicazioni web. 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 utilizzato.

Obiettivi

Completando questo tutorial, raggiungerai i seguenti obiettivi:

  • Configura l'interfaccia utente con FirebaseUI per Identity Platform.
  • Ottenere un token ID Identity Platform e verificarlo utilizzando il lato server autenticazione.
  • 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
  • Identity Platform

Utilizza il Calcolatore prezzi per generare una stima dei costi in base all'utilizzo previsto. I nuovi utenti Google Cloud potrebbero hai diritto a una prova gratuita.

Prima di iniziare

  1. Installa Git, Python 2.7 e virtualenv. Per ulteriori informazioni la configurazione dell'ambiente di sviluppo Python, ad esempio installando all'ultima versione di Python, consulta l'articolo sulla configurazione di Ambiente di sviluppo Python per Google Cloud.
  2. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

  3. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  4. Install the Google Cloud CLI.

  5. To initialize the gcloud CLI, run the following command: 

    gcloud init

  6. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  7. Install the Google Cloud CLI.

  8. To initialize the gcloud CLI, run the following command: 

    gcloud init

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

Clonazione dell'app di esempio

Per scaricare l'esempio sul computer locale:

  1. Clona il repository delle applicazioni di esempio sulla tua macchina locale:

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

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

  2. Vai alla directory che contiene il codice campione:

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

Aggiunta dell'interfaccia utente

Per configurare FirebaseUI per Identity Platform e abilitare Identity di altri fornitori:

  1. Aggiungi Identity Platform alla tua app seguendo questa procedura:

    1. Vai alla console Google Cloud.
      Vai alla console Google Cloud
    2. Seleziona il progetto Google Cloud che vuoi utilizzare:
      • Se hai già un progetto, selezionalo nella nell'elenco a discesa Seleziona organizzazione nella parte superiore della pagina.
      • Se non hai già un progetto Google Cloud, crea un nuovo progetto nel nella console Google Cloud.
    3. Vai a Identity Platform Marketplace nella console Google Cloud.
      Vai alla pagina di Identity Platform Marketplace
    4. Nella pagina Marketplace di Identity Platform, fai clic su Abilita cliente Identità.
    5. Vai all'identità del cliente Utenti. nella console Google Cloud.
      Vai alla pagina Utenti
    6. In alto a destra, fai clic su Dettagli configurazione applicazione.

    7. Copia i dettagli di configurazione dell'applicazione nella tua applicazione web.

      // 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>"
};

  2. Modifica il file backend/app.yaml e inserisci il tuo dell'ID progetto Google Cloud variabili di ambiente:

    # Copyright 2021 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#      http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

runtime: python27
api_version: 1
threadsafe: true
service: backend

handlers:
- url: /.*
  script: main.app

env_variables:
  GAE_USE_SOCKETS_HTTPLIB : 'true'

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

    // 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);
}

  4. Nella console Google Cloud, abilita i provider che hai scelto di mantenere:

    1. Vai alla pagina Provider di identità cliente nella console Google Cloud.
      Vai alla pagina Provider
    2. Fai clic su Add A Provider (Aggiungi un provider).
    3. Nell'elenco a discesa Seleziona un provider, seleziona i fornitori che ti interessano. per l'utilizzo.
    4. Accanto a Enabled (Attivato), fai clic sul pulsante per abilitare il provider.
      • Per i provider di identità di terze parti, inserisci l'ID provider e il secret dal sito per sviluppatori del fornitore. I documenti di Firebase forniscono istruzioni specifiche nella sezione "Prima di iniziare" sezioni di Facebook Twitter e GitHub guide.
      • Per le integrazioni SAML e OIDC, fai riferimento alla configurazione del tuo IdP.

  5. Aggiungi il tuo dominio all'elenco dei domini autorizzati in Identity Platform:

    1. Vai alla pagina Impostazioni dell'identità cliente nella console Google Cloud.
      Vai alla pagina Impostazioni
    2. In Domini autorizzati, fai clic su Aggiungi dominio.

    3. Inserisci il dominio della tua app nel seguente formato:

      [PROJECT_ID].appspot.com

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

Installazione delle dipendenze

  1. Vai 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 in nella directory lib.

Esecuzione dell'applicazione in locale

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

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

    http://localhost:8081

  2. Vai alla directory root dell'applicazione. Poi avvia la di sviluppo di applicazioni:

    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 di sviluppo, puoi analizzare il codice per capire come recuperare verificare i token ID Identity Platform sul server.

Ottenere un token ID da Identity Platform

Il primo passaggio dell'autenticazione lato server consiste nel recuperare un token di accesso verificare. Le richieste di autenticazione vengono gestite con onAuthStateChanged() listener di Identity Platform:

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();

  }
});

Quando un utente esegue l'accesso, viene utilizzato il metodo getToken() di Identity Platform nella il callback restituisce un token ID Identity Platform sotto forma di un file web JSON token (JWT).

Verifica dei token sul server

Dopo che un utente ha eseguito l'accesso, il servizio di frontend recupera eventuali note esistenti nel blocco note dell'utente tramite una richiesta AJAX GET. Ciò richiede l'autorizzazione accedere ai dati dell'utente, perciò il JWT viene inviato nell'intestazione Authorization del utilizzando lo schema Bearer:

// 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, il server deve verificare che il token sia firmato da Identity Platform. Puoi verificare questo token utilizzando Libreria di autenticazione di Google per Python. Utilizza il comando gcloud verify_firebase_token per verificare il token di connessione ed estrarre le attestazioni:

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, ma ognuno ha almeno un Rivendicazione di sub con un ID utente univoco e una rivendicazione che include un profilo informazioni, ad esempio name o email, che puoi utilizzare per personalizzare l'utente sulla tua app.

Gestione dei dati utente in Datastore

Dopo aver autenticato un utente, devi archiviare i suoi dati affinché rimangano memorizzati al termine di una sessione in cui è stato eseguito l'accesso. Le seguenti sezioni spiegano come archiviare una nota come entità Datastore e separa le entità in base all'ID utente.

Creazione di entità per archiviare i dati utente

Puoi creare un'entità in Datastore dichiarando un Classe del modello NDB con alcune proprietà come numeri interi o stringhe. Indici Datastore di kind; nel caso di Firenotes, il tipo di ciascuna entità è Note. Ai fini dell'esecuzione di query, ogni Note viene archiviato con un nome chiave, ovvero ID utente ottenuto dalla rivendicazione sub nella sezione precedente.

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

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 il Note appena creato in Datastore, chiama il metodo put() sull'oggetto note.

Recupero dei dati utente

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

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 della query e visualizzare le note nel client:

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

Integrazione eseguita correttamente e Identity Platform con la tua applicazione App Engine. Per visualizzare 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 il tuo 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 pubblicata all'indirizzo https://[PROJECT_ID].appspot.com.

Esegui la pulizia

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

Elimina il progetto

Il modo più semplice per eliminare la fatturazione creato per il tutorial.

Per eliminare il progetto:

  1. In the Google Cloud console, go to the Manage resources page.

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut down to delete the project.

Passaggi successivi

  • Esplora le architetture di riferimento, i diagrammi e le best practice su Google Cloud. Dai un'occhiata al nostro Centro architetture cloud.