Inicio de sesión de Google en la 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.

Uso del inicio de sesión de Google en la web

El uso del inicio de sesión de Google en la web es bastante sencillo. Para utilizarlo, tiene que hacer lo siguiente:

1. Crear un cliente web en la Consola de Google

   Nota

   Si ya has configurado Google Login 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 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 selección del tipo de aplicación con opción Web destacada Web application

      

   6. Formulario de creación de cliente Web con campo de nombre destacado Create

      

   7. en su aplicación webClientId Detalles del ID del cliente mostrando ID del cliente Web para copiar

      

2. Por favor, abra la

   1. página de credenciales y haga clic en su cliente Web Lista de credenciales mostrando cliente Web para clicar

      

   2. Ahora, por favor, agrega el Authorized JavaScript originsEsto debe incluir todas las direcciones que podrías usar para tu aplicación. En mi caso, utilizaré SÓLO localhost, pero dado que utilizo un puerto personalizado, debo agregar tanto http://localhost y http://localhost:5173

      1. Por favor, haz clic en add URI

         

      2. Por favor, escribe 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, agregue algunos Authorized redirect URIs. Esto dependerá de qué página depende para usar el plugin de inicio de sesión social de Capacitor. http://localhost:5173/auth

      1. En mi caso, voy a estar utilizando en ADD URI

         

      2. sección de URIs de redireccionamiento autorizadas con botón ADD URI ADD URL Ingrese su URL y haga clic

         

   4. diálogo de agregar URI con la URL de redireccionamiento ingresada save

      

3. botón Guardar en la parte inferior de la configuración del cliente web login Ahora, debería estar listo para llamar

   1. desde JavaScript de la siguiente manera: 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 Redirección Web

   Cuando estés utilizando el inicio de sesión de Google en web, debes DEBES 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. Puedes llamar a isLoggedIn() O initialize() - ambas desencadenarán la gestión de 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 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 a SocialLogin.login({ provider: 'google', ... }) de nuevo.

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