Aprobación de estado en acciones de correo electrónico

Puede pasar el estado a través de una URL continua al enviar acciones de correo electrónico para restablecer la contraseña o verificar el correo electrónico de un usuario. Esto le brinda al usuario la posibilidad de volver a la aplicación una vez completada la acción. Además, puede especificar si desea manejar el enlace de acción de correo electrónico directamente desde una aplicación móvil cuando está instalada en lugar de una página web.

Esto puede resultar extremadamente útil en los siguientes escenarios comunes:

  • Un usuario que no ha iniciado sesión actualmente puede estar intentando acceder a contenido que requiere que el usuario inicie sesión. Sin embargo, es posible que el usuario haya olvidado su contraseña y, por lo tanto, active el flujo de restablecimiento de contraseña. Al final del flujo, el usuario espera volver a la sección de la aplicación a la que intentaba acceder.

  • Una aplicación solo puede ofrecer acceso a cuentas verificadas. Por ejemplo, un boletín puede requerir que el usuario verifique su correo electrónico antes de suscribirse. El usuario pasaría por el flujo de verificación por correo electrónico y esperaría volver a la aplicación para completar su suscripción.

  • En otros casos, es posible que el usuario haya iniciado el flujo desde su dispositivo móvil y espere, después de la verificación, volver a su aplicación móvil en lugar del navegador.

Tener la capacidad de pasar el estado a través de una URL continua es una característica poderosa que proporciona Firebase Auth y que puede mejorar significativamente la experiencia del usuario.

Pasar estado/continuar URL en acciones de correo electrónico

Para pasar de forma segura una URL continua, el dominio de la URL deberá agregarse como dominio autorizado en Firebase console . Esto se hace en la sección Autenticación agregando este dominio a la lista de dominios autorizados en la pestaña Método de inicio de sesión si aún no está allí.

Se debe proporcionar una instancia firebase.auth.ActionCodeSettings al enviar un correo electrónico de restablecimiento de contraseña o un correo electrónico de verificación. Esta interfaz toma los siguientes parámetros:

Parámetro Tipo Descripción
url cadena

Establece el enlace (estado/continuar URL) que tiene diferentes significados en diferentes contextos:

  • Cuando el enlace se maneja en los widgets de acción web, este es el enlace profundo en el parámetro de consulta continueUrl .
  • Cuando el vínculo se maneja directamente en la aplicación, este es el parámetro de consulta continueUrl en el vínculo profundo del vínculo dinámico.
iOS ({bundleId: cadena}|indefinido) Establece el ID del paquete de iOS. Esto intentará abrir el enlace en una aplicación de iOS si está instalada. La aplicación de iOS debe estar registrada en la consola.
android ({nombre del paquete: cadena, aplicación de instalación: booleano|indefinido, versión mínima: cadena|indefinido}|indefinido) Establece el nombre del paquete de Android. Esto intentará abrir el enlace en una aplicación de Android si está instalada. Si se pasa installApp , especifica si se debe instalar la aplicación de Android si el dispositivo la admite y la aplicación aún no está instalada. Si este campo se proporciona sin un packageName , se genera un error que explica que el packageName debe proporcionarse junto con este campo. Si se especifica minimumVersion y se instala una versión anterior de la aplicación, se lleva al usuario a Play Store para actualizar la aplicación. La aplicación de Android debe estar registrada en la consola.
handleCodeInApp (booleano|indefinido) Si el enlace de acción del correo electrónico se abrirá primero en una aplicación móvil o en un enlace web. El valor predeterminado es falso. Cuando se establece en verdadero, el enlace del código de acción se enviará como un enlace universal o un enlace de aplicación de Android y la aplicación lo abrirá si está instalada. En el caso falso, el código se enviará primero al widget web y luego, al continuar, se redireccionará a la aplicación si está instalada.
dynamicLinkDomain (cadena|indefinido) Establece el dominio (o subdominio) del enlace dinámico que se utilizará para el enlace actual si se va a abrir mediante Firebase Dynamic Links. Como se pueden configurar varios dominios de vínculos dinámicos por proyecto, este campo brinda la posibilidad de elegir uno explícitamente. Si no se proporciona ninguno, el primer dominio se utiliza de forma predeterminada.

El siguiente ejemplo ilustra cómo enviar un enlace de verificación por correo electrónico que se abrirá primero en una aplicación móvil como un enlace dinámico de Firebase utilizando el dominio de enlace dinámico personalizado example.page.link (aplicación de iOS com.example.ios o aplicación de Android com.example.android donde se instalará la aplicación si aún no está instalada y la versión mínima es 12 ). El enlace profundo contendrá la carga útil de la URL de continuación https://www.example.com/?email=user@example.com .

var actionCodeSettings = {
  url: 'https://www.example.com/?email=' + firebase.auth().currentUser.email,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  handleCodeInApp: true,
  // When multiple custom dynamic link domains are defined, specify which
  // one to use.
  dynamicLinkDomain: "example.page.link"
};
firebase.auth().currentUser.sendEmailVerification(actionCodeSettings)
  .then(function() {
    // Verification email sent.
  })
  .catch(function(error) {
    // Error occurred. Inspect error.code.
  });

Firebase Auth utiliza Firebase Dynamic Links cuando envía un enlace que debe abrirse en una aplicación móvil. Para utilizar esta función, los enlaces dinámicos deben configurarse en Firebase Console.

  1. Habilite los enlaces dinámicos de Firebase:

    1. En Firebase console , abre la sección Enlaces dinámicos .
    2. Si aún no ha aceptado los términos de Dynamic Links y no ha creado un dominio de Dynamic Links, hágalo ahora.

      Si ya creaste un dominio de Dynamic Links, toma nota. Un dominio de Dynamic Links normalmente se parece al siguiente ejemplo:

      example.page.link

      Necesitará este valor cuando configure su aplicación Apple o Android para interceptar el enlace entrante.

  2. Configuración de aplicaciones de Android:

    1. Si planeas manejar estos enlaces desde tu aplicación de Android, el nombre del paquete de Android debe especificarse en la configuración del proyecto de Firebase Console. Además, es necesario proporcionar el SHA-1 y SHA-256 del certificado de solicitud.
    2. También deberá configurar el filtro de intención para el enlace profundo en su archivo AndroidManifest.xml .
    3. Para obtener más información sobre esto, consulte las instrucciones para recibir enlaces dinámicos de Android .
  3. Configuración de aplicaciones de iOS:

    1. Si planeas manejar estos enlaces desde tu aplicación de iOS, el ID del paquete de iOS debe especificarse en la configuración del proyecto de Firebase Console. Además, también es necesario especificar el ID de la App Store y el ID del equipo de desarrolladores de Apple.
    2. También deberá configurar el dominio de enlace universal FDL como dominio asociado en las capacidades de su aplicación.
    3. Si planea distribuir su aplicación a las versiones de iOS 8 y anteriores, deberá configurar su ID de paquete de iOS como un esquema personalizado para las URL entrantes.
    4. Para obtener más información sobre esto, consulte las instrucciones para recibir enlaces dinámicos de iOS .

Manejo de acciones de correo electrónico en una aplicación web

Puede especificar si desea manejar primero el enlace del código de acción desde una aplicación web y luego redirigirlo a otra página web o aplicación móvil después de completarlo correctamente, siempre que la aplicación móvil esté disponible. Esto se hace configurando handleCodeInApp en false en el objeto firebase.auth.ActionCodeSettings . Si bien no se requiere un ID de paquete de iOS o un nombre de paquete de Android, proporcionarlos permitirá al usuario redirigir nuevamente a la aplicación especificada al completar el código de acción de correo electrónico.

La URL web utilizada aquí es la configurada en la sección de plantillas de acciones de correo electrónico. Se proporciona uno predeterminado para todos los proyectos. Consulte Personalización de controladores de correo electrónico para obtener más información sobre cómo personalizar el controlador de acciones de correo electrónico.

En este caso, el enlace dentro del parámetro de consulta continueUrl será un enlace FDL cuya carga útil es la URL especificada en el objeto ActionCodeSettings . Si bien puede interceptar y manejar el enlace entrante desde su aplicación sin ninguna dependencia adicional, le recomendamos utilizar la biblioteca cliente FDL para analizar el enlace profundo por usted.

Al manejar acciones de correo electrónico, como la verificación de correo electrónico, el código de acción del parámetro de consulta oobCode debe analizarse desde el enlace profundo y luego aplicarse mediante applyActionCode para que el cambio surta efecto, es decir, que se verifique el correo electrónico.

Manejo de acciones de correo electrónico en una aplicación móvil

Puede especificar si desea manejar primero el enlace del código de acción dentro de su aplicación móvil, siempre que esté instalada. Con las aplicaciones de Android, también tiene la posibilidad de especificar a través de android.installApp que la aplicación se instalará si el dispositivo la admite y aún no está instalada. Si se hace clic en el enlace desde un dispositivo que no es compatible con la aplicación móvil, se abre desde una página web. Esto se hace configurando handleCodeInApp en true en el objeto firebase.auth.ActionCodeSettings . También será necesario especificar el nombre del paquete de Android de la aplicación móvil o el ID del paquete de iOS.

La URL web alternativa que se utiliza aquí, cuando no hay una aplicación móvil disponible, es la configurada en la sección de plantillas de acciones de correo electrónico. Se proporciona uno predeterminado para todos los proyectos. Consulte Personalización de controladores de correo electrónico para obtener más información sobre cómo personalizar el controlador de acciones de correo electrónico.

En este caso, el enlace de la aplicación móvil enviado al usuario será un enlace FDL cuya carga útil es la URL del código de acción, configurada en la Consola, con los parámetros de consulta oobCode , mode , apiKey y continueUrl . Esta última será la URL original especificada en el objeto ActionCodeSettings . Si bien puede interceptar y manejar el enlace entrante desde su aplicación sin ninguna dependencia adicional, le recomendamos utilizar la biblioteca cliente FDL para analizar el enlace profundo por usted. El código de acción se puede aplicar directamente desde una aplicación móvil de forma similar a como se maneja desde el flujo web descrito en la sección de personalización de controladores de correo electrónico .

Al manejar acciones de correo electrónico, como la verificación de correo electrónico, el código de acción del parámetro de consulta oobCode debe analizarse desde el enlace profundo y luego aplicarse mediante applyActionCode para que el cambio surta efecto, es decir, que se verifique el correo electrónico.