Login Google sul web

Introduzione

In questo guide, imparerai a configurare l'accesso Google con Capgo Social Login per le applicazioni web. Assumo che tu abbia già letto la guida di configurazione generale.

Utilizzo dell'accesso Google sul web

L'utilizzo dell'accesso Google sul web è piuttosto semplice. Per utilizzarlo, devi fare le seguenti cose:

1. Crea un client web nel Console di Google

   Nota

   Se hai già configurato l'accesso Google per Android, puoi saltare questo passaggio perché hai già creato un client web. Puoi procedere direttamente al passo 2.

   1. Clicca sulla barra di ricerca

      

   2. Cerca credentials e clicca sull' APIs and Services opzione (numero 2 nella schermata)

      

   3. Clicca sul create credentials

      

   4. Seleziona OAuth client ID

      

   5. Seleziona il Application type come Web application

      

   6. Nomi il tuo client e clicca Create

      

   7. Copia l'ID del client, utilizzerai questo come il webClientId nel tuo applicativo

      

2. Configura il client Web nel Console di Google

   1. Per favore apri il pagina delle credenziali e clicca sul tuo client web

      

   2. Aggiungi ora, per favore, tutte le Authorized JavaScript originsindirizzi che potresti utilizzare per il tuo app. Nel mio caso, utilizzerò SOLO localhost, ma poiché utilizzo un porto personalizzato devo aggiungere sia http://localhost e http://localhost:5173

      1. Clicca sul add URI

         

      2. Inserisci il tuo URL

         

      3. Ripeti fino a quando non hai aggiunto tutte le URL

      4. Quando finisci, lo schermo dovrebbe avere un aspetto simile a questo

         

   3. Ora, per favore aggiungi alcune Authorized redirect URIsCiò dipenderà da quale pagina utilizzi per utilizzare il plugin CapacitorSocialLogin. In questo caso, io sto per utilizzarlo su http://localhost:5173/auth

      1. Per favore clicca su ADD URI

         

      2. Inserisci la tua URL e clicca ADD URL nuovamente

         

   4. Clicca save

      

3. Now, dovresti essere pronto a chiamare login come si fa qui sotto:

   1. Prima, importa SocialLogin

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

   2. Poi, chiama initialize. Questo dovrebbe essere chiamato 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 delle redirect web

   Quando si utilizza il login di Google sul web, tu DEVI chiamare qualsiasi funzione dal plugin quando accade la redirect per inizializzare il plugin in modo che possa gestire la redirect e chiudere la finestra popup. Puoi chiamare sia isLoggedIn() O initialize() - entrambi attiveranno il trattamento della reindirizzamento:

   // 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, anche quando si utilizza google.mode: 'online'. Se hai bisogno di un token Google fresco su Web, chiama SocialLogin.login({ provider: 'google', ... }) nuovamente.

   3. Crea un pulsante di accesso 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 utilizzando Google Login on Web per pianificare l'autenticazione e le flussi di account, connettilo con Utilizza @capgo/capacitor-social-login per la capacità nativa in Utilizza @capgo/capacitor-social-login, @capgo/capacitor-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per il dettaglio di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.