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

Cuando sus usuarios puedan iniciar sesión con su cuenta de Google, no tendrán que establecer, recordar o controlar otro nombre de usuario y contraseña para acceder a su sitio web. Su tiempo se ahorra y sus tasas de conversión aumentan. En este tutorial, le mostraremos cómo integrar un inicio de sesión de Google con un solo clic en WordPress.

¿Por qué incluir el inicio de sesión de Google en WordPress?

Muchos usuarios en línea continúan utilizando sus cuentas de Google. Esto les permite acceder rápidamente a productos de Google como Gmail, Drive y Documentos sin tener que iniciar sesión por separado para cada uno.

Cuando habilita el inicio de sesión de Google con un clic en su página de inicio de sesión de WordPress, sus usuarios podrán hacer lo mismo en su sitio web. Los usuarios pueden ahorrar tiempo iniciando sesión rápidamente con su cuenta de Google. Esto elimina la necesidad de que los usuarios ingresen sus datos de inicio de sesión cada vez.

Si solo tiene un blog básico de WordPress, es posible que esta función no le resulte útil. Pero, si su empresa usa Google Workspace para direcciones de correo electrónico profesionales, los miembros de su equipo pueden iniciar sesión con las cuentas de aplicaciones de Google de su empresa.

Una opción de inicio de sesión único, como el inicio de sesión de Google con un solo clic, también es extremadamente útil para cualquier sitio web que requiera que los usuarios inicien sesión, como sitios web de varios autores, sitios web de membresía y sitios web que venden cursos en línea. Dicho esto, echemos un vistazo a cómo integrar simplemente el inicio de sesión con un clic de Google en su sitio web de WordPress.

¿Cómo habilitar el inicio de sesión de Google con un clic en WordPress?

Primero, descargue e instale el complemento de registro e inicio de sesión social de Nextend. Visite nuestra guía para principiantes sobre cómo instalar un complemento de WordPress para obtener información adicional.

Para esta lección, utilizaremos el complemento gratuito que permite iniciar sesión en Google, Twitter y Facebook. Nextend Social Login también tiene una versión comercial que agrega inicio de sesión social a una variedad de sitios web, incluidos PayPal, Slack y TikTok.

Vaya a Configuración » Nextend Social Login en el área de administración de WordPress después de la activación. Esta pantalla muestra las muchas opciones de inicio de sesión social que están disponibles.

Haga clic en el botón "Comenzar" debajo del logotipo de Google para agregar un inicio de sesión de Google a su sitio web de WordPress. Su primer paso, como puede ver, será desarrollar una aplicación de Google. No se deje intimidar por la perspectiva de crear una aplicación de Google.

No necesita saber ningún código, y lo guiaremos a través de todo el proceso.

Desarrollo de una aplicación de Google

Deberá hacer la transición entre su panel de control de WordPress y Google Developers Console para crear esta aplicación. Es una buena idea dejar su panel de WordPress abierto en la pestaña actual del navegador mientras abre una nueva.

Ahora puede acceder a la página de la consola de desarrolladores de Google. Si aún no ha iniciado sesión, se le pedirá que lo haga utilizando su cuenta de Google.

El siguiente paso es seleccionar un proyecto del menú superior. Para continuar, aparecerá una ventana emergente y deberá hacer clic en el botón 'Crear proyecto'.

Esto lo dirigirá a la página para nuevos proyectos. Debe ingresar un nombre de proyecto y elegir una ubicación. El nombre del proyecto puede ser el que desee, por ejemplo, 'Google Login'.

Si inició sesión con una cuenta de Google Workspace, la ubicación se completará automáticamente con el nombre de su organización. Si no, simplemente déjelo como 'Sin organización'.

Para continuar, haga clic en el botón 'Crear'. Accederás al panel de control de API y servicios ahora. En esta página, seleccione 'Pantalla de consentimiento de OAuth' en la opción de la izquierda.

Seleccione el tipo de persona que desea habilitar para iniciar sesión aquí.

Elija 'Interno' si solo las personas con la cuenta de Google de su empresa podrán iniciar sesión. Si sus usuarios tienen direcciones de correo electrónico fuera de su organización, debe seleccionar 'Externo'. Alguien tiene una cuenta de @gmail.com, por ejemplo, en lugar de una dirección de @yourcompanyemail.com.

Cuando esté preparado para continuar, haga clic en el botón "Crear". Ahora puede comenzar a agregar información sobre su aplicación.

Primero, ingrese el nombre de su empresa en el área del nombre de la aplicación. Al iniciar sesión, el usuario verá algo como "Smith Training Services solicita acceso a su cuenta de Google".

También debe ingresar la dirección de correo electrónico con la que inició sesión en Google. Esto permite a sus usuarios consultar sobre la pantalla de inicio de sesión de Google.

Después de eso, desplácese hacia abajo hasta el área 'Dominio de la aplicación'. Agregue enlaces a la página de inicio de su sitio web, la página de política de privacidad y la página de términos de servicio aquí.

Luego, haga clic en la opción 'Agregar dominio' para ingresar el nombre de dominio de su sitio web, como 'example.com'. Si desea agregar un inicio de sesión de Google con un clic a más de un sitio web, puede hacerlo haciendo clic en la opción '+ Agregar dominio'.

Finalmente, debe ingresar una o más direcciones de correo electrónico para que Google pueda mantenerlo actualizado sobre cualquier cambio en su proyecto. Cuando lo haya completado, haga clic en la opción 'Guardar y continuar'.

A continuación, accederá a las páginas Ámbitos y Usuarios de prueba. Simplemente desplácese hasta la parte inferior de ambas páginas y haga clic en la opción 'Guardar y continuar'.

La última página de este paso le ofrecerá un resumen de la configuración de su pantalla de consentimiento de OAuth. El siguiente paso es generar las claves requeridas por su complemento para conectarse a Google Cloud. En el menú de la izquierda, seleccione "Credenciales" y luego haga clic en la opción "+ Generar credenciales" en la parte superior de la pantalla. Debe elegir la opción 'ID de cliente OAuth'.

Esto lo redirigirá a la página 'Crear ID de cliente de OAuth'. Elija 'Aplicación web' en el menú desplegable 'Tipo de aplicación'.

El sitio web se actualizará con algunas configuraciones. Vaya al área titulada 'URI de redireccionamiento autorizado' y haga clic en el botón '+ Agregar URI'.

Ahora ingrese la siguiente URL:

http://ejemplo.com/wp-login.php?loginSocial=google

Tenga cuidado de cambiar example.com con la dirección de su propio sitio web.

Después de eso, debe hacer clic en el botón 'Crear' para guardar la opción. Puede tomar entre cinco minutos y muchas horas para que el ajuste surta efecto.

¡Su cliente OAuth se ha generado con éxito!

Aparecerá una ventana con 'Su ID de cliente' y 'Su secreto de cliente'. Estas claves deben copiarse y pegarse en la página de configuración del complemento en su área de administración de WordPress.

Simplemente haga clic en el icono "copiar" a la derecha para copiar cada clave de una en una.

Incluir claves de Google en su complemento

Ahora regrese a la pestaña del navegador de su sitio web y seleccione la pestaña 'Configuración' en el menú Configuración » Inicio de sesión social de Nextend . Hay campos para el ID del cliente y el secreto del cliente aquí.

Debe copiar y pegar sus claves de Google Cloud Console en estas áreas.

Después de eso, asegúrese de hacer clic en el botón "Guardar cambios" para guardar su configuración.

Ahora debe validar que la configuración sea correcta. Esto es importante ya que no desea que los usuarios genuinos tengan dificultades al intentar iniciar sesión en su sitio web.

Simplemente haga clic en el botón 'Verificar configuración' y el complemento se asegurará de que la aplicación de Google que estableció esté operativa.

Si realizó las instrucciones anteriores correctamente, debería ver un mensaje que dice 'Funciona bien - Deshabilitado'.

Ahora puede hacer clic en el botón 'Habilitar' con confianza para permitir que las personas se registren con su ID de Google.

Aparecerá una notificación verificando que el inicio de sesión de Google ahora está habilitado.

Elección de un estilo de botón y etiquetado

El estilo y la etiqueta predeterminados del botón en Nextend son bastante convencionales y funcionarán para la mayoría de los sitios web. Sin embargo, puede modificarlos yendo a la opción 'Botones' en la parte superior de la pantalla.

Ahora verá todos los estilos disponibles para el botón de inicio de sesión social. Para usar un estilo diferente, solo seleccione su botón de radio.

Después de eso, puede modificar la redacción del botón alterando el contenido en el campo 'Etiqueta de inicio de sesión'.

Si lo desea, puede usar HTML para agregar un formato básico a la etiqueta de inicio de sesión. Por ejemplo, las etiquetas <b> y </b> se pueden usar para poner el texto en negrita.

También puede cambiar las opciones 'Conectar etiqueta' y 'Desvincular etiqueta', que permiten a las personas conectar y desconectar sus cuentas de Google de su sitio web. Los usuarios técnicos pueden crear su propio botón de inicio de sesión de Google utilizando código HTML para los botones.

Para guardar su configuración, asegúrese de hacer clic en la opción 'Guardar cambios'.

Eliminación de su aplicación de Google del modo de prueba

De vuelta en la pestaña del navegador Google Cloud, hay una cosa más que debes hacer. La ventana emergente que contiene su ID de cliente y su secreto de cliente aún debería estar visible. Puede cerrar la ventana emergente haciendo clic en el botón "Aceptar" en la parte inferior.

Ahora debe seleccionar la 'Pantalla de consentimiento de OAuth' en el menú de la izquierda.

Su aplicación de Google está en modo 'Prueba', como puede ver. Esto le permite probar su aplicación con un pequeño grupo de personas. Ahora puede moverlo al modo 'Producción' después de recibir una señal de 'Funciona bien' después de validar la configuración con el complemento.

Esto se logra haciendo clic en el botón 'Publicar aplicación'. Después de eso, recibirá una ventana emergente con el título '¿Empujar a producción?'

Simplemente haga clic en 'Confirmar' para permitir que todos utilicen un inicio de sesión de Google de un solo paso en su sitio.

Si siguió cuidadosamente estas instrucciones, el estado de verificación ahora debería ser 'Verificación no requerida'.

Su aplicación ahora es accesible para todos los usuarios de Google.

Cuando los usuarios se unan a su sitio web, ahora tendrán la opción de usar Google.

Sin embargo, pueden continuar iniciando sesión con su nombre de usuario y contraseña habituales de WordPress si lo desean.

Recuerde que las personas solo pueden iniciar sesión con la dirección de la cuenta de Google que usaron en su sitio web. Además, si ha habilitado el registro de usuarios en su sitio de WordPress, las personas pueden registrarse instantáneamente utilizando el inicio de sesión de Google con un solo clic.

Si desea colocar el botón de inicio de sesión de Google en otro lugar de su sitio web, puede hacerlo con un código abreviado. Puede obtener más información en la pestaña "Uso" de Nextend.

Terminando

La integración de un inicio de sesión de Google con un solo clic en su sitio web de WordPress puede ahorrar tiempo a sus usuarios y mejorar las tasas de conversión. Esto es especialmente útil para sitios web que requieren que los usuarios inicien sesión, como sitios web de varios autores, sitios web de membresía y sitios web que venden cursos en línea. Para habilitar esta función, debe descargar e instalar el complemento de registro e inicio de sesión social de Nextend y crear una aplicación de Google siguiendo los pasos descritos en este tutorial. Con la función de inicio de sesión de Google con un solo clic, los usuarios pueden iniciar sesión rápidamente con su cuenta de Google sin necesidad de ingresar sus datos de inicio de sesión cada vez.