Autentica usuarios con Firebase

ID de región

REGION_ID es un código abreviado que Google asigna en función de la región que eliges cuando creas la app. El código no corresponde a un país ni a una provincia, aunque algunos ID de región puedan parecer similares a los códigos de país y provincia que se suelen usar. En el caso de las apps creadas después de febrero de 2020, REGION_ID.r se incluye en las URL de App Engine. En el caso de las apps existentes creadas antes de esta fecha, el ID de región es opcional en la URL.

Obtén más información acerca de los ID de región.

Agrega un flujo de acceso de usuarios a un servicio web que usa Firebase Authentication.

En este paso de la guía, se actualiza el servicio web para autenticar a los usuarios y recuperar y mostrar su información después de que se autentiquen. Ten en cuenta que, para este paso, los tiempos de solicitud del sitio seguirán siendo globales en lugar de específicos del usuario.

Antes de comenzar

Si completaste todos los pasos anteriores de esta guía, omite esta sección. De lo contrario, sigue una de las siguientes instrucciones:

Agrega métodos de autenticación de Firebase

Firebase proporciona métodos y variables de JavaScript que pueden usarse a fin de configurar el comportamiento de acceso para servicios web. Para este servicio web, agrega una función de salida, una variable que configure la IU de acceso y una función que controle los cambios cuando un usuario accede o sale.

Para agregar los comportamientos necesarios para un flujo de autenticación, reemplace el método objeto de escucha de eventos actual del archivo static/script.js con el siguiente código:

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

Ten en cuenta que el método onAuthStateChanged(), que controla los cambios cuando un usuario accede o sale, almacena el token de ID del usuario como una cookie. Este token de ID es un token único que Firebase genera automáticamente cuando un usuario accede correctamente y el servidor lo usa para autenticarlo.

Actualiza tu servicio web para usar tokens

A continuación, verifica que los usuarios en el servidor usen su token único de ID de Firebase; luego, desencripta los tokens para poder imprimirles sus datos.

Para usar el token de ID de Firebase, sigue estos pasos:

  1. Recupera, verifica y desencripta el token en el método root de tu archivo main.py:

    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
    )

  2. Asegúrate de que el archivo requirements.txt incluya todas las dependencias necesarias:

    Flask==3.0.0
google-cloud-datastore==2.15.1
google-auth==2.17.3
requests==2.28.2

Prueba tu servicio web

Para probar un servicio web, ejecútalo de forma local en un entorno virtual:

  1. Ejecuta los siguientes comandos en el directorio principal del proyecto para instalar nuevas dependencias y ejecutar tu servicio web. Si no configuraste un entorno virtual para las pruebas locales, consulta Prueba tu servicio web.

    pip install -r requirements.txt
python main.py

  2. Ingresa la siguiente dirección en el navegador web para ver tu servicio web:

    http://localhost:8080

Implementar tu servicio web

Ahora que la autenticación trabaja de manera local, puedes volver a implementar el servicio web en App Engine.

Ejecuta el siguiente comando desde el directorio raíz de tu proyecto, en el que se encuentra el archivo app.yaml:

gcloud app deploy

Todo el tráfico se enruta automáticamente a la nueva versión que implementaste.

Para obtener más información sobre la administración de versiones, consulta Cómo administrar servicios y versiones.

Cómo ver tu servicio

Para iniciar el navegador y acceder a tu servicio web en https://PROJECT_ID.REGION_ID.r.appspot.com con rapidez, ejecuta el siguiente comando:

gcloud app browse

Próximos pasos

Ahora que configuraste la autenticación de usuario, estás listo para aprender cómo actualizar tu servicio web a fin de personalizar los datos de los usuarios autenticados.

Anterior
Agregar Firebase
Siguiente
Personalizar datos