Configurazione di accesso Google

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 passo è richiesto indipendentemente dal piattaforma che scegli 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. Nome il tuo progetto e clicca Create
   3. Assicurati di essere sul progetto giusto
4. Iniziare a configurare il OAuth consent screen

   1. Clicca sulla barra di ricerca

      

   2. Cerca OAuth consent screen e clicca su di esso

      

   3. Configura lo schermo di consenso

      Nota

      I supporso che stiate sviluppando un'applicazione accessibile al pubblico, quindi userò il external Seleziona il tipo di utente che ti conviene di più E clicca create

      Clicca su create

      
5. Riempi le informazioni sulla tua app

   1. Iniziamo con il App Information

      
      • Inserisci il tuo App Name

        Caution

        Questo verrà visualizzato agli utenti

      • Enter the user support email

        Nota

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

      2. Tu CAN Aggiungi il logo dell'app.

         

         Nota

         Sezione di caricamento del logo dell'app in schermo di consenso OAuth

      3. Tu Dovresti configurare la App domain

         

         Nota

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

      4. Tu Devi inserisci 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 update

      

   3. Clicca save and continue

      
7. Aggiungi un utente di prova
   1. Clicca su add users
   2. Inserisci il tuo indirizzo email di 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

   Raccomiamo vivamente di sottoporre la tua app al processo di verifica. Ciò non rientra nell'ambito di questo tutorial. Puoi scoprire di più qui. Ciò non è richiesto per la prova locale, ma è richiesto per la produzione.

Differenze tra accesso online e offline

Esistono diverse modalità per utilizzare il login con Google con Capacitor. Ecco una tabella che riassume le differenze tra le due opzioni:

	Accesso online	Accesso offline
Richiede un backend	❌	✅
Token di accesso a lunga durata	❌	✅
Easy setup	✅	❌

Nota

Modalità offline significa che il tuo backend può accedere agli API di Google anche quando l'utente non sta utilizzando l'app (cioè quando l'utente è “offline” dal punto di vista dell'app). 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.

Attenzione

La modalità offline REQUISCE 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 utente, la modalità offline non fornisce dati utili all'applicazione frontend.

Attenzione

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

Se non hai ancora deciso quale scegliere, considera i seguenti casi di utilizzo.

1. Vorresti che l'utente si accedi, immediatamente dopo che gli verrà emesso un JWT personalizzato. La tua app NON chiamerà le API di Google

   Scegli l'accesso online in questo caso.

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 attivamente l'app

   In questo caso, scegli l'accesso online

4. La tua app controlla periodicamente l'agenda 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 script

• Hono

• La chiamata fetch di Javascript API

Puoi trovare l'code per questo esempio qui

Come puoi vedere:

L'idea è piuttosto semplice. Invi un semplice 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'email dell'utente. Inoltre, ti dà alcune altre informazioni sul token dell'utente

Da lì, potresti emettere l'utente con il tuo JWT o emettere un tipo di cookie di sessione. Le possibilità sono infinite, per l'implementazione di autenticazione finale.

If desideri effettuare una chiamata a Google API’, ti consiglio vivamente di esaminare Google OAuth 2.0 Playground. Da lì potrai facilmente vedere quali API puoi chiamare.

Utilizzo dell'accesso offline con il tuo backend

Per utilizzare l'accesso offline avrai bisogno dei seguenti:

• Un server HTTP

Utilizzerò le seguenti tecnologie per fornire l'accesso offline nell'applicazione mia:

• Hono

• Hono Validator di Zod

• Zod

• Hono JWT

• LowDb (una semplice database)

Il code per questo esempio può essere trovato qui

Per quanto riguarda il client code, assomiglia a 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. Ciò è 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 Configurazione di accesso Google per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzo di @capgo/capacitor-login-social per la capacità nativa in Utilizzo di @capgo/capacitor-login-social @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social @capgo/capacitor-chiave di accesso per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometria-nativa per il dettaglio di implementazione in @capgo/capacitor-biometria-nativa, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.