Google Login 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 il login con Google con Capgo Social Login per iOS. Sono convinto che tu abbia già letto la guida di configurazione generale Configurazione generale.

In questo capitolo, imparerai a configurare il login Google su iOS

Creare 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. Crea credenziali OAuth client ID
5. L'opzione ID del client OAuth nella menu di creazione delle credenziali Application type Scegli il iOS
6. Tipo di applicazione con l'opzione iOS evidenziata
  1. Cerca il bundle ID
  2. Apre Xcode App
  3. Assicurati di essere su Targets -> App
  4. Trova il tuo Bundle Identifier
  5. Torna indietro alla Console di Google e incolla il tuo Bundle Identifier inserisci Bundle ID
7. Facoltativamente, aggiungi il tuo App Store ID o Team ID HTML testo frammento da una stringa UI Capgo più lunga (chiave genitoriale `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di aggiornamento live di Capacitor. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina alternatives.astro. Preservare esattamente i termini di prodotto e marchio Capgo e i termini di sviluppatore.
8. nel client ID se hai pubblicato il tuo app sullo Store App create
9. Clicca OK
10. Apre il nuovo client iOS creato
11. Copia i seguenti dati
  
  Questo nr. 1 in questa immagine diventerà il iOSClientId nel initialize chiamata.
  Il nr. 2 in questa immagine diventerà YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica il file Info.plist del tuo app
1. Apri Xcode e trova il Info.plist file
2. Fai clic destro su questo file e apriolo come fonte code
3. In fondo al tuo Plist file, vedrai una </dict> tag
4. Inserisci il seguente frammento prima della chiusura del </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 a il valore copiato nel passaggio precedente
  
  Assicurati che questo valore INIZI 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 la func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) La 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)
}

Funzionalità di apertura dell'applicazione modificata con gestione di GoogleSignIn

Salva il file con Command + S

Configura l'accesso 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 deve essere chiamato solo una volta)
  
  Configurazione base (modalità online - consigliata per le 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 del client:
  - iOSClientId: Obbligatorio - Deve concludersi con googleusercontent.com (dalla fase 1 sopra)
  - webClientId: Facoltativo - È necessario solo se supportate anche la piattaforma web o se avete bisogno di funzionalità avanzate
  - iOSServerClientId: Facoltativo - Dovrebbe avere lo stesso valore di webClientId quando fornito
  Per una configurazione avanzata con webClientId e iOSServerClientIdAttenzione, vedi il guida di configurazione web per creare questi credenziali.
  Sui modi offline: Quando si utilizza mode: 'offline', la risposta di accesso non contiene i dati dell'utente direttamente. Invece, riceverai un'autenticazione del server code che deve essere scambiata per informazioni sull'utente tramite il tuo server backend. SocialLogin.refresh({ provider: 'google' }) non è disponibile in questo modo; il refresh deve avvenire sul tuo backend dopo aver scambiato serverAuthCode. Vedi la 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 modalità online:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  Per 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 che funziona correttamente

Problemi Noti

Incompatibilità Plugin Schermo di Privacy

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

Lavorare intorno a questo: Chiamare await PrivacyScreen.disable(); contexto: Chiamare (HTML testo frammento da una stringa di UI Capgo più lunga (chiave genitrice `appflow_migration_step2`). Pagina/area: Appflow comparison / migration marketing copy. Ruolo: Copia del sito web. Visualizzato in: pagina ionic-appflow.astro. Preservare esattamente i termini di prodotto/marchio e di sviluppatore Capgo. Chiave di messaggio `appflow_migration_step2` (Appflow Migration Step2).

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 Utilizza @capgo/capacitor-login-social per la capacità nativa in Utilizza @capgo/capacitor-login-social @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometria-nativa per il dettaglio di implementazione in @capgo/capacitor-biometria-nativa Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.