Google Login su iOS

Introduzione

In questa guida imparerai a configurare Google Login con Capgo Social Login per iOS. Presumo che tu abbia già letto la guida alla configurazione generale.

Usare Google Login su iOS

In questa sezione imparerai a configurare il login con Google su iOS.

1. Crea un client ID iOS nella console di Google

   1. Clicca sulla barra di ricerca

      

   2. Cerca credentials and click on the APIs and Services quello (numero 2 nello screenshot)

      

   3. Clicca sul create credentials

      

   4. Seleziona OAuth client ID

      

   5. Seleziona la Application type a iOS

      

   6. Trova il bundle ID

      1. Apri Xcode

      2. Fai doppio clic su App

         

      3. Assicurati di essere nella Targets -> App

         

      4. Trova il tuo Bundle Identifier

         

      5. Torna sulla Google Console e incolla il tuo Bundle Identifier all'interno Bundle ID

         

   7. Opzionalmente, aggiungi il tuo App Store ID o Team ID nel client ID se hai pubblicato l'app su App Store

   8. Dopo aver inserito tutti i dettagli, clicca sul create

      

   9. Clicca su OK

      

   10. Apri il nuovo client iOS creato

       

   11. Copia i seguenti dati

       

       Nota

       Il nr. 1 in questa immagine diventerà poi il iOSClientId nel initialize chiamata.

       Il nr. 2 in questa immagine diventerà poi YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. Modifica l'Info.plist della tua app

   1. Apri Xcode e trova il Info.plist file

      

   2. Clicca col tasto destro su questo file e aprilo come sorgente code

      

   3. In fondo al tuo Plist file, vedrai un </dict> tag

      

   4. Inserisci il seguente frammento subito prima del tag di 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 al valore copiato nel passaggio precedente

      

      Attenzione

      Assicurati che questo valore INIZI con com.googleusercontent.apps

   6. Salva il file con Command + S

3. Modifica il AppDelegate.swift

   1. Apri l'AppDelegate

      

   2. Inserisci import GoogleSignIn all'inizio del file

      

   3. Trova il func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) funzione

      

   4. Modifica la funzione in questo modo

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

      

   5. Salva il file con Command + S

4. Configura il login con Google nel tuo code JavaScript/TypeScript

   1. Importa SocialLogin e Capacitor

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

   2. Chiama il metodo initialize (va chiamato una sola volta)

      Basic setup (online mode - recommended for most apps):

      // onMounted is Vue specific
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
            mode: 'online' // Default mode
          }
        })
      })

      Configurazione avanzata con client ID 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 il Client ID:

      • iOSClientId: Obbligatorio - Deve terminare con googleusercontent.com (dal passaggio 1 sopra)
      • webClientId: Opzionale - Necessario solo se supporti anche il web o ti servono funzioni avanzate
      • iOSServerClientId: Opzionale - Deve avere lo stesso valore di webClientId quando fornito

      Per una configurazione avanzata con webClientId e iOSServerClientId, consulta la guida al setup web per creare queste credenziali.

      Attenzione

      Informazioni sulla modalità offline: Quando usi mode: 'offline', la risposta del login non conterrà direttamente i dati dell'utente. Riceverai invece un code di autenticazione del server che dovrà essere scambiato con le informazioni utente tramite il tuo backend. SocialLogin.refresh({ provider: 'google' }) non è disponibile in questa modalità; il refresh deve avvenire sul tuo backend dopo lo scambio serverAuthCode. Consulta la guida alla configurazione generale per i dettagli sull'implementazione.

   3. Implementa la funzione di login. Crea un pulsante ed esegui il seguente code al click

      Per la 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)

5. Testa la tua applicazione

   1. Builda e avvia l'app cap sync

   2. Se hai fatto tutto correttamente, dovresti vedere il flusso di login di Google funzionare correttamente

      

Nota

La lingua nel prompt di Google dipende dalle impostazioni della lingua del tuo dispositivo.

Problemi noti

Incompatibilità con il plugin Privacy Screen

Il plugin Google Login è incompatibile con @capacitor/privacy-screen. Se utilizzi entrambi i plugin insieme, la webview del login di Google verrà interrotta dalla privacy screen.

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

Continuare con il Google Login su iOS

Se stai usando Google Login su iOS per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.