Configurazione del login Google

Introduzione

In questa guida vedrai come configurare il login Google con Capgo Social Login. Per completare la configurazione ti servirà:

• Un account Google

Configurazione generale

Note

Questo passaggio è obbligatorio indipendentemente dalla piattaforma che decidi di utilizzare.

In questa sezione configurerai la schermata di login mostrata da Google.

1. Vai su console.cloud.google.com
2. Fai clic sul selettore del progetto
3. Se non hai ancora un progetto, creane uno nuovo.
   1. Fai clic su New project
   2. Assegna un nome al progetto e fai clic su Create
   3. Assicurati di essere nel progetto corretto
4. Inizia la configurazione di OAuth consent screen

   1. Fai clic sulla barra di ricerca

      

   2. Cerca OAuth consent screen e fai clic sul risultato

      

   3. Configura la schermata di consenso

      Note

      In questo esempio assumo che tu stia sviluppando un’app aperta al pubblico, quindi userò il tipo di utente external. Scegli il tipo di utente più adatto al tuo caso e fai clic su Create.

      Fai clic su Create

      
5. Compila le informazioni sulla tua app

   1. Inizia da App Information

      
      • Inserisci il tuo App Name

        Caution

        QUESTO SARÀ VISIBILE AGLI UTENTI

      • Inserisci la User support email

        Note

        Puoi approfondire il significato dell’email di supporto qui.

   2. Puoi aggiungere il logo dell’app

      

      Note

      Non è obbligatorio e in questa guida salterò il passaggio.

   3. Dovresti configurare App domain

      

      Note

      In questa demo non lo compilerò perché non verrà pubblicata, ma per un’app reale è fortemente consigliato.

   4. Devi fornire l’email dello sviluppatore

      

   5. Fai clic su Save and continue

      
6. Configura gli scope
   1. Fai clic su Add or remove scopes
   2. Seleziona i seguenti scope e fai clic su Update
   3. Fai clic su Save and continue
7. Aggiungi un utente di test
   1. Fai clic su Add users
   2. Inserisci il tuo indirizzo Gmail, premi Invio e fai clic su Add
   3. Fai clic su Save and continue
8. Fai clic su Back to dashboard
9. Invia l’app per la verifica

   Note

   Ti consiglio fortemente di inviare la tua app per la verifica. Questo punto esula dallo scopo del tutorial. Puoi approfondire qui. Non è necessario per i test locali, ma è richiesto in produzione.

Differenze tra accesso online e accesso offline

Esistono diversi modi per usare il login Google con Capacitor. La tabella seguente riassume le differenze principali:

	Accesso online	Accesso offline
Richiede un backend	❌	✅
Token di lunga durata	❌	✅
Configurazione semplice	✅	❌

Note

La modalità offline significa che il tuo backend può accedere alle API di Google anche quando l’utente non sta usando attivamente la tua app. I token di accesso a lunga durata rendono possibile questo comportamento perché permettono al backend di chiamare le API Google per conto dell’utente in qualsiasi momento.

Caution

La modalità offline richiede un backend. In questo flusso il frontend riceve pochissime informazioni, di fatto soprattutto un server auth code. Senza un backend che scambi quel codice con token e dati utente, la modalità offline non fornisce dati utili alla tua applicazione frontend.

Se non sai ancora quale modalità scegliere, considera questi scenari:

1. Vuoi far effettuare il login all’utente e subito dopo emettere un JWT personalizzato. La tua app non chiamerà le API Google.

   In questo caso, scegli l’accesso online.

2. La tua app chiamerà alcune API Google dal client, ma mai dal backend.

   In questo caso, scegli l’accesso online.

3. La tua app chiamerà alcune API Google dal backend, ma solo mentre l’utente sta usando attivamente l’app.

   In questo caso, scegli l’accesso online.

4. La tua app controllerà periodicamente il calendario dell’utente anche quando non sta usando attivamente l’app.

   In questo caso, scegli l’accesso offline.

Un backend di esempio per l’accesso online

In questa parte del tutorial vedrai come validare l’utente sul tuo backend.

L’esempio è volutamente semplice ed è basato sulle seguenti tecnologie:

• TypeScript
• Hono
• JavaScript Fetch API

Puoi trovare il codice di questo esempio qui.

Come puoi vedere:

L’idea è molto semplice. Invi una richiesta GET a https://www.googleapis.com/oauth2/v3/tokeninfo e Google ti restituisce se il token è valido oppure no. Se è valido, la risposta include anche l’email dell’utente e altre informazioni sul token.

Da lì puoi emettere il tuo JWT oppure creare una sessione tramite cookie. Per l’implementazione finale dell’autenticazione, le possibilità sono molte.

Se vuoi chiamare le API Google, ti consiglio di usare Google’s OAuth 2.0 Playground. Ti permette di vedere facilmente quali API puoi chiamare.

Utilizzare l’accesso offline con il tuo backend

Per utilizzare l’accesso offline ti servirà:

• Un server HTTP

In questo esempio userò le seguenti tecnologie per fornire l’accesso offline nella mia app:

• Hono
• Hono Zod validator
• Zod
• Hono JWT
• LowDb (un database semplice)

Il codice completo di questo esempio è disponibile qui.

Per quanto riguarda il codice client, si presenta così:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}