Agrega Firebase al servicio web

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 Firebase al proyecto de Google Cloud, establece la configuración de autenticación y, luego, agrega Firebase al servicio web.

Esto te permite autenticar los usuarios para que cada uno tenga una experiencia personalizada.

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:

Comienza desde Compila una app de Python 3 y completa todos los pasos previos a este.
Si ya tienes un proyecto de Google Cloud, puedes descargar una copia del servicio web para continuar:
1. Descarga el repositorio de aplicaciones de muestra con Git:
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  Si no, puedes descargar la muestra como un archivo ZIP y, luego, descomprimirlo.
2. Dirígete 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
```

Agrega Firebase al proyecto de Google Cloud

Para usar Firebase Authentication con el servicio web, agrega Firebase al proyecto de Google Cloud y establece la configuración de autenticación.

Agrega Firebase al proyecto de Google Cloud existente mediante la herramienta Agregar proyecto en Firebase console.

También puedes optar por usar una cuenta de Firebase con un nombre diferente, que no esté asociado con el proyecto de Google Cloud existente.
Habilita la autenticación de proveedores de inicio de sesión en Firebase console. Para este servicio web, habilitarás Correo electrónico/Contraseña (Email/Password) y Google como proveedores de inicio de sesión:
1. Haz clic en Compilar > Autenticación (Authentication) > Método de inicio de sesión (Sign-in method).
2. En Proveedores de inicio de sesión (Sign-in providers), coloca el cursor sobre Correo electrónico/Contraseña (Email/Password) y haz clic en el ícono de lápiz.
3. Habilita el botón Activar (Enable) para usar la autenticación con Correo electrónico/Contraseña (Email/Password).
4. Luego de habilitar el proveedor, haz clic en Guardar (Save).
5. Haz lo mismo para el proveedor de inicio de sesión Google.
  
  Sugerencias: Para obtener más información sobre la habilitación de otros proveedores, consulta las secciones “Antes de comenzar” de las guías de Facebook, Twitter, y GitHub en Firebase.
A fin de que Firebase realice la autenticación de manera correcta, el dominio debe tener autorización para los redireccionamientos de OAuth. Para autorizar tu dominio, haz lo siguiente:
1. Selecciona Compilar > Autenticación > Configuración.
2. En Dominios autorizados en la página Configuración, haz clic en Agregar dominio.
3. Ingresa el dominio de la app en App Engine, sin incluir el prefijo http://:
  
  PROJECT_ID.REGION_ID.r.appspot.com, donde PROJECT_ID es el ID del proyecto de Google Cloud.

Agrega Firebase al servicio web

Para agregar Firebase al servicio web, copia el fragmento de código personalizado del proyecto de Firebase y los archivos JavaScript y CSS en el servicio web:

Dirígete a Firebase console y selecciona el proyecto.
En la página de descripción general del proyecto, debajo del texto Get started by adding Firebase to your app, selecciona Web. Si ya agregaste una app al proyecto, es posible que no veas este texto. En su lugar, navega a la página Descripción general del proyecto > Configuración del proyecto > General de la app existente, desplázate hacia abajo y selecciona Agregar app.
Una vez que se registre la app, se mostrará un fragmento de código personalizado. Copia el contenido del fragmento. Si luego quieres volver a ver este fragmento de código, navega a la página de Configuración del proyecto de la app de Firebase.

Completa los siguientes pasos para actualizar el archivo templates/index.html:

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

Agrega el fragmento de código personalizado a la etiqueta <body>.

Para este instructivo, puedes agregar el código en la parte superior del cuerpo, ya que el único contenido en templates/index.html es un ejemplo de los servicios de Firebase. En el entorno de producción, te recomendamos agregar el fragmento de código en la parte inferior del cuerpo, pero antes de usar cualquier servicio de Firebase.

El código personalizado se verá similar a este fragmento ficticio:

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

Reemplaza el TODO en el fragmento anterior por la siguiente etiqueta de secuencia de comandos para habilitar el componente de autenticación de Firebase:
```
 <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
 
```
Estas direcciones de secuencias de comandos se documentan en la IU de Firebase para la documentación Web.

Reemplaza 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 autenticados:

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

Próximos pasos

Ahora que agregaste Firebase al proyecto de Google Cloud y al servicio web, estás listo para agregar código al servicio web a fin de habilitarlo y, así, autenticar usuarios.

Manejar datos

Autenticar usuarios