Inicio de sesión de Google en Web

Introducción

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

Usar inicio de sesión de Google en la web

Usar el inicio de sesión de Google en la web es bastante sencillo.

1. Para usarlo, debes hacer lo siguiente:

   Notas

   Notas

   1. 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.

      

   2. Barra de búsqueda de la Consola de Google credentials Buscar APIs and Services y hacer clic en la

      

   3. Haga clic en el create credentials

      

   4. Seleccione OAuth client ID

      

   5. Seleccione el Application type como Web application

      

   6. Denomine a su cliente y haga clic Create

      

   7. Copie el ID de cliente, lo utilizará como el webClientId en su aplicación

      

2. Configura el cliente web en la Consola de Google

   1. Por favor, abre la página de credenciales y haz clic en tu cliente web

      

   2. Ahora, por favor, agrega el Authorized JavaScript origins. Esto debe incluir todas las direcciones que podrías usar para tu aplicación. En mi caso, solo SOLO usaré localhost, pero desde que uso un puerto personalizado debo agregar tanto http://localhost y http://localhost:5173

      1. Por favor, haz clic en add URI

         

      2. Por favor, ingresa tu URL

         

      3. Por favor, repite hasta que hayas agregado todas las URL

      4. Cuando termines, tu pantalla debería verse algo así

         

   3. Ahora, por favor, agrega algunos Authorized redirect URIsEsto dependerá de qué página vas a utilizar para usar el plugin de inicio de sesión social de Capacitor. En mi caso, voy a utilizarlo en http://localhost:5173/auth

      1. Por favor, haz clic en ADD URI

         

      2. Ingresa tu URL y haz clic ADD URL de nuevo

         

   4. Haz clic save

      

3. Ahora, deberías estar listo para llamar login desde JavaScript de la siguiente manera:

   1. Primero, importa SocialLogin

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

   2. 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',
         }
       })
      })

   Gestión de redirecciones web

   Al utilizar el inicio de sesión de Google en la web, debes DEBES Llame 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. Puede llamar a isLoggedIn() O 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
   });

   Advertencia

   En Web, SocialLogin.refresh({ provider: 'google' }) no está implementado, incluso cuando se utiliza google.mode: 'online'. Si necesita un token de Google fresco en Web, llame SocialLogin.login({ provider: 'google', ... }) de nuevo.

   3. Crear un botón de inicio de sesión que llame a SocialLogin.login al hacer clic

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

Sigue adelante desde Google Login en Web

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-nativo-biometrico para el detalle de implementación en @capgo/capacitor-nativo-biometrico, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.