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

Utilizzo del login Google sul web

L'utilizzo del login 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 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 sulla APIs and Services opzione (numero 2 nella schermata)

      

   3. Clicca sulla create credentials

      

   4. Seleziona OAuth client ID

      

   5. Seleziona il Application type as Web application

      

   6. Nome il tuo client e clicca Create

      

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

      

2. Configura il client Web nella 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. In mio caso, utilizzo solo localhost, ma poiché utilizzo un porto personalizzato devo aggiungere sia SOLAMENTE utilizzo http://localhost e http://localhost:5173

      1. Per favore clicca su add URI

         

      2. Per favore digita il tuo URL

         

      3. Per favore ripeti fino a quando non hai aggiunto tutti gli URL

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

         

   3. Ora, per favore aggiungi Authorized redirect URIs. Ciò dipenderà dalla pagina su cui intendi utilizzare il plugin CapacitorSocialLogin. In questo caso, io sto utilizzando http://localhost:5173/auth

      1. Clicca su ADD URI

         

      2. Inserisci la tua URL e clicca ADD URL nuovamente

         

   4. Clicca save

      

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

   1. In primo luogo, importa SocialLogin

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

   2. Chiamalo 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

   Quando si utilizza il login di Google sul web, dovete DEVE chiamare qualsiasi funzione dal plugin quando accade il redirect per inizializzare il plugin affinché possa gestire il redirect e chiudere la finestra popup. Potete chiamare sia 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

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

   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 Usando @capgo/capacitor-login sociale per la capacità nativa in Usando @capgo/capacitor-login sociale, @capgo/capacitor-login sociale per il dettaglio di implementazione in @capgo/capacitor-login sociale, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometrica nativa per il dettaglio di implementazione in @capgo/capacitor-biometrica nativa, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.