Configurazione Google Login

Introduzione

In questa guida imparerai a configurare Google Login con Capgo Social Login. Per configurare Google Login ti serve quanto segue:

• Un account Google

Configurazione generale

Nota

Questo passaggio è necessario indipendentemente dalla piattaforma che deciderai di utilizzare.

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

1. Please go to console.cloud.google.com
2. Clicca sul selettore del progetto
3. Se non hai ancora un progetto, procedi a creare un nuovo progetto.
   1. Clicca su New project
   2. Dai un nome al progetto e clicca su Create
   3. Assicurati di essere sul progetto corretto
4. Inizia a configurare il OAuth consent screen

   1. Clicca sulla barra di ricerca

      

   2. Cerca OAuth consent screen e cliccaci sopra

      

   3. Configura la schermata di consenso

      Nota

      Supponendo che tu stia sviluppando un'app pubblica, userò il/la external tipo di utente. Seleziona il tipo di utente più adatto per te E clicca create

      Clicca su create

      
5. Inserisci le informazioni sulla tua app

   1. Iniziamo con la App Information

      
      • Inserisci il tuo App Name

        Attenzione

        QUESTO SARÀ VISIBILE AGLI UTENTI

      • Inserisci il/la user support email

        Nota

        Puoi trovare maggiori info sull'email di supporto qui

      2. Tu PUÒ aggiungere il logo dell'app.

         

         Nota

         Non è obbligatorio e salterò questo passaggio

      3. Tu DOVRESTI configurare la App domain

         

         Nota

         Non lo farò perché questa è solo una demo che non verrà NON pubblicata, ma consiglio vivamente di compilare questa sezione.

      4. Tu È NECESSARIO fornire l'email dello sviluppatore

         

      5. Clicca su save and continue

         
6. Configura gli scope

   1. Clicca su add or remove scopes

      

   2. Seleziona i seguenti scope e clicca update

      

   3. Clicca su save and continue

      
7. Aggiungi un utente di test
   1. Clicca su add users
   2. Inserisci la tua email Google, premi invio e clicca su add
   3. Clicca su save and continue
8. Clicca su back to dashboard
9. Invia la tua app per la verifica

   Nota

   Ti consiglio vivamente di sottoporre l'app alla verifica. Questo tutorial non ne tratta i dettagli. Puoi approfondire qui. Non è necessario per i test locali, ma è obbligatorio per la produzione.

Differenze tra accesso online e offline

Esistono diversi modi per utilizzare Google Login con Capacitor. Ecco una tabella che riassume le differenze tra i due:

	Accesso online	Accesso offline
Richiede un backend	❌	✅
Access token a lunga durata	❌	✅
Easy setup	✅	❌

Nota

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 (ovvero quando l'utente è "offline" dal punto di vista della tua app). Gli access token a lunga durata abilitano questa funzionalità, permettendo al backend di chiamare le API di Google per conto dell'utente in qualsiasi momento.

Attenzione

La modalità offline RICHIEDE un server backend. Quando utilizzi la modalità offline, il frontend riceve informazioni minime (principalmente solo un code di autenticazione del server). Senza un backend che scambi questo code con token e informazioni utente, la modalità offline non fornisce dati utili alla tua applicazione frontend.

Attenzione

SocialLogin.refresh({ provider: 'google' }) funziona hai con google.mode: 'offline'. In modalità offline, il plugin ti fornisce solo serverAuthCode, e il tuo backend deve scambiare quel code con access e refresh token, per poi rinnovarli lato backend.

If you still do not know which one you should choose, please consider the following scenarios:

1. Vuoi che l'utente faccia il login per ricevere immediatamente un JWT personalizzato. La tua app NON chiamerà le API di Google

   In questo caso, scegli l'accesso online.

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

   In questo caso, scegli l'accesso online

3. La tua app chiamerà alcune API di Google dal backend, ma solo quando l'utente sta usando l'app

   In questo caso, scegli l'accesso online

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

   In questo caso, scegli l'accesso offline

Un esempio di backend per l'accesso online

In questa parte del tutorial, ti mostrerò come validare l'utente sul tuo backend.

Questo esempio sarà molto semplice e si baserà sulle seguenti tecnologie:

• Typescript

• Hono

• fetch di Javascript API

Puoi trovare il code per questo esempio qui

Come puoi vedere:

L'idea è piuttosto semplice. Invia una semplice GET richiesta a https://www.googleapis.com/oauth2/v3/tokeninfo questo ti restituisce se il token è valido o meno e, in caso positivo, l'email dell'utente. Fornisce anche altre informazioni sul token dell'utente

Da lì, potresti rilasciare all'utente il tuo JWT o un cookie di sessione. Le possibilità per l'implementazione finale dell'auth sono infinite.

Se vuoi chiamare le API di Google, ti consiglio vivamente di dare un'occhiata a Google OAuth 2.0 Playground. Da lì puoi vedere facilmente quali API puoi chiamare.

Usare l'offline access con il proprio backend

Per usare l'offline access avrai bisogno di quanto segue:

• Un server HTTP

In questo esempio, userò le seguenti tecnologie per fornire l'offline access nella mia app:

• Hono

• Validator Hono Zod

• Zod

• Hono JWT

• LowDb (un database semplice)

Il code per questo esempio si trova qui

Per quanto riguarda il client code, è 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());
  }
}

Nota cosa manca qui: non c'è una SocialLogin.refresh() call nell'app. È intenzionale. In modalità Google offline, il refresh avviene dopo che il tuo backend scambia serverAuthCode e salva il refresh token in modo sicuro.

Continua dalla configurazione di Google Login

Se stai usando Configurazione Google Login per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli 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 sull'implementazione dell'autenticazione a due fattori.