Configurazione di Google Login

Introduzione

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

• 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. Seleziona il progetto
3. Se non hai già un progetto, per favore crea un nuovo progetto.
   1. Seleziona New project
   2. Dai un nome al tuo progetto e seleziona Create
   3. Assicurati di essere sul progetto giusto
4. Inizia a configurare il OAuth consent screen

   1. Seleziona la barra di ricerca

      

   2. Cerca e clicca su di essa OAuth consent screen Clicca su di essa

      

   3. Configura lo schermo di consenso

      Nota

      Supporrò che tu stia sviluppando un'app 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. Inserisci 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 scoprire di più sull'email di supporto qui

      2. Puoi CAN aggiungere il logo dell'app.

         

         Nota

         Questo non è obbligatorio e saltare questo passo

      3. Tu DEVI configurare il App domain

         

         Nota

         Non farò questo perché si tratta di una semplice dimostrazione che non verrà pubblicata, ma fortemente consiglio di compilare questa sezione. NO Tu

      4. DEVI fornire l'indirizzo email del sviluppatore Sezione di informazioni di contatto per lo sviluppatore con campo email

         

      5. Salva e continua save and continue

         
6. Clicca su

   1. Aggiungi o rimuovi gli ambiti add or remove scopes

      

   2. Seleziona i seguenti ambiti 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. Ciò non è richiesto per il testing locale, ma è richiesto per la produzione.

Differenze tra accesso online e accesso offline

Esistono 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 valido	❌	✅
Impostazione facile	✅	❌

Nota

Modalità offline Ciò 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 punto di vista del tuo app). I token di accesso a lungo valido 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' }) non funziona con . In modalità offline il plugin ti fornisce solo , e il tuo backend deve scambiare quel __CAPGO_KEEP_0__ per token di accesso e di aggiornamento, quindi aggiorna quei token sul backend. google.mode: 'offline'Se non sai ancora quale scegliere, considera i seguenti scenari: serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

In questo caso scegli l'accesso online.

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

   In questo caso scegli l'accesso online

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

   Vuoi che l'utente si accedi, subito dopo ti troverai a rilasciare a lui un JWT personalizzato. La tua app NON chiamerà le API di Google

3. In questo caso scegli l'accesso online.

   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 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:

• TypeScript

• Hono

• Javascript's fetch API

Puoi trovare il code per questo esempio qui

As potresti vedere:

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'email dell'utente. Inoltre, ti dà alcune altre informazioni 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 desideri effettivamente chiamare Google __CAPGO_KEEP_0__’, ti consiglio fortemente di guardare a

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

Sottosezione intitolata “Utilizzare l'accesso offline con il tuo backend”

In modo da poter utilizzare l'accesso offline avrai bisogno delle seguenti cose:

• Un server HTTP

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

• Hono

• Validator Hono Zod

• Zod

• Hono JWT

• LowDb (una semplice database)

Il code per questo esempio può essere trovato qui

In quanto per 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'è 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 Utilizzando @capgo/capacitor-social-login per la capacità nativa in Utilizzando @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-login-social @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometric-nativo per i dettagli di implementazione in @capgo/capacitor-biometric-nativo, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.