Google Login su Web

Introduzione

In questa guida imparerai come configurare Google Login con Capgo Social Login per applicazioni web. Suppongo che tu abbia già letto la guida di configurazione generale.

Utilizzare Google login sul web

Utilizzare il login di Google sul web è piuttosto semplice. Per utilizzarlo, devi fare quanto segue:

1. Crea un client web nella Console Google

   Note

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

   1. Clicca sulla barra di ricerca

      

   2. Cerca credentials e clicca sull’opzione APIs and Services (numero 2 nello screenshot)

      

   3. Clicca su create credentials

      

   4. Seleziona OAuth client ID

      

   5. Seleziona il Application type come Web application

      

   6. Dai un nome al tuo client e clicca su Create

      

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

      

2. Configura il client web nella Console Google

   1. Apri la pagina delle credenziali e clicca sul tuo client web

      

   2. Ora aggiungi le Authorized JavaScript origins. Questo dovrebbe includere tutti gli indirizzi che potresti utilizzare per la tua app. Nel mio caso, userò SOLO localhost, ma poiché uso una porta personalizzata devo aggiungere sia http://localhost che http://localhost:5173

      1. Clicca su add URI

         

      2. Digita il tuo URL

         

      3. Ripeti fino a quando hai aggiunto tutti gli URL

      4. Quando hai finito, il tuo schermo dovrebbe apparire così

         

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

      1. Clicca su ADD URI

         

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

         

   4. Clicca su save

      

3. Ora dovresti essere pronto a chiamare login da JavaScript in questo modo:

   1. Prima, importa SocialLogin

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

   2. Poi, chiama initialize. Questo dovrebbe essere chiamato SOLO una volta.

      // onMounted è specifico di Vue
      // webClientId è l'ID client che hai ottenuto nel passaggio di creazione del client web, non l'ID client Android.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   Gestione del Reindirizzamento Web

   Quando usi Google login sul web, DEVI chiamare qualsiasi funzione del plugin quando avviene il reindirizzamento per inizializzare il plugin in modo che possa gestire il reindirizzamento e chiudere la finestra popup. Puoi chiamare sia isLoggedIn() CHE initialize() - entrambi attiveranno la gestione del reindirizzamento:

   // Opzione 1: Chiama isLoggedIn quando la pagina di reindirizzamento si carica
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignora il risultato, questo serve solo per inizializzare il plugin
   });
   
   // Opzione 2: Chiama initialize quando la pagina di reindirizzamento si carica
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignora eventuali errori, questo serve solo per gestire il reindirizzamento
   });

   3. Crea un pulsante di login che chiama SocialLogin.login quando viene cliccato

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Gestisci la risposta
      console.log(JSON.stringify(res));