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 perché hai già creato un client web. Puoi passare direttamente al punto 2.

   1. Clicca sulla barra di ricerca

      

   2. Cerca credentials e clicca sulla 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. Deve includere tutti gli indirizzi che potresti usare per la tua app. Nel mio caso, userò SOLO usa localhost, ma poiché utilizzo una porta personalizzata devo aggiungere entrambi http://localhost e http://localhost:5173

      1. Fai clic su add URI

         

      2. Inserisci il tuo URL

         

      3. Ripeti finché non hai aggiunto tutti gli URL

      4. Quando hai finito, il tuo schermo dovrebbe apparire più o meno 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. Fai clic su 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. Deve essere chiamata SOLO una 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

   Su Web, SocialLogin.refresh({ provider: 'google' }) non è implementato, nemmeno quando si usa google.mode: 'online'. Se hai bisogno di un nuovo token Google su Web, chiama SocialLogin.login({ provider: 'google', ... }) ancora.

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

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

Continua da Google Login su 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.