Login di Google su iOS

Introduzione

In questo guide, imparerai a configurare il login con Google con Capgo Social Login per iOS. Assumo che tu abbia già letto la guida di configurazione generale.

Usando Google login su iOS

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

1. 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 in Bundle ID

         

   7. Facoltativamente, aggiungi il tuo App Store ID o Team ID nel campo ID client se hai pubblicato il tuo app su App Store

   8. Dopo aver riempito tutti i dettagli, clicca create

      

   9. Clicca OK

      

   10. Apri il nuovo client iOS creato

       

   11. Copia i seguenti dati

       

       Nota

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

       Il nr. 2 in questa immagine diventerà YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. Modifica il file Info.plist della tua app

   1. Apri Xcode e trova il Info.plist file

      

   2. Clicca con il tasto destro su questo file e aprilo come fonte code

      

   3. Al fondo del tuo Plist file, vedrai una </dict> tag

      

   4. Inserisci il seguente frammento prima della tag di chiusura </dict> Info.plist con schemi di URL __CAPGO_KEEP_0__ inseriti prima della tag di chiusura

      

      <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

      

      Attenzione

      Assicurati che questo valore INIZIA con com.googleusercontent.apps

   6. Salva il file con Command + S

3. Modifica il AppDelegate.swift

   1. Apri il AppDelegate

      

   2. Inserisci import GoogleSignIn all'inizio del file

      

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

      

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

      

   5. Salva il file con Command + S

4. Configura il login con 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
          }
        })
      })

      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: Richiesto - Deve concludersi con googleusercontent.com (dal passo 1 sopra)
      • webClientId: Facoltativo - Serve solo se si supporta anche la piattaforma web o si richiedono funzionalità avanzate
      • iOSServerClientId: Facoltativo - Dovrebbe avere lo stesso valore di webClientId quando fornito

      Per impostazione avanzata con webClientId e iOSServerClientId, vedere la guida di configurazione web per creare questi credenziali. __CAPGO_KEEP_0__

      Attenzione

      Informazioni sulle modalità 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 scambiato per informazioni sull'utente tramite il tuo server backend. SocialLogin.refresh({ provider: 'google' }) non è disponibile in questa modalità; il refresh deve avvenire sul tuo server backend dopo lo scambio di serverAuthCodeVedi il guida di configurazione generale per i dettagli di implementazione.

   3. Implement the login function. Create a button and run the following code on 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 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. Costruisci l'applicazione e eseguila cap sync

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

      

Nota

La lingua nella richiesta di Google dipende dalle impostazioni di lingua del tuo dispositivo.

Problemi noti

Incompatibilità del plugin della schermata di accesso alle informazioni riservate

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

Soluzione di contorno: Chiamare 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: {}
});

Continua dall'accesso Google su iOS

l'accesso Google su iOS l'accesso Google su iOS per pianificare l'autenticazione e le flussi di account, connettilo con Usando @capgo/capacitor-login-social per la capacità nativa in Usando @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-biometric-nativo per il dettaglio di implementazione in @capgo/capacitor-biometric-nativo, e L'autenticazione a due fattori per il dettaglio di implementazione in L'autenticazione a due fattori.