Connexion Google sur iOS

Introduction

Dans ce guide, vous apprendrez à configurer l'authentification Google avec Capgo Social Login pour iOS. Je suppose que vous avez déjà lu le guide de configuration générale. Utilisation de l'authentification Google sur iOS.

Section intitulée “Utilisation de l'authentification Google sur iOS”

Créer un ID client iOS dans le console Google

1. Cliquez sur la barre de recherche

   1. Barre de recherche de la console Google

      

   2. Recherchez et cliquez sur credentials et cliquez sur l' APIs and Services le deuxième (le numéro 2 sur l'écran d'capture d'écran)

      

   3. Cliquez sur le create credentials

      

   4. Sélectionnez OAuth client ID

      

   5. Sélectionnez le Application type pour iOS

      

   6. Trouvez l'ID de l'application

      1. Ouvrir Xcode

      2. Double-cliquez sur App

         

      3. Assurez-vous d'être sur Targets -> App

         

      4. Trouvez votre Bundle Identifier

         

      5. Retournez à la console Google et collez votre Bundle Identifier dans Bundle ID

         

   7. Optionnellement, ajoutez votre App Store ID ou Team ID dans l'identifiant du client si vous avez publié votre application sur l'App Store

   8. Après avoir rempli tous les détails, cliquez sur create

      

   9. Cliquez OK

      

   10. Ouvrez le client iOS créé récemment

       

   11. Copiez les données suivantes

       

       Note

       Les nr. 1 dans cette image deviendra plus tard le iOSClientId dans le initialize appel.

       Le nr. 2 dans cette image deviendra plus tard le YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. Modifiez les informations de votre fichier Info.plist

   1. Ouvrez Xcode et trouvez le Info.plist fichier

      

   2. Cliquez avec le bouton droit sur ce fichier et ouvrez-le en tant que source code

      

   3. À la base de votre Plist fichier, vous verrez un </dict> tag

      

   4. Insérer le fragment suivant juste avant le tag de fermeture </dict> Fichier Info.plist avec les schémas URL __CAPGO_KEEP_0__ insérés avant le tag de fermeture du dictionnaire

      

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

   5. à la valeur copiée dans l'étape précédente YOUR_DOT_REVERSED_IOS_CLIENT_ID Fichier Info.plist avec le client ID réel inséré dans les schémas URL

      

      Attention

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

   6. Enregistrez le fichier avec Command + S

3. Modifier le AppDelegate.swift

   1. Ouvrez le AppDelegate

      

   2. Insérer import GoogleSignIn en haut du fichier

      

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

      

   4. Modifier 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. Enregistrer le fichier avec Command + S

4. Configurer la connexion Google dans votre JavaScript/TypeScript code

   1. Importer SocialLogin et Capacitor

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

   2. Appeler la méthode d'initialisation (ceci doit être appelé qu'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 identifiants de 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'
          }
        })
      })

      Remarque

      Exigences relatives aux identifiants de client :

      • iOSClientId: Requis - Doit se terminer par googleusercontent.com (à partir de l'étape 1 ci-dessus)
      • webClientId: Facultatif - Seulement nécessaire si vous prenez également en charge la plateforme web ou si vous avez besoin de fonctionnalités avancées
      • iOSServerClientId: Facultatif - Devrait avoir la même valeur que webClientId lorsque fourni

      Pour une configuration avancée avec webClientId et iOSServerClientId, consultez la guide de configuration web pour la création de ces informations d'identification.

      Attention

      À propos du mode hors ligne : Lors de l'utilisation de mode: 'offline', la réponse de connexion ne contiendra pas les données de l'utilisateur directement. Au lieu de cela, vous recevrez un authentification serveur code qui doit être échangé pour obtenir des informations sur l'utilisateur via votre serveur backend. SocialLogin.refresh({ provider: 'google' }) n'est pas disponible dans ce mode ; la mise à jour doit se produire sur votre serveur backend après échange serverAuthCode. Voir la 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 code lors du 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
      // Do not call SocialLogin.refresh() in offline mode
      console.log('Server auth code:', res.result.serverAuthCode)

5. Testez votre application

   1. Construisez votre application et exécutez-la cap sync

   2. Si vous avez fait tout correctement, vous devriez voir le flux de connexion Google fonctionner correctement

      

Remarque

La langue du prompt Google dépend des paramètres de langue de votre appareil.

Problèmes connus

Incompatibilité du plugin d'écran de confidentialité avec Cloudflare

Le plugin de connexion Google est incompatible avec @capacitor/privacy-screenLors de l'utilisation simultanée des deux plugins, la vue de connexion Google sera interrompue par l'écran de confidentialité.

Solution de contournement : Appelez await PrivacyScreen.disable(); avant d'appeler la fonction de connexion :

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

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