Google Login su iOS

Introduzione

In questa guida imparerai come configurare Google Login con Capgo Social Login per iOS. Suppongo che tu abbia già letto la guida di configurazione generale.

In questa parte imparerai come configurare Google login su iOS.

Crea un ID client iOS nella console Google
1. Clicca sulla barra di ricerca
2. Cerca credentials e clicca su quello di APIs and Services (numero 2 nello screenshot)
3. Clicca su create credentials
4. Seleziona OAuth client ID
5. Seleziona il Application type come iOS
6. Trova il bundle ID
  1. Apri Xcode
  2. Doppio clic su App
  3. Assicurati di essere su Targets -> App
  4. Trova il tuo Bundle Identifier
  5. Torna alla Console Google e incolla il tuo Bundle Identifier in Bundle ID
7. Facoltativamente, aggiungi il tuo App Store ID o Team ID nell’ID client se hai pubblicato la tua app su App Store
8. Dopo aver compilato tutti i dettagli, clicca su create
9. Clicca su OK
10. Apri il client iOS appena creato
11. Copia i seguenti dati
  
  Il nr. 1 in questa immagine diventerà successivamente l’iOSClientId nella chiamata initialize.
  Il nr. 2 in questa immagine diventerà successivamente YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica il file Info.plist della tua app
1. Apri Xcode e trova il file Info.plist
2. Clicca con il tasto destro su questo file e aprilo come codice sorgente
3. In fondo al tuo file Plist, vedrai un tag </dict>
4. Inserisci il seguente frammento appena prima del tag di chiusura </dict>
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Cambia YOUR_DOT_REVERSED_IOS_CLIENT_ID con il valore copiato nel passaggio precedente
  
  Assicurati che questo valore INIZI con com.googleusercontent.apps
6. Salva il file con Command + S

Modifica AppDelegate.swift

Apri AppDelegate
Inserisci import GoogleSignIn all’inizio del file
Trova la funzione func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:])

Modifica la funzione in modo che appaia così

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call

    var handled: Bool

    handled = GIDSignIn.sharedInstance.handle(url)
    if handled {
      return true
    }

    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

Funzione application openURL modificata con la gestione di GoogleSignIn

Salva il file con Command + S

Configura Google login nel tuo codice JavaScript/TypeScript

Importa SocialLogin e Capacitor

import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';

Chiama il metodo initialize (questo dovrebbe essere chiamato solo una volta)

Configurazione base (modalità online - consigliata per la maggior parte delle app):
```
// onMounted è specifico di Vue
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Modalità predefinita
    }
  })
})
```
Configurazione avanzata con ID client aggiuntivi:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Opzionale: per il supporto della piattaforma web
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Obbligatorio: dal passaggio 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Opzionale: uguale a webClientId, necessario per alcune funzionalità avanzate
      mode: 'online'                               // 'online' o 'offline'
    }
  })
})
```
Note
Requisiti ID Client:
- iOSClientId: Obbligatorio - Deve terminare con googleusercontent.com (dal passaggio 1 sopra)
- webClientId: Opzionale - Necessario solo se supporti anche la piattaforma web o hai bisogno di funzionalità avanzate
- iOSServerClientId: Opzionale - Dovrebbe essere lo stesso valore di webClientId quando fornito
Per la configurazione avanzata con webClientId e iOSServerClientId, vedi la guida di configurazione web per creare queste credenziali.
Riguardo alla modalità offline: Quando usi mode: 'offline', la risposta di login non conterrà direttamente i dati dell’utente. Riceverai invece un codice di autenticazione del server che deve essere scambiato per le informazioni dell’utente tramite il tuo server backend. Vedi la guida di configurazione generale per i dettagli di implementazione.

Implementa la funzione di login. Crea un pulsante ed esegui il seguente codice al clic

Per la modalità online:

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// gestisci la risposta - contiene i dati dell'utente
console.log(JSON.stringify(res))

Per la modalità offline:

const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Consigliato per la modalità offline
  }
})
// res contiene serverAuthCode, non i dati dell'utente
// Invia serverAuthCode al tuo backend per ottenere le informazioni dell'utente
console.log('Server auth code:', res.result.serverAuthCode)

Testa la tua applicazione
1. Compila la tua app ed esegui cap sync
2. Se hai fatto tutto correttamente, dovresti vedere il flusso di login di Google funzionare correttamente

Problemi Noti

Incompatibilità con il Plugin Privacy Screen

Il plugin Google Login è incompatibile con @capacitor/privacy-screen. Quando si utilizzano entrambi i plugin insieme, la webview di login di Google verrà interrotta dalla schermata della privacy.

Soluzione alternativa: Chiama await PrivacyScreen.disable(); prima di chiamare la funzione di login:

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});