Connexion Google sur iOS

Introduction

Dans ce guide, vous allez apprendre à configurer la connexion Google avec Capgo Social Login sur iOS.

Je pars du principe que vous avez déjà lu le guide de configuration général.

Utiliser la connexion Google sur iOS

Dans cette partie, vous allez configurer la connexion Google sur iOS.

1. Créez un ID client iOS dans la console Google

   1. Cliquez sur la barre de recherche

      

   2. Recherchez credentials, puis cliquez sur le résultat APIs and Services (numéro 2 sur la capture)

      

   3. Cliquez sur create credentials

      

   4. Sélectionnez OAuth client ID

      

   5. Réglez Application type sur iOS

      

   6. Récupérez le bundle ID

      1. Ouvrez Xcode

      2. Double-cliquez sur App

         

      3. Vérifiez que vous êtes bien dans Targets -> App

         

      4. Repérez votre Bundle Identifier

         

      5. Revenez à la Google Console et collez votre Bundle Identifier dans Bundle ID

         

   7. Vous pouvez ajouter votre App Store ID ou votre Team ID dans l’ID client si l’application est déjà publiée sur l’App Store

   8. Une fois tous les champs remplis, cliquez sur Create

      

   9. Cliquez sur OK

      

   10. Ouvrez le client iOS nouvellement créé

       

   11. Copiez les informations suivantes

       

       Note

       Le nr. 1 de cette image deviendra ensuite iOSClientId dans l’appel à initialize.

       Le nr. 2 de cette image deviendra ensuite YOUR_DOT_REVERSED_IOS_CLIENT_ID.

2. Modifiez le fichier Info.plist de votre app

   1. Ouvrez Xcode et trouvez le fichier Info.plist

      

   2. Faites un clic droit sur ce fichier et ouvrez-le en tant que code source

      

   3. En bas de votre fichier Plist, vous verrez une balise </dict>

      

   4. Insérez le fragment suivant juste avant la balise de fermeture </dict>

      

      <key>CFBundleURLTypes</key>
      <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
         </array>
       </dict>
      </array>

   5. Remplacez YOUR_DOT_REVERSED_IOS_CLIENT_ID par la valeur copiée à l’étape précédente

      

      Caution

      Vérifiez que cette valeur COMMENCE par com.googleusercontent.apps

   6. Enregistrez le fichier avec Command + S

3. Modifiez AppDelegate.swift

   1. Ouvrez AppDelegate

      

   2. Ajoutez import GoogleSignIn en haut du fichier

      

   3. Trouvez la fonction func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:])

      

   4. Modifiez la fonction pour qu’elle ressemble à ceci

      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. Enregistrez le fichier avec Command + S

4. Configurez la connexion Google dans votre code JavaScript ou TypeScript

   1. Importez SocialLogin et Capacitor

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

   2. Appelez la méthode initialize une seule fois

      Configuration de base (mode en ligne, recommandé pour la plupart des applications) :

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

      Configuration avancée avec des ID client supplémentaires :

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

      Note

      Exigences pour les client IDs :

      • iOSClientId : obligatoire. Il doit se terminer par googleusercontent.com (voir l’étape 1 ci-dessus)
      • webClientId : optionnel. Nécessaire uniquement si vous prenez aussi en charge le web ou si vous utilisez des fonctions avancées
      • iOSServerClientId : optionnel. Il doit avoir la même valeur que webClientId lorsqu’il est renseigné

      Pour une configuration avancée avec webClientId et iOSServerClientId, consultez le guide de configuration web.

      Caution

      À propos du mode hors ligne : quand vous utilisez mode: 'offline', la réponse de connexion ne contient pas directement les données utilisateur. Vous recevez à la place un server auth code qui doit être échangé côté backend pour récupérer les informations utilisateur. Consultez le guide de configuration général pour les détails d’implémentation.

   3. Implémentez la fonction de connexion. Créez un bouton et exécutez le code suivant au clic

      Pour le mode en ligne :

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

      Pour le mode hors ligne :

      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
      console.log('Server auth code:', res.result.serverAuthCode)

5. Testez votre application

   1. Générez votre application puis exécutez cap sync

   2. Si tout est correctement configuré, vous devriez voir le flux de connexion Google fonctionner normalement

      

Note

La langue affichée dans l’invite Google dépend de la langue définie sur votre appareil.

Problèmes connus

Incompatibilité avec le plugin Privacy Screen

Le plugin Google Login est incompatible avec @capacitor/privacy-screen. Lorsque les deux plugins sont utilisés ensemble, la webview de connexion Google est interrompue par l’écran de confidentialité.

Contournement : appelez await PrivacyScreen.disable(); avant de lancer la connexion :

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

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