Intégrer reCAPTCHA aux applications iOS

Cette page explique comment intégrer reCAPTCHA à votre application iOS.

En raison de la diversité des appareils mobiles en termes de taille d'écran, de performances et d'interface utilisateur des applications, le test visuel reCAPTCHA avec case à cocher (Je ne suis pas un robot) n'est pas disponible pour les applications mobiles iOS. Vous pouvez plutôt implémenter votre propre stratégie d'application par niveaux, comme un flux MFA, pour fournir un autre chemin d'accès à l'échange pour le trafic suspect.

Le SDK utilise la réflexion et le code dynamique pour permettre la mise à jour et l'amélioration du système de détection dans les applications ou SDK déjà déployés. Pour éviter toute interférence avec l'application, l'ensemble des classes disponibles dans le système est limité à une liste soigneusement contrôlée.

Avant de commencer

  1. Définissez le SDK minimal de votre application sur iOS 12 ou créez une application mobile.

  2. Préparez votre environnement pour reCAPTCHA.

  3. Créez une clé reCAPTCHA pour la plate-forme d'application iOS.

    Vous pouvez également copier l'ID d'une clé reCAPTCHA existante pour iOS en effectuant l'une des opérations suivantes :

    • Pour copier l'ID d'une clé existante à partir de la consoleGoogle Cloud , procédez comme suit :

      1. Accédez à la page reCAPTCHA.

        Accéder à reCAPTCHA

      2. Dans la liste des clés reCAPTCHA, pointez sur la clé que vous souhaitez copier, puis cliquez sur .
    • Pour copier l'ID d'une clé existante à l'aide de l'API REST, utilisez la méthode projects.keys.list.
    • Pour copier l'ID d'une clé existante à l'aide de la gcloud CLI, utilisez la commande gcloud recaptcha keys list.

  4. disposer d'un compte GitHub ;

  5. Consultez les informations sur la confidentialité d'Apple.

Préparer votre environnement iOS

Pour préparer votre environnement de développement, procédez comme suit :

  1. Téléchargez et installez la dernière version de Xcode, puis créez une application iOS vide à affichage unique.

  2. Téléchargez le SDK à l'aide de l'une des méthodes suivantes :

    CocoaPods

    1. Téléchargez et installez CocoaPods.
    2. Créez un fichier Podfile et ajoutez les lignes suivantes à votre Podfile :

      source "https://github.com/CocoaPods/Specs.git"
      
      target 'AppTarget' do
      
        # Podfiles must include use_frameworks! or
        # use_frameworks! :linkage => :static
        use_frameworks!
      
        pod "RecaptchaEnterprise", "18.8.0-beta02"
        ...
      
      end
      
    3. Installez les dépendances requises en exécutant la commande pod update.

    Swift Package Manager

    1. Dans Xcode, sélectionnez File > Add Packages (Fichier > Ajouter des packages), puis saisissez l'URL suivante dans le champ Search (Rechercher) ou Enter Package URL (Saisir l'URL du package) : https://github.com/GoogleCloudPlatform/recaptcha-enterprise-mobile-sdk
    2. Dans la boîte de dialogue Xcode, saisissez les informations suivantes :

      • Nom d'utilisateur GitHub.
      • Un jeton d'accès personnel que vous avez créé en suivant les instructions de GitHub. Le jeton d'accès personnel doit disposer des niveaux d'accès listés dans la boîte de dialogue XCode Sign In (Connexion Xcode).

      Xcode installe le SDK et ses dépendances requises.

    Flutter

    Pour obtenir des instructions détaillées sur l'utilisation de reCAPTCHA avec Flutter, consultez la documentation Flutter.

    ReactNative

    Pour obtenir des instructions détaillées sur l'utilisation de reCAPTCHA avec React Native, consultez la documentation React Native.

    Téléchargement direct

    1. Si vous souhaitez télécharger le SDK et ses dépendances en tant qu'xcframeworks, téléchargez le client.

Intégrer reCAPTCHA à votre application iOS

Pour intégrer reCAPTCHA à votre application iOS, procédez comme suit dans Xcode :

  1. Pour instancier le SDK avec la clé reCAPTCHA (KEY_ID) que vous avez créée, mettez à jour l'application avec le code suivant :

    Swift avec Storyboard

    1. Mettez à jour ViewController.swift.

      import RecaptchaEnterprise
      
      class ViewController: UIViewController {
        var recaptchaClient: RecaptchaClient?
      
        override func viewDidLoad() {
          super.viewDidLoad()
          Task {
            do {
              self.recaptchaClient = try await Recaptcha.fetchClient(withSiteKey: "KEY_ID")
            } catch let error as RecaptchaError {
               print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
            }
          }
        }
      }
      

      Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

      import RecaptchaEnterprise
      
      class ViewController: UIViewController {
        var recaptchaClient: RecaptchaClient?
      
        override func viewDidLoad() {
          super.viewDidLoad()
          Recaptcha.fetchClient(withSiteKey: "KEY_ID") { client, error in
            guard let client = client else {
                print("RecaptchaClient creation error: \(error).")
              return
            }
            self.recaptchaClient = client
          }
        }
      }
      

    Swift avec SwiftUI

    1. Créez une classe ViewModel.

      import RecaptchaEnterprise
      
      @MainActor class ViewModel: ObservableObject {
        private var recaptchaClient: RecaptchaClient?
      
        init() {
           Task {
            do {
              self.recaptchaClient = try await Recaptcha.fetchClient(withSiteKey: "KEY_ID")
            } catch let error as RecaptchaError {
               print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
            }
          }
        }
      }
      

      Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

      import RecaptchaEnterprise
      
      class ViewController: UIViewController {
        var recaptchaClient: RecaptchaClient?
      
        override func viewDidLoad() {
          super.viewDidLoad()
          Recaptcha.fetchClient(withSiteKey: "KEY_ID") { client, error in
            guard let client = client else {
                print("RecaptchaClient creation error: \(error).")
              return
            }
            self.recaptchaClient = client
          }
        }
      }
      
    2. Instanciez ViewModel dans ContentView.swift.

      import SwiftUI
      import RecaptchaEnterprise
      
      struct ContentView: View {
        @StateObject private var viewModel = ViewModel()
      
        var body: some View {
        }
      }
      
      struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
          ContentView()
        }
      }
      

    Objective-C

    1. Si votre application est écrite en Objective-C, créez un fichier Swift factice et incluez l'importation suivante pour vous assurer qu'Xcode peut trouver et associer les bibliothèques Swift.

      import Foundation
      
    2. Pour vous assurer que le code Swift est correctement associé, accédez à Cible > Paramètres de compilation > Toujours intégrer les bibliothèques standards Swift et vérifiez que l'option est définie sur Yes.

    3. Mettez à jour ViewController.h.

      #import <RecaptchaEnterprise/RecaptchaEnterprise.h>
      
      @interface ViewController : UIViewController
      @property (strong, atomic) RecaptchaClient *recaptchaClient;
      @end
      
    4. Mettez à jour ViewController.m.

      @implementation ViewController
      [Recaptcha fetchClientWithSiteKey:@"KEY_ID"
            completion:^void(RecaptchaClient* recaptchaClient, NSError* error) {
              if (!recaptchaClient) {
                NSLog(@"%@", (RecaptchaError *)error.errorMessage);
                return;
              }
              self->_recaptchaClient = recaptchaClient;
            }
      ];
      @end
      

    L'initialisation du SDK peut prendre plusieurs secondes. Pour atténuer cette latence, initialisez le client le plus tôt possible, par exemple lors de l'appel onCreate() d'une classe Application personnalisée. Vous ne devez pas faire en sorte que les éléments d'UI bloquent le SDK reCAPTCHA.

  2. Créez un bouton pour appeler reCAPTCHA et déclencher execute().

    Swift avec Storyboard

    1. Créez un bouton dans le storyboard.
    2. Créez une action dans ViewController associée au bouton que vous avez créé.
    3. Appelez la méthode execute() en transmettant une action Login pour renvoyer un jeton reCAPTCHA à l'aide de l'extrait de code suivant :

      guard let recaptchaClient = recaptchaClient else {
        print("RecaptchaClient creation failed.")
        return
      }
      Task {
        do {
          let token = try await recaptchaClient.execute(withAction: RecaptchaAction.login)
          print(token)
        } catch let error as RecaptchaError {
          print(error.errorMessage)
        }
      }
      

      Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

      guard let recaptchaClient = recaptchaClient else {
        print("RecaptchaClient creation failed.")
        return
      }
      recaptchaClient.execute(withAction: RecaptchaAction.login) { token, error in
        if let token = token {
          print(token)
        } else {
          print(error)
        }
      }
      

    Swift avec SwiftUI

    1. Mettez à jour ViewModel.swift avec le code d'exécution :

      import RecaptchaEnterprise
      
      @MainActor class ViewModel: ObservableObject {
      
        func execute() {
          guard let recaptchaClient = self.recaptchaClient else {
            print("Client not initialized correctly.")
            return
          }
      
          Task {
            do {
              let token = try await recaptchaClient.execute(withAction: RecaptchaAction.login)
              print(token)
            } catch let error as RecaptchaError {
              print(error.errorMessage)
            }
          }
        }
      }
      

      Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

      guard let recaptchaClient = recaptchaClient else {
        print("RecaptchaClient creation failed.")
        return
      }
      recaptchaClient.execute(withAction: RecaptchaAction.login) { token, error in
        if let token = token {
          print(token)
        } else {
          print(error)
        }
      }
      
    2. Mettez à jour ContentView.swift.

      import SwiftUI
      import RecaptchaEnterprise
      
      struct ContentView: View {
        @StateObject private var viewModel = ViewModel()
      
        var body: some View {
      
          Button {
            viewModel.execute()
          } label: {
            Text("Execute")
          }.padding()
      
          Spacer()
        }
      }
      
      struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
          ContentView()
        }
      }
      

    Objective-C

    1. Dans le storyboard, créez un bouton.
    2. Créez une action dans ViewController associée au bouton que vous avez créé.
    3. Appelez la méthode execute() en transmettant une action Login pour renvoyer un jeton reCAPTCHA :

      if (!self->_recaptchaClient) {
        return;
      }
      
      [recaptchaClient execute:RecaptchaAction.login
          completion:^void(NSString* _Nullable  token, NSError* _Nullable error) {
        if (!token) {
          NSLog (@"%@", (RecaptchaError *)error.errorMessage);
          return;
        }
        NSLog (@"%@", token);
      }];
      

    L'API execute du client peut prendre plusieurs secondes, par exemple en cas de réseau lent ou si elle attend la fin de l'initialisation en arrière-plan. Assurez-vous que les appels execute() ne bloquent pas un événement d'UI, comme l'appui sur un bouton.

  3. Testez votre application :

    1. reCAPTCHA utilise App Attest d'Apple comme élément de son moteur de détection. Si vous ne prévoyez pas d'utiliser une clé de test avec un score fixe pour le développement local, procédez comme suit :

      1. Dans Xcode, ajoutez la fonctionnalité App Attest à votre application.

      2. Dans le fichier .entitlements de votre projet, définissez l'environnement App Attest sur production.

    2. Pour nettoyer votre environnement de compilation Xcode, dans le menu Produit, cliquez sur Nettoyer le dossier de compilation.

    3. Pour exécuter l'application, dans le menu Produit, cliquez sur Exécuter.

    4. Dans l'application que vous avez chargée, cliquez sur le bouton que vous avez créé précédemment.

    5. Observez votre fenêtre de sortie de débogage pour obtenir un jeton reCAPTCHA (chaîne alphanumérique), qui est renvoyé si l'intégration réussit.

Migrer de l'API de méthode vers la méthode fetchClient

La méthode fetchClient renvoie un RecaptchaClient qui réessaie l'initialisation en cas d'échec du réseau. Si l'application n'a pas accès au réseau lors de la création du client, celui-ci continue d'essayer et s'initialise correctement lorsqu'un réseau est acquis.

Si vous appelez execute(timeout) et que le client n'est pas encore prêt, il tente de s'initialiser avant de renvoyer un jeton ou un RecaptchaErrorCode.

L'exemple suivant montre comment migrer de getClient vers fetchClient.

Swift avec Storyboard

// Migrate from getClient
func initializeWithGetClient() {
  Task {
    do {
      self.recaptchaClient = try await Recaptcha.getClient(withSiteKey: "KEY_ID")
    } catch let error as RecaptchaError {
        print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
    }
  }
}

// Migrate to fetchClient
func initializeWithFetchClient() {
  Task {
    do {
      self.recaptchaClient = try await Recaptcha.fetchClient(withSiteKey: "KEY_ID")
    } catch let error as RecaptchaError {
        print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
    }
  }
}

Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

// Migrate from getClient
override func initializeWithGetClient() {
  Recaptcha.getClient(withSiteKey: "KEY_ID") { client, error in
    guard let client = client else {
        print("RecaptchaClient creation error: \(error).")
      return
    }
    self.recaptchaClient = client
  }
}

// Migrate to fetchClient
override func initializeWithFetchClient() {
  Recaptcha.fetchClient(withSiteKey: "KEY_ID") { client, error in
    guard let client = client else {
        print("RecaptchaClient creation error: \(error).")
      return
    }
    self.recaptchaClient = client
  }
}

Swift avec SwiftUI

// Migrate from getClient
initializeWithGetClient() {
    Task {
    do {
      self.recaptchaClient = try await Recaptcha.getClient(withSiteKey: "KEY_ID")
    } catch let error as RecaptchaError {
        print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
    }
  }
}

// Migrate to fetchClient
initializeWithFetchClient() {
    Task {
    do {
      self.recaptchaClient = try await Recaptcha.fetchClient(withSiteKey: "KEY_ID")
    } catch let error as RecaptchaError {
        print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
    }
  }
}

Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

// Migrate from getClient
func initializeWithGetClient() {
  super.viewDidLoad()
  Recaptcha.getClient(withSiteKey: "KEY_ID") { client, error in
    guard let client = client else {
        print("RecaptchaClient creation error: \(error).")
      return
    }
    self.recaptchaClient = client
  }
}

// Migrate to fetchClient
func initializeWithFetchClient() {
  super.viewDidLoad()
  Recaptcha.fetchClient(withSiteKey: "KEY_ID") { client, error in
    guard let client = client else {
        print("RecaptchaClient creation error: \(error).")
      return
    }
    self.recaptchaClient = client
  }
}

Objective-C

// Migrate from getClient
@implementation ViewController
[Recaptcha getClientWithSiteKey:@"KEY_ID"
      completion:^void(RecaptchaClient* recaptchaClient, NSError* error) {
        if (!recaptchaClient) {
          NSLog(@"%@", (RecaptchaError *)error.errorMessage);
          return;
        }
        self->_recaptchaClient = recaptchaClient;
      }
];
@end

// Migrate to fetchClient
@implementation ViewController
[Recaptcha fetchClientWithSiteKey:@"KEY_ID"
      completion:^void(RecaptchaClient* recaptchaClient, NSError* error) {
        if (!recaptchaClient) {
          NSLog(@"%@", (RecaptchaError *)error.errorMessage);
          return;
        }
        self->_recaptchaClient = recaptchaClient;
      }
];
@end

Définir un délai avant expiration pour les appels d'API

Vous pouvez spécifier une valeur de délai avant expiration pour les API execute à l'aide de la propriété withTimeout.

Swift

  1. Définissez le délai avant expiration lorsque vous appelez execute.

      Task {
        do {
          let token = try await recaptchaClient.execute(
            withAction: RecaptchaAction.login,
            withTimeout: 10000)
          print(token)
        } catch let error as RecaptchaError {
          print(error.errorMessage)
        }
      }
    

    Si la version minimale de l'OS de votre application est inférieure à 13, utilisez plutôt une closure de fin :

      recaptchaClient.execute(
        withAction: RecaptchaAction.login,
        withTimeout: 10000
      ) { token, error in
        if let token = token {
          print(token)
        } else {
          print(error)
        }
      }
    

Objective-C

  1. Définissez le délai avant expiration lorsque vous appelez execute.

      [recaptchaClient execute:RecaptchaAction.login
          witTimeout:10000.0
          completion:^void(NSString* _Nullable  token, NSError* _Nullable error) {
        if (!token) {
          NSLog (@"%@", (RecaptchaError *)error.errorMessage);
          return;
        }
        NSLog (@"%@", token);
      }];
    

Gérer les erreurs

Si votre application ne peut pas communiquer avec le service reCAPTCHA, il se peut que l'API ait rencontré une erreur. Vous devez ajouter une logique dans votre application pour gérer correctement ces erreurs.

Pour en savoir plus sur les mesures d'atténuation des erreurs courantes liées aux API, consultez RecaptchaErrorCode.

Documentation de référence de l'API

Pour obtenir une documentation de référence complète sur l'API reCAPTCHA pour iOS, consultez RecaptchaEnterprise.

Étapes suivantes

  • Pour évaluer le jeton de réponse reCAPTCHA, créez une évaluation.