Configura el inicio de sesión social con Google
El conector de Google proporciona una manera concisa para que tu aplicación utilice el sistema de autenticación OAuth 2.0 de Google.
Esta guía asume que tienes un entendimiento básico de los Conectores de Logto. Para aquellos que no están familiarizados, por favor consulta la guía de 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 nuevo proyecto, haz clic en APIs & Services para entrar en el menú 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 Edit app registration.
Edita el registro de la aplicación
Configura la pantalla de consentimiento OAuth
- Sigue las instrucciones para completar el formulario de la OAuth consent screen.
- Haz clic en SAVE AND CONTINUE para continuar.
Configura los 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 tus necesidades.
- Haz clic en SAVE AND CONTINUE para continuar.
Agrega 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.
Obtén credenciales de OAuth 2.0
- En el menú izquierdo de APIs & Services, haz clic en el botón Credentials.
- En la página 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 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 **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 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 seleccionar 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[] |
Habilita 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:
- Auto-select credential if possible: Inicia sesión automáticamente al usuario con la cuenta de Google si se cumplen ciertas condiciones.
- Cancel the prompt if user click/tap outside: 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.
- Enable Upgraded One Tap UX on ITP browsers: Habilita la experiencia de usuario mejorada de Google One Tap en navegadores con Intelligent Tracking Prevention (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.
Referencias
Google Identity: Setting up OAuth 2.0