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 sul campo 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 App Information

      
      • Per favore, inserisci il tuo App Name

        Attenzione

        QUESTO SARÀ VISIBILE AI UTENTI

      • Inserisci il user support email

        Nota

        Puoi scoprire 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 una dimostrazione semplice che non DEVE pubblica, ma raccomando vivamente di compilare questa sezione.

      4. Tu DEVI inserire l'indirizzo email del developer

         

      5. Clicca su save and continue

         
6. Configura i permessi

   1. Clicca su add or remove scopes

      

   2. Seleziona i seguenti permessi e clicca update

      

   3. Clicca save and continue

      
7. Aggiungi un utente di test
   1. Clicca su add users
   2. Inserisci il tuo indirizzo email di Google, clicca invio e clicca add
   3. Clicca save and continue
8. Clicca back to dashboard
9. Invia il tuo 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. Ciò 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	❌	✅
Impostazione 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). Gli access token a lunga durata abilitano questa funzionalità consentendo al backend di chiamare gli API di Google in nome dell'utente in qualsiasi momento.

Attenzione

La modalità offline REQUISITO 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.

Attenzione

SocialLogin.refresh({ provider: 'google' }) fa non funziona 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 refresh, quindi rinnova quei token sul backend.

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

1. Vuoi che l'utente si accedi, subito dopo ti ritroverai a emettere 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 l'agenda 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 chiamata fetch di Javascript’s API

Puoi 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

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

Se desideri effettivamente chiamare Google API’, ti consiglio fortemente di guardare a Google’s OAuth 2.0 Playground. Dalla 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 memorizza il token di refresh in modo sicuro. 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-login-social per la capacità nativa in Utilizzare @capgo/capacitor-login-social, @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social, @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.