Inicio de sesión de Google en Web

Introducción

En esta guía, aprenderás a configurar el inicio de sesión con Google con Capgo Social Login para aplicaciones web. Guía de configuración general.

Usando inicio de sesión con Google en la web

Usando el inicio de sesión de Google en la web es bastante sencillo. Para utilizarlo, 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. Haga clic en la barra de búsqueda

      

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

      

   3. Haga clic en la create credentials

      

   4. Seleccionar OAuth client ID

      

   5. Seleccionar 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

      

2. Configura el cliente web en el Console de Google

   1. Por favor, abra la página de credenciales y haga clic en su cliente web

      

   2. Ahora, por favor, agregue el Authorized JavaScript origins. Esto debe incluir todas las direcciones que podría usar para su aplicación. En mi caso, solo USARÉ localhost, pero desde que uso un puerto personalizado debo agregar tanto 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 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 el plugin CapacitorSocialLogin. 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 de la siguiente manera:

   1. Primero, importa SocialLogin

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

   2. Luego, llama a initialize. Esto debe ser llamado 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 Redirección en Web

   Manejo de redirección web MUST DEBES 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. Puedes llamar a cualquiera de isLoggedIn() O initialize() - Ambas activará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
   });

   Caution

   Precaución SocialLogin.refresh({ provider: 'google' }) no está implementado, incluso cuando se utiliza google.mode: 'online'no está implementado, incluso cuando se utiliza SocialLogin.login({ provider: 'google', ... }) again.

   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));

Continúa 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-biometría-nativa para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para los detalles de implementación en Autenticación en dos factores.