Login di Google su iOS

Copia un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo plugin.

Introduzione

In questo guide, imparerai a configurare l'accesso Google con Capgo Social Login per iOS. Assumo che tu abbia già letto la configurazione di base.

In questa parte, imparerai a configurare l'accesso Google in iOS.

Crea un ID client iOS nel console di Google
1. Clicca sulla barra di ricerca
2. Cerca credentials e clicca sul APIs and Services uno (numero 2 nella schermata)
3. Clicca sul create credentials
4. Seleziona OAuth client ID
5. Seleziona il Application type per iOS
6. Trova l'ID del bundle
  1. Apri Xcode
  2. Clicca due volte su App
  3. Assicurati di essere su Targets -> App
  4. Trova il tuo Bundle Identifier
  5. Torna indietro al Console di Google e incolla il tuo Bundle Identifier nel Bundle ID
7. Facoltativamente, aggiungi il tuo App Store ID o Team ID nel codice cliente se hai pubblicato il tuo app su App Store
8. Dopo aver riempito tutti i dettagli, clicca create
9. Clicca OK
10. Apre la nuova client iOS appena creata
11. Copia i seguenti dati
  
  The nr. 1 in questa immagine diventerà in seguito il iOSClientId nel initialize chiamata.
  The nr. 2 in questa immagine diventerà in seguito YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica il file Info.plist della tua app
1. Apri Xcode e trova il file Info.plist file Info.plist nel navigatore dei progetti di Xcode
2. Menu a discesa con l'opzione Apri come fonte code con il tasto destro del mouse
3. In fondo al tuo Plist file, vedrai un </dict> tag
4. Inserisci il seguente frammento prima della chiusura </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Cambia il YOUR_DOT_REVERSED_IOS_CLIENT_ID in il valore copiato nel passaggio precedente
  
  Assicurati che questo valore INIZIA con com.googleusercontent.apps
6. Salva il file con Command + S

Modifica il AppDelegate.swift

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

Modifica la funzione per farla assomigliare a questa

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)
}

Applicazione modificata openURL funzione con gestione GoogleSignIn

Salva il file con Command + S

Configura il login Google nel tuo JavaScript/TypeScript code
1. Importa SocialLogin e Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Chiamare il metodo di inizializzazione (questo dovrebbe essere chiamato solo una volta)
  
  Configurazione base (modalità online - consigliata per la maggior parte degli app):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Impostazione avanzata con ID client aggiuntivi:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
      mode: 'online'                               // 'online' or 'offline'
    }
  })
})
```
  Nota
  Requisiti per l'ID client:
  - iOSClientId: Obbligatorio - Deve concludersi con googleusercontent.com (dal passaggio 1 sopra)
  - webClientId: Facoltativo - Serve solo se si supporta anche la piattaforma web o si richiedono funzionalità avanzate
  - iOSServerClientId: Facoltativo - Dovrebbe essere lo stesso valore di webClientId quando viene fornito
  Per una configurazione avanzata con webClientId e iOSServerClientId, vedere la guida di configurazione web per creare questi credenziali. Attenzione Attenzione
  , la risposta di accesso non conterrà i dati dell'utente direttamente. Invece, riceverai un'autenticazione del server __CAPGO_KEEP_0__ che deve essere scambiata per informazioni sull'utente tramite il tuo server backend. When using mode: 'offline'the login response will not contain user data directly. Instead, you’ll receive a server auth code that must be exchanged for user information via your backend server. SocialLogin.refresh({ provider: 'google' }) non è disponibile in questo modo; il refresh deve avvenire sul tuo backend dopo l'interscambio serverAuthCode. Vedi il guida di configurazione generale per i dettagli di implementazione.
3. Implementa la funzione di accesso. Crea un pulsante e esegui il seguente code al click
  
  Per il modo online:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  Per il modo offline:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Recommended for offline mode
  }
})
// res contains serverAuthCode, not user data
// Send serverAuthCode to your backend to get user information
// Do not call SocialLogin.refresh() in offline mode
console.log('Server auth code:', res.result.serverAuthCode)
```
Testa la tua applicazione
1. Costruisci l'app e eseguila cap sync
2. Se hai fatto tutto correttamente, dovresti vedere il flusso di accesso Google che funziona correttamente

Problemi Noti

Incompatibilità del Plugin di Schermo di Privacy

Il plugin di accesso Google è incompatibile con capacitor/privacy-screenQuando si utilizzano entrambi i plugin insieme, il webview di accesso Google verrà interrotto dallo schermo di privacy.

Soluzione alternativa: Chiamata await PrivacyScreen.disable(); prima di chiamare la funzione di accesso:

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

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