Funciones de autenticación avanzadas

1. Configurar

Obtener el código fuente

En este codelab, comienzas con una versión de la aplicación de muestra 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, vaya al directorio security-start , donde trabajará durante el resto de este codelab:

$ cd codelab-friendlychat-web/security-start

Ahora, instala las dependencias para que puedas ejecutar el código. Si tienes una conexión a Internet más lenta, esto puede tardar uno o dos minutos:

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

Conozca este repositorio

El directorio security-solution/ contiene el código completo de la aplicación de muestra. El directorio security-start es donde trabajará en el codelab y le faltan algunas partes importantes de la implementación de la autenticación. Los archivos y funciones clave en security-start/ y security-solution/ son:

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

Obtenga la CLI de Firebase

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

$ npm install -g firebase-tools@latest

Compile javascript con webpack, que creará main.js dentro del directorio public/scripts/.

webpack build

A continuación, confirme que tiene la última versión de la CLI. Este codelab funciona con la versión 11.14 o superior.

$ firebase --version
11.14.2

Conéctate a tu proyecto de Firebase

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

Ahora necesitas conectar este código a tu proyecto de Firebase. Primero ejecute el siguiente comando para iniciar sesión en Firebase CLI:

$ firebase login

Luego ejecute el siguiente comando para crear un alias de proyecto. Reemplace $YOUR_PROJECT_ID con el ID de su proyecto de Firebase.

$ firebase use $YOUR_PROJECT_ID

¡Ahora estás listo para ejecutar la aplicación!

2. Ejecute los emuladores

En esta sección, ejecutará la aplicación localmente. Esto significa que es hora de iniciar Emulator Suite.

Iniciar los emuladores

Desde dentro del directorio fuente de codelab, ejecute el siguiente comando para iniciar los emuladores:

$ firebase emulators:start

Esto servirá a su aplicación en http://127.0.0.1:5170 y reconstruirá continuamente su código fuente a medida que realice cambios. Sólo necesitarás realizar una actualización completa (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

Una vez que vea el mensaje Todos los emuladores listos , la aplicación estará lista para usar.

3. Implementación de la ayuda macrofinanciera

MFA se ha implementado parcialmente en este repositorio. Agregará el código para inscribir primero a un usuario en MFA y luego solicitar a los usuarios inscritos en MFA un segundo factor.

NOTA: Estos son los métodos principales que utilizará para implementar MFA:

• getMultiFactorResolver() : obtiene un objeto MultiFactorResolver que se utiliza para facilitar el inicio de sesión del usuario cuando necesita proporcionar un segundo factor.
• verifyPhoneNumber() : envía un mensaje de verificación al teléfono del usuario tanto para la inscripción en MFA como para el inicio de sesión.
• resolveSignIn() : se utiliza para completar el inicio de sesión después de que el usuario haya proporcionado el código de verificación que se le envió.
• enroll() : se utiliza para completar la inscripción en MFA después de que el usuario haya proporcionado el código de verificación que se le envió.

En su editor, abra el archivo src/index.js y busque el método startEnrollMultiFactor() . Agregue el siguiente código para configurar el verificador de reCAPTCHA que evitará el abuso del teléfono (el verificador de 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, busque el método finishEnrollMultiFactor() y agregue lo siguiente para registrar 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, busque la función signIn y agregue el siguiente flujo de control que solicita a los usuarios inscritos en 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, explore el resto del archivo.

4. Pruebe iniciar sesión con MFA en los emuladores.

¡Ahora pruebe la implementación de MFA! Asegúrese de que sus emuladores aún se estén ejecutando y visite la aplicación alojada localmente en localhost:5170 . Intente iniciar sesión y, cuando se le solicite que proporcione el código MFA, verá el código MFA en la ventana de su terminal.

Dado que los emuladores son totalmente compatibles con Multi-Factor Auth, su entorno de desarrollo puede ser completamente autónomo.

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

5. Crea una función de bloqueo.

Algunas aplicaciones están destinadas a ser utilizadas únicamente por un grupo específico de usuarios. En esos casos, desea poder crear requisitos personalizados para que un usuario se registre o inicie sesión en su aplicación.

Eso es lo que proporcionan las funciones de bloqueo: una forma de crear requisitos de autenticación personalizados. Son funciones de la nube, pero a diferencia de la mayoría de las funciones, se ejecutan de forma sincrónica cuando un usuario intenta registrarse o iniciar sesión.

NOTA: Una función de bloqueo puede aceptar un usuario sin cambios, aceptar y cambiar un usuario, lo cual es útil para aplicar reclamos personalizados o rechazar al usuario.

Hay dos eventos que pueden desencadenar 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 un usuario inicie sesión; se pueden usar para especificar los requisitos para que los usuarios inicien sesión

Para crear una función de bloqueo, abra functions/index.js en su editor y busque la función comentada beforecreated .

Reemplácelo con este código que permite que solo los usuarios con un dominio de ejemplo.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. Pruebe la función de bloqueo en los emuladores.

Para probar la función de bloqueo, asegúrese de que sus emuladores se estén ejecutando y, en la aplicación web en localhost:5170 , cierre sesión.

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.

Ahora, inténtalo de nuevo con una dirección de correo electrónico que termine en example.com . La cuenta se creará exitosamente.

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

Resumen

¡Gran trabajo! Agregó autenticación multifactor a una aplicación web para ayudar a los usuarios a mantener su cuenta segura y luego creó requisitos personalizados para que los usuarios se registraran usando funciones de bloqueo. ¡Definitivamente te has ganado un gif!