Configurazione di Google Login

Introduzione

In questo guide, imparerai a configurare l'accesso Google con Capgo Social Login. Avrai bisogno delle seguenti informazioni per configurare l'accesso Google:

• Un account Google

Configurazione generale

Nota

Questo passaggio è richiesto indipendentemente dal piattaforma che decidi di utilizzare.

In questa parte, configurerai la schermata di accesso visualizzata da Google.

1. Per favore vai a console.cloud.google.com
2. Clicca sul selettore del progetto
3. Se non hai già un progetto, per favore crea un nuovo progetto.
   1. Clicca su New project
   2. Nomi il tuo progetto e clicca Create
   3. Assicurati di essere sul progetto giusto
4. Inizia a configurare il OAuth consent screen

   1. Clicca sulla barra di ricerca

      

   2. Cerca per OAuth consent screen e clicca su di esso

      

   3. Configura lo schermo di consenso

      Nota

      Suppongo che tu stia sviluppando un'applicazione aperta al pubblico, quindi userò il external tipo di utente. Seleziona il tipo di utente che ti conviene di più E clicca create

      Clicca su create

      
5. Riempire le informazioni sulla tua app

   1. Iniziamo con la sezione App Information

      
      • Per favore, inserisci il tuo App Name

        Attenzione

        CIÒ SARÀ VISUALIZZATO DAI UTENTI

      • Inserisci il user support email

        Nota

        Puoi imparare di più sull'indirizzo email di supporto qui

      2. Tu PUOI aggiungere il logo dell'app.

         

         Nota

         Questo non è obbligatorio e saltare questo passo

      3. Tu DEVI configurare la App domain

         

         Nota

         Non lo farò perché questo è solo un semplice esempio che non DEVE pubblica, ma ti consiglio vivamente di compilare questa sezione.

      4. Tu DEVI inserire l'indirizzo email del developer

         

      5. Clicca su save and continue

         
6. Configura gli ambiti

   1. Clicca su add or remove scopes

      

   2. Seleziona gli ambiti seguenti e clicca su update

      

   3. Clicca save and continue

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

   Nota

   Consiglio vivamente di sottoporre il tuo app alla verifica. Questo è al di fuori dello scopo di questo tutorial. Puoi imparare di più qui. Questo non è richiesto per il testing locale, ma è richiesto per la produzione.

Differenze tra accesso online e accesso offline

Ci sono diverse modalità per utilizzare Google Login con Capacitor. Ecco una tabella che riassume le differenze tra le due:

	Accesso online	Accesso offline
Richiede un backend	❌	✅
Token di accesso a lungo termine	❌	✅
Esempio di configurazione facile	✅	❌

Nota

Modalità offline significa che il tuo backend può accedere agli API di Google anche quando l'utente non sta utilizzando attivamente il tuo app (cioè, quando l'utente è “offline” dal tuo punto di vista). I token di accesso a lunga durata abilitano questa funzionalità consentendo al backend di chiamare gli API di Google in nome dell'utente in qualsiasi momento.

Preavviso

La modalità offline REQUISITA un server backend. Quando si utilizza la modalità offline, il frontend riceve informazioni minimale (principalmente solo un'autenticazione del server code). Senza un backend per scambiare questo code per token e informazioni sull'utente, la modalità offline non fornisce alcuna informazione utile all'applicazione frontend.

Preavviso

SocialLogin.refresh({ provider: 'google' }) è Not funziona con Lavorare con google.mode: 'offline'. In modalità offline il plugin ti offre solo serverAuthCode, e il tuo backend deve scambiare quel code per token di accesso e di aggiornamento, quindi aggiorna quei token sul backend.

Se ancora non sai quale scegliere, considera i seguenti scenari:

1. Vuoi che l'utente si accedi, subito dopo ti conviene emettergli 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 utilizzando l'app in modo attivo

   In questo caso scegli l'accesso online

4. La tua app controlla periodicamente il calendario dell'utente, anche quando non sta utilizzando l'app in modo attivo

   In questo caso, scegli l'accesso offline

Un esempio di backend per l'accesso online

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

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

• TypeScript

• Hono

• La richiesta di rete di Javascript con API

Potrai trovare il code per questo esempio qui

Come puoi vedere:

The idea is rather simple. You send a simple GET richiesta a https://www.googleapis.com/oauth2/v3/tokeninfo e questo ti restituisce se il token è valido o no e se lo è, ti dà l'indirizzo email dell'utente. Inoltre, ti dà alcune altre informazioni sul token dell'utente

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

Se desideri effettivamente chiamare Google API’, ti consiglio fortemente di guardare Google’s OAuth 2.0 Playground. Dal lì puoi facilmente vedere quali API puoi chiamare.

Utilizzare l'accesso offline con il tuo backend

Per utilizzare l'accesso offline avrai bisogno dei seguenti:

• Un server HTTP

In questo esempio, utilizzerò le seguenti tecnologie per fornire l'accesso offline nell'applicazione:

• Hono

• Hono validator Zod

• Zod

• Hono JWT

• LowDb (una semplice database)

Il code per questo esempio può essere trovato qui

Per quanto riguarda il client code, ha questo aspetto:

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'è nulla SocialLogin.refresh() chiamare nell'app. Ciò è intenzionale. In modalità offline di Google, il refresh avviene dopo che il tuo backend scambia e serverAuthCode e memorizza il token di refresh in modo sicuro.

Continua da Google Login Setup

Se stai utilizzando Google Login Setup per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzare @capgo/capacitor-social-login per la capacità nativa in Utilizzare @capgo/capacitor-social-login, @capgo/capacitor-social-login per il dettaglio 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 di implementazione in Autenticazione a due fattori.