Añadir Firebase a tu servicio web

ID de región

El REGION_ID es un código abreviado que Google asigna en función de la región que selecciones al crear tu aplicación. El código no corresponde a un país o provincia, aunque algunos IDs de región pueden parecerse a los códigos de país y provincia que se usan habitualmente. En las aplicaciones creadas después de febrero del 2020, REGION_ID.r se incluye en las URLs de App Engine. En las aplicaciones creadas antes de esa fecha, el ID de región es opcional en la URL.

Más información sobre los IDs de región

Añade Firebase a tu Google Cloud proyecto, configura los ajustes de autenticación y, a continuación, añade Firebase a tu servicio web.

Si añades Firebase a tu servicio web, podrás autenticar a los usuarios para ofrecerles una experiencia personalizada.

Antes de empezar

Si has completado todos los pasos anteriores de esta guía, puedes saltarte esta sección. De lo contrario, realice una de las siguientes acciones:

  • Empieza por Crear una aplicación Python 3 y sigue todos los pasos hasta llegar a este.

  • Si ya tienes un Google Cloud proyecto, puedes continuar descargando una copia del servicio web:

    1. Descarga el repositorio de la aplicación de muestra con Git:

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

      También puedes descargar el ejemplo como un archivo ZIP y, a continuación, extraerlo.

    2. Ve al directorio que contiene una copia de los archivos del paso anterior:

      cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1

Añadir Firebase a tu Google Cloud proyecto

Para usar la autenticación de Firebase con tu servicio web, añade Firebase a tu Google Cloud proyecto y configura los ajustes de autenticación.

  1. Añade Firebase a tu proyecto Google Cloud con la herramienta Añadir proyecto de la consola de Firebase.

    También puedes usar una cuenta de Firebase con otro nombre que no esté asociada a tu proyecto Google Cloud .

  2. Habilita los proveedores de inicio de sesión de autenticación en la consola de Firebase. Para este servicio web, habilita los proveedores de inicio de sesión Correo/Contraseña y Google:

    1. Haz clic en Compilación > Autenticación > Método de inicio de sesión.

    2. En Proveedores de inicio de sesión, selecciona Correo electrónico/Contraseña.

    3. Activa el botón Habilitar para usar la autenticación con correo y contraseña y haz clic en Guardar.

  3. Para que Firebase pueda autenticar correctamente, tu dominio debe estar autorizado para las redirecciones de OAuth. Para autorizar tu dominio, sigue estos pasos:

    1. Selecciona Compilación > Autenticación > Configuración.

    2. En Dominios autorizados, en la página Configuración, haz clic en Añadir dominio.

    3. Introduce el dominio de tu aplicación en App Engine, sin incluir el prefijo http://:

      PROJECT_ID. REGION_ID.r.appspot.com donde PROJECT_ID es el ID de tu Google Cloud proyecto.

Añadir Firebase a tu servicio web

Para añadir Firebase a tu servicio web, copia el fragmento de código personalizado, los archivos JavaScript y los archivos CSS de tu proyecto de Firebase en tu servicio web:

  1. Ve a la consola de Firebase y selecciona tu proyecto.

  2. En la página de descripción general del proyecto, debajo del texto Empieza añadiendo Firebase a tu aplicación, selecciona Web. Si ya has añadido una aplicación al proyecto, es posible que no veas este texto. En ese caso, ve a la página General (General) de la sección Project Overview (Resumen del proyecto) > Project settings (Configuración del proyecto) de tu aplicación, desplázate hacia abajo y selecciona Add app (Añadir aplicación).

  3. Una vez que la aplicación se haya registrado, se mostrará un fragmento de código personalizado. Copia el contenido del fragmento. Para volver a ver este fragmento de código más adelante, vaya a la página Configuración del proyecto de su aplicación Firebase.

  4. Actualiza tu archivo templates/index.html siguiendo estos pasos:

    1. Añade las siguientes líneas a la etiqueta <head>:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. Añade el fragmento de código personalizado a la etiqueta <body>.

      En este tutorial, puedes añadir el código a la parte superior del cuerpo, ya que el único contenido de templates/index.html es un ejemplo de servicios de Firebase. En tu entorno de producción, te recomendamos que añadas el fragmento de código a la parte inferior del cuerpo, pero antes de usar cualquier servicio de Firebase.

      El código personalizado tendrá un aspecto similar al de este fragmento de ejemplo:

      <!-- MOCK SNIPPET: DO NOT COPY -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

    3. Sustituye el elemento TODO del fragmento de código anterior por la siguiente etiqueta de secuencia de comandos para habilitar el componente Authentication de Firebase:

       <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>

      Estas direcciones de secuencias de comandos se describen en la documentación de la interfaz de Firebase para Web.

    4. Sustituye el resto del cuerpo por el siguiente código, que usarás más adelante en esta guía para mostrar los datos del usuario autenticado:

      <div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
	{% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

Pasos siguientes

Ahora que has añadido Firebase a tu proyecto y a tu servicio web, puedes añadir código a tu servicio web para que pueda autenticar a los usuarios. Google Cloud

Anterior
Gestionar datos
Siguiente
Autenticar usuarios