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 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 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. Seleccione 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 la Consola de Google

   1. Por favor, abre la página de credenciales Haga clic en su cliente web

      

   2. Ahora, por favor, agregue el Authorized JavaScript originsEsto debe incluir todas las direcciones que podría usar para su aplicación. En mi caso, yo SÓLO usaré localhost, pero desde que uso un puerto personalizado debo agregar ambos http://localhost y http://localhost:5173

      1. Haga clic en add URI

         

      2. Por favor, escriba su URL

         

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

      4. When has terminado, su 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 inicio de sesión 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

      

3. Ahora deberías estar listo para llamar login de la misma manera que JavaScript:

   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, 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 la gestión de redirecciones:

   // 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 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 al hacer clic

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

Siga adelante desde Google Login en Web

If you are using Google Login en Web para planificar la autenticación y los flujos de cuenta, conectéalo 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-secuadora para el detalle de implementación en @capgo/capacitor-clave-secuadora @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.