Login con 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 guida di configurazione generale. Configurazione generale.

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

Creare un ID di client iOS nel console di Google
1. Clicca sulla barra di ricerca
2. Cerca credentials e clicca sul APIs and Services uno (numero 2 nell'immagine)
3. Clicca sul create credentials
4. Seleziona OAuth client ID
5. Seleziona il Application type per iOS
6. Trova l'ID del bundle
  1. Apre Xcode
  2. Clicca due volte su App
  3. Assicurati di essere nella sezione Targets -> App
  4. Cerca il tuo Bundle Identifier
  5. Torna indietro al Console di Google e incolla il tuo Bundle Identifier nel Bundle ID
7. Aggiungi optionalmente il tuo App Store ID o Team ID inserisci il codice cliente se hai pubblicato l'app sullo Store App
8. Dopo aver riempito tutti i dettagli, clicca create
9. Clicca OK
10. Apre il nuovo client iOS creato
11. Copia i seguenti dati
  
  The nr. 1 in questa immagine diventerà in seguito iOSClientId nel initialize la chiamata.
  The nr. 2 In questa immagine, il YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica il tuo file Info.plist
1. Apre Xcode e trova il Info.plist file
2. Clicca con il tasto destro su questo file e aprilo come fonte code
3. Al fondo della tua Plist il file, vedrai una tag </dict> tag
4. Chiudere il tag di dizionario in Info.plist file </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 al valore copiato nel passo 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 alla fine 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)
}

Funzione di apertura dell'applicazione modificata con gestione di GoogleSignIn

Salva il file con Command + S

Configura il login di Google nel tuo JavaScript/TypeScript code

Importa SocialLogin e Capacitor

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

Chiamare il metodo di inizializzazione (questo deve essere chiamato solo una volta)

Impostazione 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
    }
  })
})
```
Configurazione 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 (dalla fase 1 sopra)
- webClientId: Facoltativo - Serve solo se supporti anche la piattaforma web o hai bisogno di funzionalità avanzate
- iOSServerClientId: Facoltativo - Dovrebbe essere lo stesso valore di webClientId quando fornito
Per una configurazione avanzata con webClientId e iOSServerClientIdveda guida di configurazione web per la creazione di questi credenziali.
Quando si utilizza Quando si utilizza 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 serverAuthCodevedi il guida di configurazione generale per i dettagli di implementazione

Implementa la funzione di accesso. Crea un pulsante e esegui il seguente code al click

Per il modalità online:

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))

Per la modalità 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 funzionare correttamente

Problemi Noti

Incompatibilità dello Schermo di Privacy del Plugin

Il plugin di accesso Google è incompatibile con @capacitor/schermata-di-privacyQuando si utilizzano entrambi i plugin insieme, il webview di Google login verrà interrotto dalla schermata di privacy.

Workaround: Chiama 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: {}
});

Se stai utilizzando Google Login su iOS per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login sociale per la capacità nativa in Utilizzando @capgo/capacitor-login sociale @capgo/capacitor-login sociale per il dettaglio di implementazione in @capgo/capacitor-login sociale @capgo/capacitor-chiave di accesso per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-nativo-biometrico per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.