Google Login en Web

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.

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

Usar el inicio de sesión de Google en la web es bastante sencillo. Para usarlo, tiene que hacer lo siguiente:

1. Crear un cliente web en la Consola de Google

   Nota

   Si ya ha configurado el inicio de sesión de Google para Android, puede saltarse este paso ya que ya ha creado un cliente web. Puede proceder directamente al paso 2.

   1. Haga clic en la barra de búsqueda

      

   2. Buscar por credentials y haga clic en el APIs and Services opción (número 2 en la captura de pantalla)

      

   3. Haga clic en el create credentials

      

   4. Seleccione OAuth client ID

      

   5. Seleccione el Application type como Web application

      

   6. Nombra a tu cliente y haz clic Create

      

   7. Copia el ID del cliente, lo utilizarás como webClientId en tu aplicación

      

2. Configura el cliente Web en el Console 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. Este debe incluir todas las direcciones que podrías usar para tu aplicación. En mi caso, utilizaré SÓLO localhost, pero dado que uso un puerto personalizado, debo agregar ambos 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 URIs. Esto dependerá de qué página vas a utilizar el plugin de inicio de sesión social de Capacitor. http://localhost:5173/auth

      1. Por favor, haz clic en ADD URI

         

      2. Introduce 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

   Cuando se utiliza el inicio de sesión de Google en la web, usted DEBE llamar a cualquier función del complemento cuando suceda 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() - ambos 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
   });

   Cuidado

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

   3. Cree 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));

Siga desde el inicio de sesión de Google en la Web

Si está utilizando el inicio de sesión de Google en la Web para planificar la autenticación y los flujos de cuenta, conéctelo 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-passkey para el detalle de implementación en @capgo/capacitor-passkey @capgo/capacitor-biométrico-nativo para el detalle de implementación en @capgo/capacitor-biométrico-nativo, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores