Configura el inicio de sesión social con Google
El conector de Google proporciona una forma concisa para que tu aplicación utilice el sistema de autenticación OAuth 2.0 de Google.
En esta guía, asumimos que tienes conocimientos básicos de los conectores de Logto. Si no los tienes, consulta la guía Configurar conectores para comenzar.
Configura un proyecto en la Google API Console
- Visita la Google API Console e inicia sesión con tu cuenta de Google.
- Haz clic en el botón Select a project en la barra de menú superior y haz clic en el botón New Project para crear un proyecto.
- En tu proyecto recién creado, haz clic en APIs & Services para entrar en el menú de APIs & Services.
Configura tu pantalla de consentimiento
Configura y registra tu aplicación
- En el menú izquierdo de APIs & Services, haz clic en el botón OAuth consent screen.
- Elige el User Type que deseas y haz clic en el botón Create. (Nota: Si seleccionas External como tu User Type, necesitarás agregar usuarios de prueba más tarde).
Ahora estarás en la página de Edit app registration.
Editar el registro de la aplicación
Configurar la pantalla de consentimiento OAuth
- Sigue las instrucciones para completar el formulario de OAuth consent screen.
- Haz clic en SAVE AND CONTINUE para continuar.
Configurar alcances
- Haz clic en ADD OR REMOVE SCOPES y selecciona
../auth/userinfo.email,../auth/userinfo.profileyopeniden el cajón emergente, y haz clic en UPDATE para finalizar. Se recomienda que consideres agregar todos los alcances que puedas usar, de lo contrario, algunos alcances que agregaste en la configuración pueden no funcionar. - Completa el formulario según lo necesites.
- Haz clic en SAVE AND CONTINUE para continuar.
Agregar usuarios de prueba (solo tipo de usuario externo)
- Haz clic en ADD USERS y agrega usuarios de prueba para permitir que estos usuarios accedan a tu aplicación mientras la pruebas.
- Haz clic en SAVE AND CONTINUE para continuar.
Ahora deberías tener configurada la pantalla de consentimiento de Google OAuth 2.0.
Obtener credenciales de OAuth 2.0
- En el menú izquierdo de APIs & Services, haz clic en el botón Credentials.
- En la página de Credentials, haz clic en el botón + CREATE CREDENTIALS en la barra de menú superior y selecciona OAuth client ID.
- En la página Create OAuth client ID, selecciona Web application como el tipo de aplicación.
- Completa la información básica de tu aplicación.
- Haz clic en + Add URI para agregar un dominio autorizado a la sección de Authorized JavaScript origins. Este es el dominio desde el cual se servirá tu página de autorización de Logto. En nuestro caso, será
${your_logto_origin}. por ejemplo,https://logto.dev. - Haz clic en + Add URI en la sección de **Authorized redirect URIs** para configurar las **Authorized redirect URIs**, que redirigen al usuario a la aplicación después de iniciar sesión. En nuestro caso, será
${your_logto_endpoint}/callback/${connector_id}. por ejemplo,https://logto.dev/callback/${connector_id}. Elconnector_idse puede encontrar en la barra superior de la página de detalles del conector en la Logto Admin Console. - Haz clic en Create para finalizar y luego obtendrás el Client ID y el Client Secret.
Configura tu conector
Completa el campo clientId y clientSecret con el Client ID y Client Secret que obtuviste de las páginas de detalles de la aplicación OAuth mencionadas en la sección anterior.
scope es una lista delimitada por espacios de alcances. Si no se proporciona, el alcance por defecto será openid profile email.
prompts es un array de cadenas que especifica el tipo de interacción del usuario que se requiere. La cadena puede ser uno de los siguientes valores:
none: El servidor de autorización no muestra ninguna pantalla de autenticación o consentimiento del usuario; devolverá un error si el usuario no está ya autenticado y no ha preconfigurado el consentimiento para los alcances solicitados. Puedes usar none para verificar la autenticación y/o consentimiento existentes.consent: El servidor de autorización solicita el consentimiento del usuario antes de devolver información al cliente.select_account: El servidor de autorización solicita al usuario que seleccione una cuenta de usuario. Esto permite a un usuario que tiene múltiples cuentas en el servidor de autorización seleccionar entre las múltiples cuentas para las que puede tener sesiones actuales.
Tipos de configuración
| Nombre | Tipo |
|---|---|
| clientId | string |
| clientSecret | string |
| scope | string |
| prompts | string[] |
Habilitar Google One Tap
Google One Tap es una forma segura y fácil de permitir que los usuarios inicien sesión en tu sitio web o aplicación con su cuenta de Google.
Una vez que tengas configurado el conector de Google, verás una tarjeta para Google One Tap en la página de detalles del conector. Puedes habilitar Google One Tap en tus páginas de registro e inicio de sesión activando el interruptor.
Cuando habilitas Google One Tap, puedes configurar las siguientes opciones:
- Seleccionar automáticamente la credencial si es posible: Inicia sesión automáticamente al usuario con la cuenta de Google si se cumplen ciertas condiciones.
- Cancelar el aviso si el usuario hace clic/toca fuera: Cierra el aviso de Google One Tap si el usuario hace clic o toca fuera del aviso. Si está deshabilitado, el usuario debe hacer clic en el botón de cerrar para descartar el aviso.
- Habilitar la experiencia de usuario mejorada de One Tap en navegadores ITP: Habilita la experiencia de usuario mejorada de Google One Tap en navegadores con Prevención de Seguimiento Inteligente (ITP). Por favor, consulta esta página para más información.
Para habilitar Google One Tap en tu sitio web (más allá de la experiencia de inicio de sesión de Logto), esta función está en desarrollo. Por favor, mantente atento a las actualizaciones.