Inicio de sesión de usuarios en App Engine

---

En este tutorial se explica cómo obtener, verificar y almacenar credenciales de terceros mediante Identity Platform, el entorno estándar de App Engine y Datastore.

En este documento se explica cómo crear una aplicación sencilla para tomar notas llamada Firenotes, que almacena las notas de los usuarios en sus cuadernos personales. Los cuadernos se almacenan por usuario y se identifican mediante el ID único de Identity Platform de cada usuario. La aplicación tiene los siguientes componentes:

• El frontend configura la interfaz de usuario de inicio de sesión y obtiene el ID de Identity Platform. También gestiona los cambios de estado de la autenticación y permite que los usuarios vean sus notas.

• FirebaseUI es una solución directa de código abierto que simplifica las tareas de autenticación y de interfaz de usuario. El SDK gestiona el inicio de sesión de los usuarios, la vinculación de varios proveedores a una cuenta, la recuperación de contraseñas y más. Implementa prácticas recomendadas de autenticación para ofrecer una experiencia de inicio de sesión fluida y segura.

• El backend verifica el estado de autenticación del usuario y devuelve la información del perfil del usuario, así como sus notas.

La aplicación almacena las credenciales de usuario en Datastore mediante la biblioteca de cliente NDB, pero puedes almacenar las credenciales en la base de datos que quieras.

Firenotes se basa en el framework de aplicaciones web Flask. La aplicación de muestra usa Flask por su simplicidad y facilidad de uso, pero los conceptos y tecnologías explorados son aplicables independientemente del framework que utilices.

Objetivos

Al completar este tutorial, podrás hacer lo siguiente:

• Configura la interfaz de usuario con FirebaseUI para Identity Platform.
• Obtén un token de ID de Identity Platform y verifícalo mediante la autenticación del lado del servidor.
• Almacena las credenciales de los usuarios y los datos asociados en Datastore.
• Consulta una base de datos mediante la biblioteca de cliente NDB.
• Despliega una aplicación en App Engine.

Costes

En este tutorial se usan componentes facturables de Google Cloud, como los siguientes:

• Datastore
• Identity Platform

Usa la calculadora de precios para generar una estimación de costes basada en el uso previsto.

Los usuarios nuevos Google Cloud pueden disfrutar de una prueba gratuita.

Antes de empezar

1. Instala Git, Python 2.7 y virtualenv. Para obtener más información sobre cómo configurar tu entorno de desarrollo de Python, como instalar la versión más reciente de Python, consulta el artículo Configurar un entorno de desarrollo de Python para Google Cloud.
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.

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

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Install the Google Cloud CLI.

Si utilizas un proveedor de identidades (IdP) externo, primero debes iniciar sesión en la CLI de gcloud con tu identidad federada.

Para inicializar gcloud CLI, ejecuta el siguiente comando:

gcloud init

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

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Install the Google Cloud CLI.

Si utilizas un proveedor de identidades (IdP) externo, primero debes iniciar sesión en la CLI de gcloud con tu identidad federada.

Para inicializar gcloud CLI, ejecuta el siguiente comando:

gcloud init

Si ya has instalado e inicializado el SDK en otro proyecto, define el proyecto gcloud como el ID del proyecto de App Engine que estés usando en Firenotes. Consulta Gestionar configuraciones del SDK de Google Cloud para ver los comandos específicos que se usan para actualizar un proyecto con la herramienta gcloud.

Clonar la aplicación de muestra

Para descargar la muestra en tu máquina local, sigue estos pasos:

1. Clona el repositorio de la aplicación de muestra en tu máquina local:

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

   También puedes descargar el ejemplo como un archivo ZIP y extraerlo.

2. Navega al directorio que contiene el código de muestra:

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

Añadir la interfaz de usuario

Para configurar FirebaseUI para Identity Platform y habilitar proveedores de identidades, sigue estos pasos:

1. Añade Identity Platform a tu aplicación siguiendo estos pasos:

   1. Ve a la Google Cloud consola.
      Ve a la Google Cloud consola.
   2. Selecciona el Google Cloud proyecto que quieras usar:
      • Si ya tienes un proyecto, selecciónalo en la lista desplegable Seleccionar organización, que aparece en la parte superior de la página.
      • Si no tienes ningún Google Cloud proyecto, crea uno en la Google Cloud consola.
   3. Ve a la página Mercado de Identity Platform de la Google Cloud consola.
      Ve a la página de Google Identity Platform Marketplace
   4. En la página de Identity Platform Marketplace, haz clic en Habilitar Identity de cliente.
   5. Ve a la página Usuarios de Customer Identity en la Google Cloud consola.
      Ir a la página Usuarios
   6. En la parte superior derecha, haz clic en detalles de configuración de la aplicación.

   7. Copia los detalles de configuración de la aplicación en tu aplicación web.

      // This code is for illustration purposes only.
      
      // 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. Edita el archivo backend/app.yaml para añadir GOOGLE_CLOUD_PROJECT : 'PROJECT_ID' en la sección env_variables:

   # 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.
   
   # This code is designed for Python 2.7 and
   # the App Engine first-generation Runtime which has reached End of Support.
   
   runtime: python27
   api_version: 1
   threadsafe: true
   service: backend
   
   handlers:
   - url: /.*
     script: main.app
   
   env_variables:
     GAE_USE_SOCKETS_HTTPLIB : 'true'
   

3. En el archivo frontend/main.js, configura el widget de inicio de sesión de FirebaseUI seleccionando los proveedores que quieras ofrecer a tus usuarios.

   // This code is for illustration purposes only.
   
   // 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. En la consola Google Cloud , habilita los proveedores que hayas elegido conservar:

   1. Ve a la página Proveedores de identidad de cliente de la Google Cloud consola.
      Ir a la página Proveedores
   2. Haz clic en Add A Provider (Añadir proveedor).
   3. En la lista desplegable Seleccionar un proveedor, elige los proveedores que quieras usar.
   4. Junto a Habilitado, haz clic en el botón para habilitar el proveedor.
      • En el caso de los proveedores de identidades externos, introduzca el ID y el secreto del proveedor en el sitio para desarrolladores del proveedor. En la documentación de Firebase se ofrecen instrucciones específicas en las secciones "Antes de empezar" de las guías de Facebook, Twitter y GitHub.
      • En el caso de las integraciones de SAML y OIDC, consulta la configuración de tu proveedor de identidades.

5. Añada su dominio a la lista de dominios autorizados en Identity Platform:

   1. Ve a la página Configuración de Customer Identity en la Google Cloud consola.
      Ve a la página Configuración
   2. En Dominios autorizados, haz clic en Añadir dominio.

   3. Introduce el dominio de tu aplicación con el siguiente formato:

      [PROJECT_ID].appspot.com
      

      No incluyas http:// antes del nombre de dominio.

Instalar dependencias

1. Ve al directorio backend y completa la configuración de la aplicación:

   cd backend/
   

2. Instala las dependencias en un directorio lib de tu proyecto:

   pip install -t lib -r requirements.txt
   

3. En appengine_config.py, el método vendor.add() registra las bibliotecas en el directorio lib.

Ejecutar la aplicación de forma local

Para ejecutar la aplicación de forma local, usa el servidor de desarrollo local de App Engine:

1. Añada la siguiente URL como backendHostURL en main.js:

   http://localhost:8081

2. Ve al directorio raíz de la aplicación. A continuación, inicia el servidor de desarrollo:

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

3. Visita http://localhost:8080/ en un navegador web.

Autenticar usuarios en el servidor

Ahora que has configurado un proyecto e inicializado una aplicación para el desarrollo, puedes consultar el código para saber cómo obtener y verificar tokens de ID de Identity Platform en el servidor.

Obtener un token de ID de Identity Platform

El primer paso de la autenticación del lado del servidor es obtener un token de acceso para verificarlo. Las solicitudes de autenticación se gestionan con el onAuthStateChanged() listener de 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();

  }
});

Cuando un usuario inicia sesión, el método getToken() de Identity Platform en la devolución de llamada devuelve un token de ID de Identity Platform en forma de JSON Web Token (JWT).

Verificar tokens en el servidor

Cuando un usuario inicia sesión, el servicio de frontend obtiene las notas que haya en el cuaderno del usuario mediante una solicitud AJAX GET. Para ello, se necesita autorización para acceder a los datos del usuario, por lo que el JWT se envía en el encabezado Authorization de la solicitud mediante el esquema 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
    }
  })

Para que el cliente pueda acceder a los datos del servidor, este debe verificar que el token esté firmado por Identity Platform. Puedes verificar este token con la biblioteca de autenticación de Google para Python. Usa la función verify_firebase_token de la biblioteca de autenticación para verificar el token de portador y extraer las reclamaciones:

# This code is for illustration purposes only.

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

Cada proveedor de identidades envía un conjunto de reclamaciones diferente, pero todos tienen al menos una reclamación sub con un ID de usuario único y una reclamación que proporciona información de perfil, como name o email, que puedes usar para personalizar la experiencia de usuario en tu aplicación.

Gestionar datos de usuario en Datastore

Después de autenticar a un usuario, debes almacenar sus datos para que se conserven una vez que haya finalizado la sesión en la que ha iniciado sesión. En las siguientes secciones se explica cómo almacenar una nota como una entidad de Datastore y segregar las entidades por ID de usuario.

Crear entidades para almacenar datos de usuario

Para crear una entidad en Datastore, declara una clase de modelo NDB con determinadas propiedades, como números enteros o cadenas. Los índices de Datastore indexan las entidades por tipo. En el caso de Firenotes, el tipo de cada entidad es Note. Para hacer consultas, cada Note se almacena con un nombre de clave, que es el ID de usuario obtenido de la reclamación sub en la sección anterior.

En el siguiente código se muestra cómo definir las propiedades de una entidad, tanto con el método del constructor de la clase de modelo cuando se crea la entidad como mediante la asignación de propiedades individuales después de la creación:

# This code is for illustration purposes only.

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"))

Para escribir el Note recién creado en Datastore, llama al método put() del objeto note.

Obtener datos de usuario

Para recuperar los datos de usuario asociados a un ID de usuario concreto, usa el método NDB query() para buscar en la base de datos las notas del mismo grupo de entidades. Las entidades del mismo grupo o ruta de ancestros comparten un nombre de clave común, que en este caso es el ID de usuario.

# This code is for illustration purposes only.

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

Después, puedes obtener los datos de la consulta y mostrar las notas en el cliente:

// This code is for illustration purposes only.

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

Desplegar una aplicación

Has integrado correctamente Identity Platform con tu aplicación de App Engine. Para ver tu aplicación en un entorno de producción activo, sigue estos pasos:

1. Cambia la URL del host de backend en main.js a https://backend-dot-[PROJECT_ID].appspot.com. Sustituye [PROJECT_ID] por el ID de tu proyecto.

2. Despliega la aplicación mediante la interfaz de línea de comandos del SDK de Google Cloud:

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

3. Consulta la aplicación publicada en https://[PROJECT_ID].appspot.com.

   Nota: Los índices de Datastore tardan unos minutos en actualizarse, por lo que es posible que la aplicación no funcione completamente inmediatamente después de la implementación.

Limpieza

Para evitar que se apliquen cargos en tu Google Cloud cuenta por los recursos utilizados en este tutorial, elimina tu proyecto de App Engine:

Eliminar el proyecto

La forma más fácil de evitar que te cobren es eliminar el proyecto que has creado para el tutorial.

Para ello, sigue las instrucciones que aparecen a continuación:

Precaución: Eliminar un proyecto tiene los siguientes efectos:

• Se elimina todo el contenido del proyecto. Si has usado un proyecto que ya existía para las tareas de este documento, cuando lo elimines, también se eliminará cualquier otro trabajo que hayas realizado en él.
• Se pierden los IDs de proyecto personalizados. Cuando creaste este proyecto, es posible que hayas creado un ID de proyecto personalizado que quieras usar en el futuro. Para conservar las URLs que usan el ID del proyecto, como una URL appspot.com, elimina los recursos seleccionados dentro del proyecto en lugar de eliminar todo el proyecto.

Si tienes previsto consultar varias arquitecturas, tutoriales o guías de inicio rápido, reutilizar los proyectos puede ayudarte a no superar los límites de cuota de proyectos.

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.

Siguientes pasos

• Consulta arquitecturas de referencia, diagramas y prácticas recomendadas sobre Google Cloud. Consulta nuestro Centro de arquitectura de Cloud.