Impostazione di accesso Google

Introduzione

In questo manuale, imparerai a configurare l'accesso Google con Capgo Social Login. Per configurare l'accesso Google avrai bisogno delle seguenti informazioni:

• Un account Google

Configurazione generale

Nota

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

In questa parte, configurerai lo schermo di accesso visualizzato 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 sul 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 OAuth consent screen E clicca su di essa

      

   3. Configura lo schermo di consenso

      Nota

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

      Scegli il tipo di utente OAuth con le opzioni Esterno e Interno create

      
5. Compilare le informazioni relative all'app

   1. Iniziare con la sezione App Information

      
      • Inserisci il tuo App Name

        Attenzione

        CIÒ SARÀ VISUALIZZATO DAI UTENTI

      • Inserisci il user support email

        Nota

        Puoi scoprire di più sull'indirizzo email del supporto qui

      2. Voi CAN aggiungere il logo dell'applicazione.

         

         Questo non è obbligatorio e potrei saltare questo passo

         Voi

      3. DEVI configurare la Configurazione del dominio dell'applicazione con campo dominio autorizzato App domain

         

         Nota

         Non lo farò perché questo è solo un semplice esempio che non verrà pubblicato, ma raccomando vivamente di compilare questa sezione. NON Lei

      4. context: you_definition, Page/area: Sito web di marketing Capgo. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina disclaimer.astro, pagina return.astro. Chiave di messaggio you_definition (You Definition). DEVE fornire l'indirizzo email del sviluppatore

         

      5. Clicca su save and continue

         
6. Configura gli ambiti

   1. Clicca su add or remove scopes

      

   2. Seleziona le seguenti autorizzazioni e clicca update

      

   3. Clicca save and continue

      
7. Aggiungi un utente di test
   1. Clicca su add users
   2. Inserisci la tua email Google, clicca 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 inviare la tua app per la 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 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	❌	✅
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 lungo termine abilitano questa funzionalità consentendo al backend di chiamare gli API di Google in nome dell'utente in qualsiasi momento.

Preavviso

La modalità offline RICHIEDE 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 dati utili all'applicazione frontend.

Attenzione

SocialLogin.refresh({ provider: 'google' }) funziona non con google.mode: 'offline'. In modalità offline il plugin ti offre solo serverAuthCodee il tuo backend deve scambiare quel code per token di accesso e di rinnovo, quindi rinnova questi ultimi sul backend.

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

1. Vuoi che l'utente si accedi, subito dopo ti occorre 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à alcuni API di Google dal backend, ma solo quando l'utente sta utilizzando attivamente l'app

   In questo caso, scegli l'accesso online

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

   In questo caso, scegli l'accesso offline

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:

• Tipi di dati

• Hono

• La chiamata fetch di Javascript API

Potrai trovare il code per questo esempio qui

Ecco cosa vedete:

L'idea è piuttosto semplice. Inviare una richiesta semplice a GET e questo ti restituisce se il token è valido o no e se lo è, ti dà l'indirizzo email dell'utente. Inoltre, ti dà alcune informazioni aggiuntive sul token dell'utente https://www.googleapis.com/oauth2/v3/tokeninfo Google OAuth Playground mostrando informazioni di risposta del token con dettagli dell'utente

Se desiderate effettuare una chiamata a Google __CAPGO_KEEP_0__’, vi consiglio vivamente di consultare

If you do want to call Google API’s, I would strongly recommend looking at . Da lì potrete facilmente vedere quali API potete chiamare.Utilizzare l'accesso offline con il tuo backend

Utilizzare l'accesso offline con il tuo backend

Per utilizzare l'accesso offline avrai bisogno delle seguenti cose:

• Un server HTTP

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

• Hono

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (una semplice database)

Il code per questo esempio può essere trovato qui

As per il client code, sembra questo:

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'è alcun SocialLogin.refresh() chiamata nell'app. Questo è intenzionale. In modalità offline di Google, il refresh avviene dopo che il tuo backend scambia 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 Utilizza @capgo/capacitor-social-login per la capacità nativa in Utilizza @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Due fattori di autenticazione per i dettagli di implementazione in Due fattori di autenticazione.