Esta página se ha traducido con Cloud Translation API.

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.

Clonar la aplicación de muestra

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

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.

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:

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

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'

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

En la Google Cloud consola, 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.
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

Ve al directorio backend y completa la configuración de la aplicación:
```
cd backend/
```
Instala las dependencias en un directorio lib de tu proyecto:
```
pip install -t lib -r requirements.txt
```
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:

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

http://localhost:8081
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
```
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:

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