Cómo agregar inicio de sesión con un clic con Google en WordPress

El inicio de sesión con Google de un clic permite a los visitantes registrarse o iniciar sesión en tu sitio utilizando una cuenta que ya tienen. En lugar de crear otro nombre de usuario y contraseña, pueden acceder a tu contenido o tienda en línea con un solo clic.

Hemos descubierto que los usuarios aprecian este tipo de simplicidad. Ofrecer el inicio de sesión con Google no solo hace que el proceso sea más rápido y fácil, sino que también puede mejorar la experiencia del usuario, aumentar las conversiones y reducir el abandono del carrito.

En esta guía paso a paso, te mostraremos cómo agregar el inicio de sesión con Google de un clic a tu sitio de WordPress para que puedas optimizar todo el recorrido del usuario. 🚀

¿Por qué agregar el inicio de sesión con Google de un clic en WordPress?

Tener activado el inicio de sesión con Google de un clic en tu formulario de inicio de sesión de WordPress permite a tus usuarios ahorrar tiempo al iniciar sesión rápidamente con su cuenta de Google. Esto evita que tengan que ingresar sus credenciales de inicio de sesión cada vez.

Si administras un blog sencillo, es posible que no encuentres útil esta función.

Pero si tu organización utiliza Google Workspace para direcciones de correo electrónico profesionales, entonces los miembros de tu equipo pueden usar las cuentas de Google de tu organización para iniciar sesión.

Una función de inicio de sesión único, como el inicio de sesión con Google en un clic, también es muy útil para cualquier sitio web que requiera que los usuarios inicien sesión, como sitios web de autores múltiples, sitios web de membresía, y sitios web que venden cursos en línea.

Crea tu formulario de registro de usuario perfecto

WPForms es el mejor creador de formularios de arrastrar y soltar para WordPress. Si bien los inicios de sesión sociales son geniales, WPForms te permite crear formularios de registro de usuario completamente personalizados para recopilar exactamente la información que necesitas de tus usuarios.

También puedes crear formularios de contacto, formularios de pago, encuestas y más en solo unos minutos.

Empieza hoy mismo con WPForms

Ahora, veamos cómo agregar fácilmente el inicio de sesión con Google en un clic a tu sitio web de WordPress.

Cómo agregar inicio de sesión con Google en un clic en WordPress

Primero, necesitarás instalar y activar el plugin Nextend Social Login and Register. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Para este tutorial, usaremos el plugin gratuito que admite el inicio de sesión de Google, Twitter y Facebook. También hay una versión de pago de Nextend Social Login que agrega inicio de sesión social para muchos sitios diferentes, incluyendo PayPal, Slack y TikTok.

Al activarlo, deberás ir a Configuración » Nextend Social Login en el área de administración de WordPress. En esta pantalla, verás las diferentes opciones de inicio de sesión social disponibles.

Para agregar un inicio de sesión de Google a tu sitio web de WordPress, deberás hacer clic en el botón ‘Empezar’ debajo del logo de Google.

Aquí, verás que tu primer paso será crear una aplicación de Google.

Crear una aplicación de Google suena técnico, pero no te preocupes.

No necesitas saber nada de código y te guiaremos a través de todos los pasos.

Creando una aplicación de Google

Para crear esta aplicación, necesitarás alternar entre tu panel de WordPress y la Consola de Desarrolladores de Google. Es una buena idea dejar tu panel de WordPress abierto en la pestaña actual y abrir una nueva pestaña en el navegador.

Ahora, puedes visitar el sitio web de la Consola de Desarrolladores de Google. Si aún no has iniciado sesión, se te pedirá que lo hagas con tu cuenta de Google.

A continuación, debes hacer clic en ‘Seleccionar un proyecto’ en el menú superior. Se abrirá una ventana emergente donde debes hacer clic en el botón ‘Nuevo proyecto’ para continuar.

Esto abrirá la página Nuevo Proyecto. Necesitarás agregar un nombre de proyecto y seleccionar la ubicación. El nombre del proyecto puede ser lo que quieras, como ‘Inicio de sesión de Google’.

Si iniciaste sesión con una cuenta de Google Workspace, la ubicación se completará automáticamente con el nombre de tu organización. Si no, deberías dejarlo como ‘Sin organización’.

A continuación, haz clic en el botón ‘Crear’ para continuar.

Ahora serás redirigido al panel de ‘APIs y Servicios’. En esta página, debes hacer clic en ‘Pantalla de consentimiento de OAuth’ en el menú de la izquierda.

Aquí, debes elegir el tipo de usuario al que permites iniciar sesión.

Selecciona ‘Interno’ si solo los usuarios con la cuenta de Google de tu organización iniciarán sesión. Alternativamente, deberías elegir ‘Externo’ si tus usuarios tienen direcciones de correo electrónico fuera de tu organización.

Por ejemplo, cualquier persona con una cuenta de @gmail.com frente a una dirección de @tucorreoempresarial.com.

Cuando estés listo para continuar, haz clic en el botón ‘Crear’. Ahora, puedes empezar a agregar información sobre tu aplicación.

Primero, debes ingresar el nombre de tu negocio en el campo del nombre de la aplicación. Esto se mostrará al usuario al iniciar sesión, por ejemplo, ‘Smith Training Services quiere acceder a tu cuenta de Google.’

También necesitas agregar la dirección de correo electrónico con la que iniciaste sesión en Google. Esto permitirá que tus usuarios hagan preguntas sobre la pantalla de inicio de sesión de Google.

Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección 'Dominio de la aplicación'. Aquí, necesitas agregar enlaces a la página de inicio de tu sitio web, a la página de política de privacidad y a la página de términos de servicio.

Luego, debes hacer clic en el botón 'Agregar dominio' para agregar el nombre de dominio de tu sitio web, como 'ejemplo.com'.

Si deseas agregar el inicio de sesión de Google con un clic a más de un sitio web, puedes hacer clic en el botón '+ Agregar dominio' para agregar otro dominio.

Finalmente, necesitas agregar una o más direcciones de correo electrónico para que Google pueda notificarte sobre cualquier cambio en tu proyecto.

Cuando hayas terminado, asegúrate de hacer clic en el botón 'Guardar y continuar'.

A continuación, llegarás a las páginas de Alcances y Usuarios de prueba. Para ambas páginas, simplemente desplázate hasta el final y haz clic en el botón 'Guardar y continuar'.

La página final para este paso te mostrará un resumen de la configuración de tu pantalla de consentimiento de OAuth.

El siguiente trabajo es crear las claves que tu plugin de inicio de sesión necesitará para conectarse con Google Cloud.

Deberías hacer clic en ‘Credenciales’ en el menú de la izquierda y luego hacer clic en el botón ‘+ Crear credenciales’ en la parte superior de la pantalla. Necesitas seleccionar la opción ‘ID de cliente OAuth’.

Esto te llevará a la página ‘Crear ID de cliente OAuth’.

Deberías seleccionar ‘Aplicación web’ en el menú desplegable ‘Tipo de aplicación’.

Se agregarán algunas configuraciones a la página. Necesitas desplazarte hacia abajo hasta la sección ‘URIs de redireccionamiento autorizadas’ y hacer clic en el botón ‘+ Agregar URI’.

Ahora, necesitas ingresar la siguiente URL en el campo.

Es muy importante que esta URL comience con ‘https://’ porque Google requiere una conexión segura para que esta función funcione correctamente.

https://example.com/wp-login.php?loginSocial=google

Solo asegúrate de reemplazar ‘example.com’ con el nombre de dominio de tu propio sitio web.

Una vez que hayas hecho eso, deberías hacer clic en el botón ‘Crear’ para guardar la configuración. Puede tardar de 5 minutos a unas pocas horas para que la configuración surta efecto.

¡Tu cliente OAuth ha sido creado!

Verás una ventana emergente que contiene ‘Tu ID de cliente’ y ‘Tu secreto de cliente’. Necesitarás pegar estas claves en la página de configuración del plugin de regreso en tu área de administración de WordPress.

Simplemente puedes hacer clic en el ícono ‘copiar’ a la derecha para copiar las claves una a la vez.

Agregando tus claves de Google a tu plugin

Ahora, simplemente regresa a la pestaña del navegador de tu sitio web y haz clic en la pestaña ‘Configuración’ en Configuración » Inicio de sesión social de Nextend. Aquí, verás campos para el ID de cliente y el Secreto de cliente.

Necesitas copiar tus claves de la Consola de Google Cloud y pegarlas en estos campos.

Una vez que hayas hecho eso, asegúrate de hacer clic en el botón ‘Guardar cambios’ para guardar tu configuración.

Ahora, necesitarás probar que la configuración esté funcionando correctamente. Esto es importante porque no quieres que los usuarios reales encuentren errores al intentar iniciar sesión en tu sitio web.

Simplemente haz clic en el botón ‘Verificar configuración’, y el plugin se asegurará de que la aplicación de Google que creaste esté funcionando correctamente.

Si seguiste los pasos correctamente, deberías ver una notificación que dice ‘Funciona bien – Desactivado’.

Este mensaje puede parecer confuso, pero en realidad son buenas noticias. ‘Funciona bien’ confirma que tu configuración es correcta y que la conexión con Google es exitosa.

‘Desactivado’ simplemente significa que el botón de inicio de sesión aún no está activo en tu sitio web.

Ahora puedes hacer clic en el botón ‘Habilitar’ para que el inicio de sesión de Google esté activo para tus usuarios.

Una vez que hagas eso, aparecerá un mensaje confirmando que el inicio de sesión de Google ahora está habilitado.

Selección de estilo y etiquetas de tu botón

El estilo y la etiqueta predeterminados del botón de Nextend son bastante estándar y funcionarán para la mayoría de los sitios web. Sin embargo, puedes personalizarlos haciendo clic en la pestaña ‘Botones’ en la parte superior de la pantalla.

Ahora verás todos los diferentes estilos disponibles para el botón de inicio de sesión social. Para usar un estilo diferente, simplemente haz clic para seleccionar su botón de radio.

Una vez que hayas hecho eso, también puedes cambiar el texto del botón editando el texto en el campo ‘Etiqueta de inicio de sesión’.

Si lo deseas, puedes aplicar un formato básico a la etiqueta de inicio de sesión usando HTML. Por ejemplo, puedes poner texto en negrita usando las etiquetas <b> y </b>.

También puedes editar los campos ‘Etiqueta de enlace’ y ‘Etiqueta de desenlace’ que permiten a los usuarios vincular y desvincular tu sitio web con sus cuentas de Google.

Si deseas colocar el botón de inicio de sesión en otras áreas de tu sitio, como en un widget de barra lateral o en una página específica, puedes hacerlo fácilmente utilizando los códigos cortos del plugin.

Asegúrese de hacer clic en el botón 'Guardar cambios' para almacenar su configuración.

Sacar tu aplicación de Google del modo de prueba

Ahora, hay una última cosa que debes hacer en la pestaña del navegador de Google Cloud. Todavía deberías ver la ventana emergente con tu ID de cliente y secreto de cliente. Puedes descartar la ventana emergente haciendo clic en ‘OK’ en la parte inferior de la misma.

A continuación, debes hacer clic en ‘Pantalla de consentimiento de OAuth’ en el menú de la izquierda.

Puedes ver que tu aplicación de Google está en modo ‘Prueba’. Esto te permite probar tu aplicación con un número limitado de usuarios. Ahora que has recibido una notificación de ‘Funciona bien’ al verificar la configuración con el plugin, puedes moverla al modo ‘En producción’.

Haces esto haciendo clic en el botón ‘Publicar aplicación’. A continuación, verás una ventana emergente con el título ‘¿Enviar a producción?’

Simplemente haz clic en ‘Confirmar’ para permitir que todos utilicen un inicio de sesión de Google de un solo paso en tu sitio.

Si has seguido este tutorial cuidadosamente, entonces el Estado de verificación debería ser ahora ‘Verificación no requerida.’

Tu aplicación ahora funcionará con todos los usuarios de Google.

Ahora, cuando los usuarios inicien sesión en tu sitio web, tendrán la opción de iniciar sesión con Google.

Sin embargo, si lo prefieren, aún pueden iniciar sesión usando su nombre de usuario y contraseña estándar de WordPress.

Así es como funciona el inicio de sesión con Google para tus visitantes.

Los nuevos visitantes pueden usar el botón para registrarse instantáneamente para obtener una cuenta en tu sitio. Para los usuarios existentes, pueden usar el botón para iniciar sesión, siempre y cuando la dirección de correo electrónico de su cuenta sea la misma que la de su correo electrónico de Google.

Si deseas agregar el botón de inicio de sesión de Google en cualquier otro lugar de tu sitio web, puedes hacerlo usando un shortcode. Puedes obtener más información haciendo clic en la pestaña 'Uso' de Nextend.

Preguntas frecuentes sobre el inicio de sesión con Google

Aquí hay una lista de algunas preguntas que nuestros lectores hacen con frecuencia sobre cómo agregar el inicio de sesión con Google a su sitio web.

¿Es seguro agregar el inicio de sesión con Google a mi sitio de WordPress?

Sí, es muy seguro. El proceso utiliza el protocolo estándar OAuth 2.0 de Google. Esto significa que tu sitio web nunca maneja ni almacena la contraseña de Google del usuario, lo que garantiza que sus credenciales permanezcan seguras.

Tu sitio solo recibe un token seguro de Google para verificar la identidad del usuario.

¿Puedo agregar opciones de inicio de sesión para otras plataformas de redes sociales?

Absolutamente. El plugin gratuito Nextend Social Login también es compatible con Facebook y Twitter. Si actualizas a su versión de pago, puedes agregar muchas otras plataformas como LinkedIn, PayPal, Slack y TikTok.

¿Qué pasa si un visitante no tiene una cuenta de Google?

El formulario de inicio de sesión estándar de WordPress permanece completamente funcional. Agregar un botón de inicio de sesión de Google proporciona una opción adicional y conveniente, pero no elimina los campos predeterminados de nombre de usuario y contraseña.

¿Esta función ralentizará mi sitio web?

No, no debería. El plugin Nextend Social Login es ligero y está optimizado para el rendimiento. El proceso de autenticación ocurre en los rápidos servidores de Google, por lo que no tendrá un impacto notable en la velocidad de tu sitio.

¿El inicio de sesión de Google funciona con WooCommerce o sitios de membresía?

Sí, funciona muy bien con populares plugins de comercio electrónico y membresía. Simplificar el proceso de pago y registro puede ayudar a reducir el abandono del carrito en tiendas WooCommerce y aumentar las inscripciones en sitios que utilizan plugins como MemberPress.

Recursos adicionales para personalizar tu página de inicio de sesión

Esperamos que este artículo te haya ayudado a aprender cómo agregar el inicio de sesión con un clic con Google en WordPress.

También te puede interesar ver otras guías sobre cómo personalizar la experiencia de inicio de sesión en tu sitio web:

• Cómo agregar inicio de sesión con Facebook en WordPress
• Cómo agregar inicio de sesión social a WordPress (la forma fácil)
• Los mejores plugins para la página de inicio de sesión de WordPress (Seguros y personalizables)
• Cómo agregar inicio de sesión sin contraseña en WordPress con Magic Links
• Cómo agregar inicio de sesión con número de teléfono vía OTP en WordPress
• Cómo crear una página de inicio de sesión personalizada en WordPress (Guía definitiva)
• Por qué y cómo deberías limitar los intentos de inicio de sesión en WordPress
• Cómo agregar una URL de inicio de sesión personalizada en WordPress (paso a paso)
• Cómo agregar CAPTCHA al formulario de inicio de sesión y registro de WordPress
• Cómo requerir inicio de sesión para ver una página en WordPress
• Guía para principiantes para agregar autenticación de dos factores en WordPress (método gratuito)
• Cómo restringir el inicio de sesión de usuario a un solo dispositivo 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.