Accesso Google sul web

Introduzione

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

Utilizzare il login con Google sul web

Utilizzare il login Google sul web è piuttosto semplice. Per utilizzarlo, devi seguire i seguenti passaggi:

1. Creare un client web nel Console di Google

   Nota

   Se hai già configurato il login Google per Android, puoi saltare questo passaggio poiché 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. Scegli OAuth client ID

      

   5. Scegli il Application type come Web application

      

   6. Dai un nome al tuo client e clicca Create

      

   7. Copia l'ID del client, utilizzerai questo come il webClientId in tua applicazione

      

2. Configura il client web nel Console di Google

   1. Si prega di aprire la pagina delle credenziali e clicca sul tuo client web

      

   2. Ora, si prega di aggiungere il Authorized JavaScript origins. Questo dovrebbe includere tutte le indirizzi che potresti utilizzare per il tuo app. Nel mio caso, utilizzerò solo localhost, ma poiché utilizzo un porto personalizzato devo aggiungere sia e Si prega di cliccare sulla http://localhost sezione degli origini JavaScript autorizzati con pulsante AGGIUNGI URI http://localhost:5173

      1. SOLO add URI

         

      2. Inserisci il tuo URL

         

      3. Ripeti fino a quando non hai aggiunto tutti gli URL

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

         

   3. Aggiungi ora alcuni Authorized redirect URIsCiò dipenderà da quale pagina utilizzi per utilizzare il plugin CapacitorSocialLogin. Nel mio caso, sto utilizzando il plugin su http://localhost:5173/auth

      1. Clicca su ADD URI

         

      2. Inserisci il tuo URL e clicca ADD URL nuovamente

         

   4. Clicca save

      

3. Ora, dovresti essere pronto a chiamare login dalla riga di comando come segue:

   1. In primo luogo, importa SocialLogin

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

   2. Poi, chiama l'initialize. Questo deve 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 del redirect web

   Quando si utilizza il login di Google sul web, tu DEVI Eseguire una funzione del plugin quando avviene la reindirizzamento per inizializzare il plugin in modo che possa gestire il reindirizzamento e chiudere la finestra popup. Puoi chiamare sia isLoggedIn() O initialize() - entrambi attiveranno il trattamento del 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
   });

   Preavviso

   Sul Web SocialLogin.refresh({ provider: 'google' }) non è implementato, neanche quando si utilizza google.mode: 'online'Se hai bisogno di un token Google fresco sul 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 su Web per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login-social per la capacità nativa in Utilizzando @capgo/capacitor-login-social Utilizzando @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social Utilizzando @capgo/capacitor-passkey per il dettaglio 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 di implementazione in Autenticazione a due fattori.