Google Login en la web

Introducción

En este manual, aprenderás a configurar el inicio de sesión de Google con Capgo Inicio de sesión social para aplicaciones web. Supongo que ya has leído el 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, debes hacer lo siguiente:

1. Crear un cliente web en la Consola de Google

   Notas

   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. Hacer clic en la barra de búsqueda

      

   2. Buscar por credentials y haz clic en la 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 webClientId en tu 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 los Authorized JavaScript origins. Esto debe incluir todos los direcciones que podrías usar para tu aplicación. En mi caso, yo agregaré SÓLO use localhost, pero ya que uso un puerto personalizado tengo que agregar ambos http://localhost y http://localhost:5173

      1. Por favor, haga clic en add URI

         

      2. Por favor, escriba su URL

         

      3. Por favor, repita hasta que haya agregado todas las URL

      4. Cuando termine, su pantalla debería verse como esta

         

   3. Ahora, por favor, agregue algunos Authorized redirect URIsEsto dependerá de qué página vas a utilizar para usar el plugin de inicio de sesión de CapacitorSocialLogin. En mi caso, voy a estar utilizando 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

      

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

   1. Primero, importe SocialLogin

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

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

   Redireccionamiento de Web

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

   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 SocialLogin.login cuando se hace clic

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

Siga desde Google Login en Web

Si está utilizando Google Login en Web para planificar la autenticación y los flujos de cuenta, conéctelo con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para los detalles de implementación en Autenticación de dos factores.