Google Login en Web

Copia un prompt de configuración con los pasos de instalación y la guía completa en markdown para este plugin.

Introducción

En esta guía, aprenderás a configurar Google Login con Capgo Social Login para aplicaciones web. Asumo que ya has leído la guía de configuración general.

Usar Google Login en la web es bastante sencillo. Para utilizarlo, debes seguir estos pasos:

Crea un cliente web en la Google Console

Si ya configuraste Google Login para Android, puedes omitir este paso, puesto que ya has creado un cliente web. Pasa directamente al paso 2.
1. Haz clic en la barra de búsqueda
2. Busca credentials y haz clic en el APIs and Services opción (número 2 en la captura)
3. Haz clic en el create credentials
4. Selecciona OAuth client ID
5. Selecciona el Application type como Web application
6. Nombra tu cliente y haz clic en Create
7. Copia el client ID, lo usarás como el webClientId en tu aplicación
Configura el cliente web en la Google Console
1. Por favor, abre la página de credenciales y haz clic en tu cliente web
2. Ahora, añade el Authorized JavaScript origins. Esto debe incluir todas las direcciones que uses en tu app. En mi caso, usaré SOLO uso localhost, pero como uso un puerto personalizado tengo que añadir ambos http://localhost y http://localhost:5173
  1. Haz clic en add URI
  2. Escribe tu URL
  3. Repite el proceso hasta añadir todas las URLs
  4. Cuando termines, tu pantalla debería verse así
3. Ahora, por favor añade algunos Authorized redirect URIs. Esto dependerá de en qué página utilices el plugin CapacitorSocialLogin. En mi caso, lo usaré en http://localhost:5173/auth
  1. Haz clic en ADD URI
  2. Introduce tu URL y haz clic en ADD URL de nuevo
4. Haz clic save

Ahora, ya puedes llamar a login desde JavaScript de esta forma:

Primero, importa SocialLogin

import { SocialLogin } from '@capgo/capacitor-social-login';

Luego, llama a initialize. Solo debe llamarse UNA vez.

// onMounted is Vue specific
// webClientId is the client ID you got in the web client creation step not the android client ID.
onMounted(() => {
 SocialLogin.initialize({
   google: {
     webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
   }
 })
})

Al usar el login de Google en la web, DEBES llamar a cualquier función del plugin cuando se produzca la redirección para inicializarlo; así podrá gestionar la redirección y cerrar la ventana emergente. Puedes llamar a isLoggedIn() O BIEN initialize() - ambas activarán la gestión de la redirección:

// Option 1: Call isLoggedIn when the redirect page loads
SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
  // Ignore the result, this is just to initialize the plugin
});

// Option 2: Call initialize when the redirect page loads
SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
  }
}).catch(() => {
  // Ignore any errors, this is just to handle the redirect
});

Crea un botón de login que llame a SocialLogin.login al hacer clic

const res = await SocialLogin.login({
 provider: 'google',
 options: {}
})
// Handle the response
console.log(JSON.stringify(res));

Si estás usando Google Login en Web para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.

Google Login en Web

Introducción

Uso de Google Login en la web

Continúa con Google Login en la web