Google Login su Web

Introduzione

In questa guida imparerai a configurare Google Login con Capgo Social Login per applicazioni web. Presumo che tu abbia già letto la guida alla configurazione generale.

Utilizzo di Google Login sul web

Usare Google Login sul web è piuttosto semplice. Per usarlo, devi fare quanto segue:

1. Crea un client web nella Google Console

   Nota

   Se hai già configurato Google Login per Android, puoi saltare questo passaggio poiché hai già creato un client web. Puoi passare direttamente al punto 2.

   1. Clicca sulla barra di ricerca

      

   2. Cerca credentials and click on the APIs and Services opzione (numero 2 nello screenshot)

      

   3. Clicca sul create credentials

      

   4. Seleziona OAuth client ID

      

   5. Seleziona la Application type come Web application

      

   6. Dai un nome al client e clicca su Create

      

   7. Copia il client ID, lo userai come webClientId nella tua applicazione

      

2. Configura il client web nella Google Console

   1. Please open the pagina delle credenziali e clicca sul tuo client web

      

   2. Ora, aggiungi il Authorized JavaScript origins. Dovresti includere tutti gli indirizzi che potresti usare per la tua app. Nel mio caso, userò SOLO localhost, ma dato che uso una porta personalizzata devo aggiungere entrambi http://localhost e http://localhost:5173

      1. Please click on add URI

         

      2. Inserisci il tuo URL

         

      3. Ripeti l'operazione finché non avrai aggiunto tutti gli URL

      4. Una volta terminato, la schermata dovrebbe apparire così

         

   3. Ora, aggiungi alcuni Authorized redirect URIs. Dipenderà dalla pagina in cui vuoi usare il plugin CapacitorSocialLogin. Nel mio caso, lo userò su http://localhost:5173/auth

      1. Please click on ADD URI

         

      2. Inserisci il tuo URL e clicca ADD URL di nuovo

         

   4. Clicca su save

      

3. Ora sei pronto per chiamare login da JavaScript in questo modo:

   1. Per prima cosa, importa SocialLogin

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

   2. Poi, chiama initialize. Questa operazione va eseguita UNA SOLA volta.

      // 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',
         }
       })
      })

   Gestione del redirect web

   Quando usi il login con Google sul web, DEVI chiamare qualsiasi funzione dal plugin quando avviene il redirect, per inizializzarlo in modo che possa gestire il redirect e chiudere la finestra popup. Puoi chiamare una delle due: isLoggedIn() O initialize() - entrambi attiveranno la gestione del redirect:

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

   Attenzione

   Sul Web, SocialLogin.refresh({ provider: 'google' }) non è implementato, nemmeno usando google.mode: 'online'. Se ti serve un nuovo token Google sul Web, chiama SocialLogin.login({ provider: 'google', ... }) ancora.

   3. Crea un pulsante di login che chiama SocialLogin.login when clicked

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

Continua con Google Login sul Web

Se stai usando Google Login su Web per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.