Funciones de autenticación avanzada

1. Configurar

Obtén el código fuente

En este codelab, comenzarás con una versión de la app de ejemplo de Friendly Chat que está casi completa, por lo que lo primero que debes hacer es clonar el código fuente:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Luego, ve al directorio security-start, en el que trabajarás durante el resto de este codelab:

$ cd codelab-friendlychat-web/security-start

Ahora, instala las dependencias para poder ejecutar el código. Si tienes una conexión a Internet lenta, el proceso podría tardar uno o dos minutos:

$ npm install && (cd functions && npm install)

Conoce este repo

El directorio security-solution/ contiene el código completo de la app de ejemplo. En el directorio security-start, trabajarás en el codelab, y faltan algunas partes importantes de la implementación de la autenticación. Los archivos y las funciones clave en security-start/ y security-solution/ son los siguientes:

• functions/index.js contiene código de Cloud Functions y es donde escribirás funciones de bloqueo de autenticación.
• public/: Contiene los archivos estáticos para tu app de chat.
• public/scripts/main.js, donde se compila el código JS de tu app de chat (src/index.js) en
• src/firebase-config.js: Contiene el objeto de configuración de Firebase que se usa para inicializar la app de chat.
• src/index.js: El código JS de tu app de chat

Obtén Firebase CLI

Emulator Suite forma parte de Firebase CLI (interfaz de línea de comandos), que se puede instalar en tu máquina con el siguiente comando:

$ npm install -g firebase-tools@latest

Compila el código JavaScript con webpack, que creará el archivo main.js dentro del directorio public/scripts/.

webpack build

A continuación, confirma que tienes la versión más reciente de la CLI. Este codelab funciona con la versión 11.14 o una posterior.

$ firebase --version
11.14.2

Conéctate a tu proyecto de Firebase

Si no tienes un proyecto de Firebase, crea uno nuevo en Firebase console. Toma nota del ID del proyecto que elijas, ya que lo necesitarás más adelante.

Ahora debes conectar este código a tu proyecto de Firebase. Primero, ejecuta el siguiente comando para acceder a Firebase CLI:

$ firebase login

Luego, ejecuta el comando siguiente para crear un alias del proyecto. Reemplaza $YOUR_PROJECT_ID por el ID del proyecto de Firebase.

$ firebase use $YOUR_PROJECT_ID

Ya está todo listo para que ejecutes la app.

2. Ejecuta los emuladores

En esta sección, ejecutarás la app de manera local. Esto significa que es momento de iniciar Emulator Suite.

Cómo iniciar los emuladores

Desde el directorio del código fuente del codelab, ejecuta el siguiente comando para iniciar los emuladores:

$ firebase emulators:start

Esto publicará tu app en http://127.0.0.1:5170 y volverá a compilar tu código fuente de manera continua a medida que realices cambios. Solo deberás realizar una actualización forzada (Ctrl-shift-r) localmente en tu navegador para ver los cambios.

Deberías ver un resultado como este:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Cuando veas el mensaje All Emulators ready, significa que la app está lista para usarse.

3. Implementación de la MFA

La MFA se implementó parcialmente en este repo. Agregarás el código para primero inscribir a un usuario en MFA y, luego, para solicitar a los usuarios inscritos en MFA un segundo factor.

NOTA: Estos son los métodos principales que usarás para implementar la MFA:

• getMultiFactorResolver(): Obtiene un objeto MultiFactorResolver que se usa para facilitar el acceso de los usuarios cuando necesitan proporcionar un segundo factor.
• verifyPhoneNumber(): envía un mensaje de verificación al teléfono del usuario para la inscripción en la MFA y el acceso.
• resolveSignIn(): Se usa para completar el acceso después de que el usuario le proporciona el código de verificación que se le envió.
• enroll(): Se usa para completar la inscripción en la MFA después de que el usuario proporciona el código de verificación que se le envió.

En tu editor, abre el archivo src/index.js y busca el método startEnrollMultiFactor(). Agrega el siguiente código para configurar el verificador reCAPTCHA que evitará el abuso del teléfono (el verificador reCAPTCHA está configurado como invisible y no será visible para los usuarios):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Luego, busca el método finishEnrollMultiFactor() y agrega lo siguiente para inscribir el segundo factor:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

A continuación, busca la función signIn y agrega el siguiente flujo de control que solicita a los usuarios inscritos en la MFA que ingresen su segundo factor:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

El resto de la implementación, incluidas las funciones invocadas aquí, ya está completa. Para ver cómo funcionan, explora el resto del archivo.

4. Prueba acceder con MFA en los emuladores

Ahora prueba la implementación de la MFA. Asegúrate de que los emuladores sigan ejecutándose y visita la app alojada de forma local en localhost:5170. Intenta acceder y, cuando se te solicite que proporciones el código MFA, verás el código MFA en la ventana de tu terminal.

Debido a que los emuladores son totalmente compatibles con la autenticación de varios factores, tu entorno de desarrollo puede ser completamente independiente.

Para obtener más información sobre la implementación de la MFA, consulta nuestros documentos de referencia.

5. Crea una función de bloqueo

Algunas aplicaciones están pensadas para que las utilice solo un grupo específico de usuarios. En esos casos, te recomendamos que puedas crear requisitos personalizados para que un usuario se registre en tu app o acceda a ella.

Eso es lo que proporcionan las funciones de bloqueo: una forma de crear requisitos de autenticación personalizados. Son Cloud Functions, pero, a diferencia de la mayoría de las funciones, se ejecutan de forma síncrona cuando un usuario intenta registrarse o acceder.

NOTA: Una función de bloqueo puede aceptar un usuario sin cambios, aceptarlo y cambiarlo, lo cual es útil para aplicar reclamaciones personalizadas o rechazarlo.

Hay dos eventos que pueden activar una función de bloqueo:

• Eventos beforeUserCreated: Se activan antes de que se cree una cuenta de usuario. Se pueden usar para especificar los requisitos para que los usuarios creen una cuenta.
• Eventos beforeUserSignedIn: Se activan antes de que acceda un usuario; se pueden usar para especificar los requisitos de acceso de los usuarios.

Para crear una función de bloqueo, abre functions/index.js en tu editor y busca la función beforecreated comentada.

Reemplázala con este código que solo permite que los usuarios con el dominio example.com creen una cuenta:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Prueba la función de bloqueo en los emuladores

Para probar la función de bloqueo, asegúrate de que los emuladores se estén ejecutando y sal de la sesión de la app web en localhost:5170.

Luego, intenta crear una cuenta con una dirección de correo electrónico que no termine en example.com. La función de bloqueo impedirá que la operación se realice correctamente.

Vuelve a intentarlo con una dirección de correo electrónico que termine en example.com. La cuenta se creará correctamente.

Con las funciones de bloqueo, puedes crear las restricciones que necesites en torno a la autenticación. Para obtener más información, consulta los documentos de referencia.

Resumen

Buen trabajo. Agregaste la autenticación de varios factores a una app web para ayudar a los usuarios a mantener sus cuentas seguras y, luego, creaste requisitos personalizados para que los usuarios se registren con funciones de bloqueo. ¡Ganaste un GIF!