Intégrer reCAPTCHA aux applications iOS

Cette page explique comment intégrer reCAPTCHA dans 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 (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 à plusieurs niveaux, comme un flux d&#MFA pour fournir un autre chemin d'accès 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 les 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 la version minimale du SDK de votre application sur iOS 12 ou créez une nouvelle 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 console Google Cloud, procédez comme suit:

      1. Accédez à la page reCAPTCHA.

        Accéder à reCAPTCHA

      2. Dans la liste des clés reCAPTCHA, maintenez le pointeur 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 CLI gcloud, 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.6.0"
        ...
      
      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 comporter les portées indiquées dans la boîte de dialogue Se connecter à Xcode.

      Xcode installe le SDK et ses dépendances requises.

    Flutter

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

    ReactNative

    Pour obtenir des instructions détaillées sur l'utilisation de reCAPTCHA via 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 que xcframeworks, téléchargez le client.

Configurer l'application

Vous pouvez écrire vos applications en Swift ou Objective-C.

Pour configurer votre application, ajoutez les fichiers suivants:

Swift

  1. Si votre application est écrite en Swift, incluez l'importation suivante:

     import RecaptchaEnterprise
    

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 que Xcode peut trouver et associer les bibliothèques Swift.

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

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 fermeture finale:

      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 fermeture finale:

      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. Instancier 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. Mettez à jour ViewController.h.

      #import <RecaptchaEnterprise/RecaptchaEnterprise.h>
      
      @interface ViewController : UIViewController
      @property (strong, atomic) RecaptchaClient *recaptchaClient;
      @end
      
    2. 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 bloquer les éléments d'interface utilisateur sur 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 fermeture finale:

      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. Modifiez 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 fermeture finale:

      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 lenteur du réseau ou s'il attend la fin de l'initialisation en arrière-plan. Assurez-vous que les appels execute() ne bloquent pas un événement d'UI, tel que l'appui sur un bouton.

  3. Testez votre application :

    1. reCAPTCHA utilise AppAttest d'Apple dans 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 capacité 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 réseau. Si l'application n'a pas accès au réseau lors de la création du client, le client continue de ré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 passer de getClient à 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 fermeture finale:

// 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 fermeture finale:

// 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 fermeture finale:

      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 la page RecaptchaErrorCode.

Document de référence sur les API

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

Étape suivante

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