TNL Google Auth Login — Documentación completa del plugin

Documentación del plugin · TuNegocioEnLinea (TNL)

TNL Google Auth Login

Formulario de registro e inicio de sesión con «Continuar con Google» (incluida la detección automática de cuenta vía One Tap), recuperación de contraseña, bloqueo por intentos fallidos, captcha opcional y compatibilidad nativa con WooCommerce. Esta guía cubre cada función del plugin y, paso a paso, cómo crear y configurar el proyecto en Google Cloud Console — desde cero hasta producción.

Versión del plugin: 1.0 PHP 7.4+ Sin Composer / sin dependencias Compatible con LiteSpeed Cache

Qué hace el plugin

TNL Google Auth Login reemplaza el registro/login por defecto de WordPress con un formulario propio, ligero (HTML puro, sin frameworks) y que se comunica con el servidor únicamente vía AJAX. Se coloca en cualquier página con un shortcode, y opcionalmente se integra dentro del formulario nativo de «Mi cuenta» de WooCommerce.

Continuar con Google

Botón de Google + One Tap: si el visitante tiene sesión de Google activa en el navegador, se le ofrece continuar automáticamente, sin escribir nada.

Registro e inicio de sesión

Un mismo formulario con pestañas. El login acepta correo o nombre de usuario.

Recuperar contraseña

Flujo completo en dos pasos: solicitar enlace por correo y establecer una nueva contraseña, sin salir del shortcode.

Bloqueo por intentos fallidos

Bloqueo temporal configurable (3 intentos / 15 min por defecto) por combinación correo o usuario + IP.

Cloudflare Turnstile

Captcha opcional, gratuito, sin los rompecabezas clásicos de reCAPTCHA.

Marca personalizada

Logo/ícono propio (reemplaza el de WordPress) y página/»path» de login a tu elección.

Barra de admin oculta

Oculta la barra superior de WordPress en el frontend; las opciones de cuenta viven dentro del shortcode.

WooCommerce

Inyecta «Continuar con Google» directamente en el formulario nativo de Mi Cuenta, sin reemplazarlo.

Instalación

Sube el plugin.
WordPress → Plugins → Añadir nuevo → Subir plugin → selecciona el archivo google-auth-login.zip → Instalar ahora.
Actívalo.
Plugins → busca «TNL Google Auth Login» → Activar.
Crea la página de login.
Páginas → Añadir nueva. Título sugerido: «Acceder». En el contenido, agrega el shortcode [tnl_auth_form]. Publica.
Configura Google.
Sigue la sección 5. Crear el proyecto en Google Cloud para obtener tu Client ID.
Termina en Ajustes.
Ajustes → Google Auth Login: pega el Client ID, selecciona tu página de login y guarda.

El shortcode

Coloca esto en cualquier página, entrada o bloque de tipo «Shortcode»:

[tnl_auth_form]

El mismo shortcode es consciente del contexto y cambia su salida automáticamente:

Situación	Qué se muestra
Visitante sin sesión	Pestañas de «Iniciar sesión» / «Crear cuenta» + botón de Google
Enlace de recuperación (`?tnl_gal_action=reset-password`)	Formulario para definir una nueva contraseña
Usuario ya logueado	Panel de cuenta: avatar, nombre, «Editar perfil», «Cerrar sesión»

Tip

Los estilos y scripts del plugin sólo se cargan en páginas donde detecta el shortcode (o en «Mi cuenta» de WooCommerce), así que no agrega peso al resto del sitio.

Si editas esta página

Esta página escribe el shortcode como [tnl_auth_form] en el HTML (entidades para los corchetes) en vez de



							
					
				
			
			
				
				
			

			

			
			

			o con tu correo

			
			
				Correo o nombre de usuario
				

				Contraseña
				

				
				

				
					¿Olvidaste tu contraseña?
				
			

			
			
				Ingresa tu correo y te enviaremos un enlace para recuperar tu cuenta.

				Correo electrónico
				

				
				

				
					← Volver al login
				
			

			
			
				Nombre
				

				Correo electrónico
				

				Contraseña
				

				Confirmar contraseña

literal. Si lo escribes tal cual dentro del contenido de WordPress, el propio plugin lo detecta y lo ejecuta (mostraría el formulario real en vez del texto de ejemplo), incluso estando dentro de <pre><code>.

Panel de ajustes

Ajustes → Google Auth Login. Campo por campo:

Campo	Para qué sirve
Google Client ID	Lo obtienes en Google Cloud Console — ver sección 5.
Página de login	La página de WordPress donde pusiste `[tnl_auth_form]`. Su slug/URL es tu «path» de login.
Redirigir wp-login.php	Manda a los visitantes anónimos que llegan a la URL clásica hacia tu página de login. Los administradores conservan acceso normal.
Logo / ícono	Reemplaza el logo de WordPress, tanto en el formulario como en `wp-login.php`.
Bloqueo por intentos fallidos	Número de intentos y minutos de bloqueo (por defecto 3 / 15).
Cloudflare Turnstile	Site Key y Secret Key del captcha opcional.
Barra superior de WordPress	Ocultarla en el frontend (las opciones de cuenta ya están en el shortcode).
WooCommerce	Activa/desactiva el botón de Google dentro de Mi Cuenta.

Crear el proyecto en Google Cloud Console

Necesitas un Client ID de OAuth (tipo «Web application»). Desde 2024, Google reorganizó esta sección de la consola bajo el nombre Google Auth Platform, dividida en tres pestañas: Branding, Audience y Clients. Estos son los pasos con esa interfaz actual.

5.1 — Crear el proyecto

Entra a Google Cloud Console.
Con la cuenta de Google que va a administrar el sitio.

console.cloud.google.com/projectcreate ↗
Crea un proyecto nuevo.
Nombre sugerido: el nombre del sitio o del cliente (ej. «TNL Auth — nombredelsitio»). No hace falta organización ni facturación para esto.

5.2 — Configurar Google Auth Platform (Branding)

Abre Google Auth Platform → Branding.
La primera vez verás un asistente «Get started» de 4 pasos.

console.cloud.google.com/auth/branding ↗
App information.
Nombre de la app (lo verán tus usuarios en la pantalla de Google) y correo de soporte.
Audience (tipo de usuario).
Elige External — es lo correcto para clientes normales con cuenta de Gmail. «Internal» es solo para cuentas de Google Workspace de tu propia organización.
Contact information.
Correo donde Google te avisa sobre cambios de política del proyecto.
Completa el Branding.
Ya dentro de la pestaña Branding: sube tu logo, agrega el dominio de tu sitio, y el enlace a tu página de política de privacidad (ver sección 6 — algunos de estos campos sólo son obligatorios cuando publiques la app).

5.3 — Crear el Client ID

Ve a la pestaña Clients.
console.cloud.google.com/auth/clients ↗
Create client → tipo «Web application».
Ponle un nombre identificable, ej. «Web — nombredelsitio».
Authorized JavaScript origins.
Agrega exactamente el dominio de tu sitio, con https://, sin slash final:
```
https://tudominio.com
```
Si el sitio usa www, agrega también https://www.tudominio.com como línea aparte.
Authorized redirect URIs: déjalo vacío.
Este plugin usa Google Identity Services (One Tap / botón), no el flujo clásico de redirect OAuth, así que no necesitas configurar ninguna URI de retorno.
Guarda y copia el Client ID.
Termina en .apps.googleusercontent.com.

5.4 — Pégalo en el plugin

WordPress → Ajustes → Google Auth Login → pega el Client ID en el campo correspondiente → Guardar cambios.

Por qué no hay Client Secret

El botón «Continuar con Google» y el One Tap funcionan enteramente en el navegador (Google Identity Services) y el servidor solo valida el token contra el endpoint público de Google. No se usa ni se necesita el Client Secret para este flujo.

De «Prueba» a «Producción»

Todo proyecto nuevo tipo External nace en estado Testing. Esto es importante y tranquilizador: el plugin sólo pide los datos básicos de acceso (openid, email, profile — el equivalente a «Sign in with Google»). Google exime explícitamente a este tipo de uso del límite de 100 usuarios de prueba y de la expiración de sesión a 7 días que sí aplican a otros permisos más sensibles. En otras palabras: tus clientes ya pueden iniciar sesión con Google aunque el proyecto siga en modo Testing.

Lo que sí falta en modo Testing es la parte de presentación: sin publicar el proyecto, la pantalla de Google puede mostrar tu dominio en crudo en lugar del nombre/logo de tu marca, y a veces un aviso de «app no verificada». Para un sitio en producción real, se recomienda completar estos requisitos y pasar a In production.

Requisitos para publicar (botón «Publish app»)

Obligatorio

Política de privacidad pública y accesible. Una página real en tu sitio (no un PDF ni un borrador) que explique qué datos se recogen (nombre, correo, foto de perfil de Google) y cómo se usan. Debe ser la misma URL en tu página de inicio y en el campo «Privacy Policy» de Branding.

Obligatorio

Dominio verificado. Si el dominio que pusiste en «Authorized domains» no está ya verificado en tu cuenta de Google, tendrás que verificarlo por Google Search Console con la misma cuenta que administra el proyecto de Cloud.

search.google.com/search-console ↗

Recomendado

Página de Términos de servicio. No siempre es obligatoria para permisos básicos, pero Google la pide con frecuencia y da más confianza a tus usuarios.

Recomendado

Logo de la app. Cuadrado, mínimo 120×120px, fondo sólido. Sin esto (y sin verificación de marca), Google puede mostrar solo el nombre/dominio, sin ícono, en la pantalla de consentimiento.

No aplica a este plugin

Revisión de seguridad (CASA) / verificación de scopes sensibles. Esto sólo se activa si en el futuro agregas permisos que lean Gmail, Drive, Calendar, etc. Con el uso actual del plugin (solo perfil básico) nunca se dispara.

Pasos para publicar

Completa Branding.
Nombre, logo, correo de soporte, enlace a homepage y a política de privacidad, dominios autorizados.
Ve a Audience y pulsa «Publish app».
console.cloud.google.com/auth/audience ↗
(Opcional) Verifica la marca.
Si quieres que tu logo y nombre aparezcan en vez del dominio en crudo, desde Branding pulsa «Verify branding». La revisión suele tardar pocos días hábiles — es una revisión ligera, no la auditoría CASA completa.

Checklist final

Proyecto creado en Google Cloud Console
Google Auth Platform configurado (nombre de app, correo de soporte, contacto)
Client ID tipo «Web application» creado, sin redirect URIs
Origen autorizado = tu dominio exacto (https, sin slash final)
Client ID pegado en Ajustes del plugin
Página de login publicada con [tnl_auth_form] y seleccionada en Ajustes
Página de política de privacidad publicada y enlazada en Branding
(Recomendado) Página de términos de servicio
(Recomendado) Logo subido en Branding
Dominio verificado en Search Console si Google lo solicita
App publicada («Publish app») en la pestaña Audience

Integración con WooCommerce

Si WooCommerce está activo, el plugin detecta automáticamente el formulario nativo de Mi cuenta y agrega el botón «Continuar con Google» (+ One Tap) arriba de los campos de correo/contraseña, tanto en la pestaña de inicio de sesión como en la de registro. No reemplaza el formulario de WooCommerce — se inserta dentro de él.

Está activado por defecto en cuanto configuras el Client ID. Puedes desactivarlo desde Ajustes → Google Auth Login → sección WooCommerce, sin tocar código.

Redirección

Tras iniciar sesión con Google desde Mi Cuenta, el cliente vuelve al dashboard de Mi Cuenta de WooCommerce, no a la página de inicio del sitio.

Foto de perfil (avatar)

WordPress muestra avatares vía Gravatar. Si un cliente nunca subió una foto ahí, Gravatar entrega un ícono genérico — no un error — así que WordPress no distingue «sin foto real» de «tiene foto». El plugin sí lo distingue: si el usuario inició sesión con Google y no tiene un Gravatar real registrado con ese correo, se usa automáticamente su foto de perfil de Google en cualquier parte del sitio que muestre avatares (Mi Cuenta, comentarios, panel de administración). Si el cliente sí tiene Gravatar, ese se respeta sin cambios.

Seguridad: bloqueo y captcha

Bloqueo por intentos fallidos

Tras el número de intentos configurado (3 por defecto) fallando el login con correo/usuario y contraseña, esa combinación + IP queda bloqueada temporalmente (15 minutos por defecto). Esto no afecta a «Continuar con Google» — solo protege el login clásico contra fuerza bruta.

Cloudflare Turnstile (opcional)

Captcha gratuito y silencioso (normalmente sin retos visuales). Si lo activas, se agrega automáticamente en login, registro y recuperación de contraseña.

Crea un sitio en el panel de Turnstile.
dash.cloudflare.com → Turnstile ↗
Modo «Managed».
Es el que mejor equilibra seguridad y fricción para el usuario.
Copia Site Key y Secret Key
a Ajustes → Google Auth Login → Cloudflare Turnstile.

Solución de problemas comunes

Error «origin_mismatch» al hacer clic en el botón de Google

El dominio desde el que se abre la página no coincide EXACTO con el que agregaste en «Authorized JavaScript origins»: revisa http vs https, con o sin www, y que no tenga slash final.

One Tap no aparece nunca

Es normal si el visitante no tiene sesión de Google activa en el navegador, si ya cerró/descartó el aviso antes (Google respeta esa decisión por un tiempo), o si el sitio no carga por HTTPS válido. El botón «Continuar con Google» normal siempre queda disponible como alternativa.

Google muestra «Esta app no está verificada»

Ocurre mientras el proyecto sigue en Testing sin publicar. No bloquea el acceso de tus usuarios reales (el plugin solo usa permisos básicos), pero se ve menos profesional. Se resuelve completando la sección 6 y publicando la app.

El formulario se queda en «Procesando…»

Revisa la consola del navegador (F12 → Console/Network) al enviar el formulario. Suele indicar un conflicto con otro plugin/script del tema. El plugin incluye timeout de red de 15s, así que si el servidor no responde, deberías ver un mensaje de error en vez de quedarte esperando indefinidamente.

El correo de recuperación de contraseña no llega

La mayoría de los hostings compartidos bloquean o marcan como spam el envío nativo de PHP (mail()) que usa WordPress por defecto. Se recomienda usar un plugin de envío por SMTP autenticado.

El logo o el path de login no cambian

Confirma que guardaste los Ajustes después de subir el logo o seleccionar la página, y que el caché de página (LiteSpeed Cache u otro) no está sirviendo una copia vieja — purga el caché tras cambiar estos ajustes.

Soporte

¿Dudas sobre la instalación o la configuración de Google Cloud Console? Escríbenos:

soporte@tunegocioenlinea.net ↗ tunegocioenlinea.net ↗

(Reemplaza este correo por tu dirección de soporte real antes de publicar la página.)