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

Utilizzo del login Google sul web

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

1. Creare un client web nel Console di Google

   Nota

   Se hai già configurato il login Google per Android, puoi saltare questo passo 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 nella tua applicazione

      

2. Configura il client Web nella Console di Google

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

      

   2. Ora, per favore aggiungi il Authorized JavaScript origins. Questo dovrebbe includere tutte le indirizzi che potresti utilizzare per il tuo app. Nel mio caso, utilizzerò SOLO utilizza localhost, ma poiché utilizzo un porto personalizzato devo aggiungere entrambi http://localhost e http://localhost:5173

      1. Per favore clicca sulla add URI

         

      2. Per favore digita 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. Aggiungi ora alcuni Authorized redirect URIsCiò dipenderà da quale pagina utilizzerai per utilizzare il plugin CapacitorSocialLogin. In questo caso, io sto utilizzando il plugin su http://localhost:5173/auth

      1. Please click on ADD URI

         

      2. Inserisci la tua URL e clicca ADD URL nuovamente

         

   4. Clicca save

      

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

   1. Prima, importa SocialLogin

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

   2. Chiamare quindi 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 del Redirect Web

   Gestione del redirect web MUST DEVI chiamare qualsiasi funzione del plugin quando accade il redirect per inizializzare il plugin affinché possa gestire il 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
   });

   context

   Attenzione SocialLogin.refresh({ provider: 'google' }) non è implementato, neanche quando si utilizza google.mode: 'online'non è implementato, neanche quando si utilizza SocialLogin.login({ provider: 'google', ... }) again.

   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 con Google Login su Web

Se stai utilizzando Google Login su Web per pianificare l'autenticazione e le flussi di account, connettilo con Utilizza @capgo/capacitor-login-social per la capacità nativa in Utilizza @capgo/capacitor-login-social @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social @capgo/capacitor-chiave di accesso per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometria-nativa 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.