Cómo agregar inicio de sesión con número de teléfono vía OTP en WordPress

¿Recuerdas cuando el correo electrónico y la contraseña eran la única forma de iniciar sesión en sitios web? Los tiempos han cambiado y ahora muchos usuarios esperan la comodidad de iniciar sesión con su número de teléfono.

Después de ayudar a diferentes personas a configurar sistemas de inicio de sesión basados en teléfono en sus sitios de WordPress, he aprendido qué métodos funcionan mejor y cuáles evitar. He probado todo, desde plugins premium hasta soluciones personalizadas para encontrar las opciones más confiables.

En esta guía, compartiré cómo agregar el inicio de sesión con número de teléfono y verificación OTP a tu sitio de WordPress. Ya sea que tengas un sitio de pequeña empresa o una gran plataforma de membresía, encontrarás una solución que se ajuste a tus necesidades.

¿Por qué permitir que los usuarios de WordPress inicien sesión con su número de teléfono?

Permitir que los usuarios inicien sesión a través de un código de un solo uso (OTP) por número de teléfono es una práctica común. Elimina la necesidad de recordar contraseñas complejas mientras mantiene sus cuentas seguras.

Aquí te explicamos por qué deberías considerar agregar el inicio de sesión por teléfono a tu sitio de WordPress:

• Mejor seguridad: A diferencia de las contraseñas estáticas, los OTP caducan después de un solo uso, lo que hace que los inicios de sesión sean significativamente más seguros.
• Inicios de sesión más rápidos: No es necesario escribir contraseñas largas. Un código rápido enviado a un teléfono permite a los usuarios iniciar sesión al instante.
• Menos restablecimientos de contraseña: Si administra un sitio comunitario, sus usuarios ya no tendrán que restablecer contraseñas olvidadas, lo que le ahorrará tiempo y tickets de soporte.
• Mejor experiencia de usuario: Un inicio de sesión fluido mantiene a las personas contentas y con más probabilidades de regresar a su sitio.
• Ideal para usuarios móviles: Más personas navegan desde sus teléfonos. Permitirles iniciar sesión con un código hace que el proceso sea perfecto.

Ahora, veamos cómo permitir fácilmente el inicio de sesión con número de teléfono a través de OTP en WordPress.

Cómo agregar inicio de sesión con número de teléfono vía OTP en WordPress

Puede agregar fácilmente un inicio de sesión con número de teléfono a WordPress utilizando el plugin gratuito Login with Phone Number.

Sin embargo, dado que WordPress no envía mensajes SMS por defecto, también necesitará un servicio de terceros como Firebase o Twilio para gestionar la entrega de OTP.

Primero, necesita instalar y activar el plugin gratuito Login With Phone Number. Para obtener detalles, consulte este tutorial sobre cómo instalar un plugin de WordPress.

Al activar el plugin, visita la página Configuración de inicio de sesión » General desde el panel de WordPress y marca la opción ‘Habilitar inicio de sesión con número de teléfono’.

Después de eso, puedes agregar códigos de país para todas las regiones donde tus usuarios inician sesión. Por defecto, el plugin incluye los códigos de país de número de teléfono para todos los países.

Recomiendo dejar esta configuración como está. Asegura que tu sitio permanezca accesible para una audiencia global.

A continuación, necesitas marcar la opción ‘Habilitar inicio de sesión por correo electrónico’ si deseas permitir el inicio de sesión por correo electrónico para tus usuarios.

Recomiendo esta configuración si tiene usuarios existentes que están acostumbrados a iniciar sesión con su correo electrónico. Al hacerlo, se asegurará de que no se frustren una vez que se habilite el inicio de sesión con número de teléfono, ya que aún podrán iniciar sesión con su correo electrónico.

Puedes marcar la opción ‘Forzar obtención de correo electrónico después del número de teléfono’. Esta configuración asegura que los nuevos usuarios deban proporcionar su dirección de correo electrónico antes de poder completar el registro. Es especialmente útil si ya tienes una lista de correo y quieres recopilar correos de nuevos usuarios.

También puedes habilitar el registro de usuarios con un número de teléfono. Una vez hecho esto, escribe la longitud del código de activación que se les dará a los usuarios.

Después de eso, tienes que desplazarte hacia abajo y encontrar la opción ‘Habilitar temporizador’. Haz clic para habilitarla, luego establece el límite de tiempo para que los usuarios ingresen el OTP.

Por ejemplo, si lo configuras a 60 segundos, los usuarios tendrán un minuto para ingresar su código antes de que expire. Luego, haz clic en el botón ‘Guardar cambios’ para almacenar tu configuración.

Continúa y cambia a la pestaña ‘Pasarela’ desde la parte superior. Aquí, debes seleccionar un proveedor de servicios de SMS para el inicio de sesión OTP con número de teléfono.

Elegiré Firebase para este tutorial. Es un servicio de Google que te permite enviar códigos de acceso de un solo uso a los teléfonos de los usuarios para un inicio de sesión seguro.

Es una buena idea revisar su página de precios para obtener los detalles más recientes. Sin embargo, también puedes elegir opciones como Twilio, WhatsApp, Alibaba SMS y más.

Ten en cuenta que algunas de las opciones solo estarán disponibles en el plan Pro.

Una vez que elijas Firebase, necesitarás agregar su clave API y configuración.

Para esto, necesitas visitar la Consola de Firebase y seleccionar la opción ‘Crear un proyecto de Firebase’.

Esto te llevará a una nueva pantalla, donde deberás agregar un nombre de proyecto. Puedes llamarlo como quieras para que te ayude a recordar para qué lo estás usando.

Luego, haz clic en el botón ‘Continuar’.

Firebase ahora te pedirá permiso para habilitar Google Analytics para el proyecto.

Una vez que hayas permitido eso, debes seleccionar 'Cuenta predeterminada para Firebase' del menú desplegable y hacer clic en el botón 'Crear proyecto'.

Ahora serás llevado a la página de Descripción general del proyecto. Aquí, navega a la pestaña Crear » Autenticación desde la columna izquierda.

Continúa y haz clic en el botón 'Empezar'.

Una vez que hagas eso, aparecerán nuevas configuraciones en la pantalla. Desde aquí, busca 'Teléfono' en la lista de proveedores de inicio de sesión, haz clic en él y luego activa el interruptor 'Habilitar'.

Esto permitirá a los usuarios iniciar sesión con un número de teléfono móvil utilizando la verificación telefónica del SDK de Firebase. Luego, haz clic en el botón 'Guardar'.

Ahora, cambia a la pestaña 'Configuración' y selecciona la opción 'Dominios autorizados' en la columna izquierda. Aquí, tienes que hacer clic en el botón 'Agregar dominio'.

Esto abrirá un cuadro de diálogo donde necesitas agregar el nombre de dominio de tu sitio web.

Esta es una medida de seguridad importante que asegura que solo tu sitio web tenga permiso para conectarse a este proyecto de Firebase, evitando el uso no autorizado por parte de otros.

Después de eso, simplemente haz clic en el ícono de configuración junto a Descripción general del proyecto en la parte superior y selecciona la pestaña 'Configuración del proyecto'.

Luego, desplázate hacia abajo hasta la sección 'Tus aplicaciones' y selecciona el ícono web.

Ahora necesitarás agregar un nombre para tu aplicación y hacer clic en el botón 'Registrar aplicación'. Cuando lo hagas, Firebase generará un código de configuración especial para su SDK.

'SDK' significa Kit de Desarrollo de Software, y este código contiene todas las configuraciones necesarias para conectar tu sitio de WordPress a tu proyecto de Firebase.

Desde aquí, simplemente haz clic en el botón 'Continuar a la consola'.

Una vez que estés de vuelta en la página de Descripción general del proyecto, simplemente copia la 'Clave API web' y guárdala en un lugar seguro.

Ahora, desplázate hacia abajo hasta la sección ‘Tus aplicaciones’ donde se mostrarán los detalles de tu aplicación más reciente en la pantalla.

Aquí, elige el botón de radio ‘Config’ para mostrar tu Firebase SDK como configuración. Simplemente cópialo y guárdalo en un lugar seguro.

Después de eso, debes regresar a tu panel de WordPress y agregar la clave API y la configuración de Firebase en sus respectivos campos en la configuración del plugin Iniciar sesión con número de teléfono.

A continuación, haz clic en el botón 'Guardar cambios' para almacenar tu configuración.

Una vez hecho esto, abre la página de WordPress donde deseas agregar el formulario de inicio de sesión y haz clic en el botón ‘Agregar bloque’.

Desde el menú de bloques, debes elegir el bloque ‘Shortcode’ y agregar el siguiente shortcode en él:

[idehweb_lwp]

Finalmente, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tu configuración.

Ahora, cuando los nuevos usuarios visiten tu sitio web, podrán registrarse e iniciar sesión usando su número de teléfono, mientras que los usuarios existentes aún podrán iniciar sesión con su correo electrónico.

Una vez que hayas configurado esto, te recomiendo enviar un correo electrónico a tus usuarios existentes, animándolos a agregar sus números de teléfono lo antes posible.

Pueden hacer esto visitando su página de perfil en el panel de WordPress, desplazándose hacia abajo hasta la sección ‘Información personal’, agregando su número de teléfono y haciendo clic en Actualizar usuario.

Esto asegura que incluso los usuarios existentes que ya se han registrado puedan iniciar sesión con sus números de teléfono más adelante.

Extra: Agrega inicio de sesión con un clic con Google en WordPress

Si bien iniciar sesión con un número de teléfono y OTP es una opción segura, algunos usuarios prefieren una forma aún más rápida de acceder a sus cuentas.

Agregar el inicio de sesión con un clic de Google permite a los usuarios iniciar sesión al instante, lo que puede mejorar la experiencia del usuario, reducir la fricción al iniciar sesión y aumentar los registros.

Es especialmente útil para sitios con visitantes frecuentes, como plataformas de membresía, tiendas en línea o comunidades.

Puedes agregar fácilmente esta función usando el plugin Nextend Social Login. Es una herramienta popular que permite a los usuarios registrarse e iniciar sesión en tu sitio utilizando sus cuentas de redes sociales existentes como Google, Facebook y Twitter.

También te permite vincular perfiles sociales a cuentas existentes, para que los usuarios recurrentes no creen duplicados.

Para empezar, consulta nuestro tutorial sobre cómo agregar inicio de sesión con un clic con Google en WordPress.

Preguntas frecuentes sobre cómo agregar inicio de sesión con número de teléfono a través de OTP en WordPress

Configurar un nuevo sistema de inicio de sesión puede generar algunas preguntas. Aquí están las respuestas a algunas de las más comunes que me hacen sobre cómo agregar el inicio de sesión con número de teléfono a WordPress.

¿Qué sucede si mi sitio excede los límites gratuitos de Firebase?

Si el tráfico de tu sitio web crece y excedes el nivel de uso gratuito de un servicio como Firebase, entonces pasarías a su plan de pago.

Es una buena idea monitorear tu uso en el panel de control de tu cuenta de Firebase.

¿Mis usuarios existentes todavía pueden iniciar sesión con su correo electrónico y contraseña antiguos?

Sí. Como se muestra en el tutorial, el plugin Iniciar sesión con número de teléfono te permite mantener habilitado el inicio de sesión por correo electrónico. Esto es muy recomendable para evitar confundir a tus usuarios existentes.

Pueden seguir iniciando sesión con sus credenciales antiguas y pueden optar por agregar su número de teléfono a su perfil en cualquier momento.

¿Es posible personalizar el diseño del formulario de inicio de sesión con teléfono?

La versión gratuita del plugin ofrece un estilo básico diseñado para integrarse con la mayoría de los temas de WordPress.

La versión pro del plugin también incluye más opciones de estilo integradas.

¿Este método de inicio de sesión con teléfono funcionará con WooCommerce o mi plugin de membresía?

Sí, el plugin Iniciar sesión con número de teléfono está diseñado para integrarse con los ganchos estándar de inicio de sesión y registro de WordPress.

Esto significa que debería funcionar automáticamente con plugins populares como WooCommerce, MemberPress y otros que utilizan el sistema de usuarios predeterminado de WordPress para sus páginas de inicio de sesión y registro.

Espero que este artículo te haya ayudado a aprender cómo agregar inicio de sesión con número de teléfono a través de OTP en WordPress. También te puede interesar nuestra guía para principiantes sobre cómo eliminar la opción de restablecimiento/cambio de contraseña de WordPress y nuestro tutorial sobre cómo crear una ventana emergente de inicio de sesión en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.