Google Login en la web

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

Introducción

En esta guía, aprenderá a configurar el inicio de sesión de Google con Capgo Inicio de sesión social para aplicaciones web. Supongo que ya ha leído la guía de configuración general.

Para usarlo, tiene que hacer lo siguiente:

Crear un cliente web en el Console de Google

Si ya has configurado el inicio de sesión de Google para Android, puedes saltarte este paso ya que ya has creado un cliente web. Puedes proceder 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 de pantalla)
3. Haz clic en el create credentials
4. Selecciona OAuth client ID
5. Selecciona el Application type como Web application
6. Nombra a tu cliente y haz clic Create
7. Copia el ID de cliente, lo utilizarás como el webClientId en tu aplicación
Configura el cliente Web en la Consola de Google
1. Por favor, abre el página de credenciales y haz clic en tu cliente web
2. Ahora, por favor, agrega el Authorized JavaScript originsEsto debe incluir todas las direcciones que podrías usar para tu aplicación. En mi caso, utilizaré SÓLO localhost, pero dado que utilizo un puerto personalizado debo agregar ambos http://localhost y http://localhost:5173
  1. Haz clic en add URI
  2. Por favor, escribe tu URL
  3. Por favor, repita hasta que agregue todas las URL
  4. Cuando termines, tu pantalla debería verse algo así
3. Ahora, por favor, agregue algunos Authorized redirect URIsEsto dependerá de qué página vas a utilizar el plugin de CapacitorSocialLogin. En mi caso, voy a utilizarlo en http://localhost:5173/auth
  1. Por favor, haga clic en ADD URI
  2. Ingrese su URL y haga clic ADD URL de nuevo
4. Haga clic save

Now, you should be ready to call login de la siguiente manera:

Primero, importa SocialLogin

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

Luego, llama a initialize. Esto debe llamarse SOLO 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',
   }
 })
})

Cuando se utilice el inicio de sesión de Google en web, DEBE llamar a cualquier función del complemento cuando ocurra la redirección para inicializar el complemento para que pueda manejar la redirección y cerrar la ventana emergente de popup. Puede llamar a O isLoggedIn() OR initialize() - ambas desencadenarán el manejo 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
});

Crear un botón de inicio de sesión que llame a SocialLogin.login cuando se hace clic

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

Si estás utilizando Google Login en Web para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.

Google Login en la web

Introducción

Usando el inicio de sesión de Google en la web

Siga adelante desde Google Login en Web