Mengintegrasikan reCAPTCHA Enterprise dengan aplikasi iOS

Halaman ini menjelaskan cara mengintegrasikan reCAPTCHA Enterprise di aplikasi iOS Anda.

Karena variasi pada perangkat seluler dalam hal ukuran layar, performa, dan UI aplikasi, tantangan reCAPTCHA kotak centang visual (Saya bukan robot) tidak tersedia untuk aplikasi seluler iOS. Sebagai gantinya, Anda dapat menerapkan strategi penerapan bertingkat Anda sendiri, seperti alur MFA untuk menyediakan jalur penukaran alternatif untuk traffic yang mencurigakan.

Sebelum memulai

Tetapkan SDK minimum aplikasi Anda ke iOS 11 atau buat aplikasi seluler baru.
Menyiapkan lingkungan Anda untuk reCAPTCHA Enterprise.
Buat kunci reCAPTCHA untuk platform aplikasi iOS.

Atau, Anda dapat menyalin ID kunci reCAPTCHA yang ada untuk iOS dengan melakukan salah satu langkah berikut:
- Untuk menyalin ID kunci yang ada dari Google Cloud Console, lakukan langkah berikut:
  1. Buka halaman reCAPTCHA Enterprise.
    
    Buka reCAPTCHA Enterprise
  2. Dalam daftar kunci reCAPTCHA, tahan kursor ke kunci yang ingin Anda salin, lalu klik .
- Untuk menyalin ID kunci yang ada menggunakan REST API, gunakan metode projects.keys.list.
- Untuk menyalin ID kunci yang ada menggunakan gcloud CLI, gunakan perintah gcloud recaptcha keys list.
Memiliki akun GitHub.
Baca detail privasi Apple.

Menyiapkan lingkungan iOS Anda

Untuk menyiapkan lingkungan pengembangan, lakukan hal berikut:

Download dan instal Xcode versi terbaru dan buat aplikasi single view iOS kosong yang baru.
Download SDK menggunakan salah satu dari yang berikut:
CocoaPods
1. Download dan instal CocoaPods.
2. Buat Podfile dan tambahkan baris berikut ke Podfile Anda:
```
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.5.0-beta03"
  ...

end
```
3. Instal dependensi yang diperlukan dengan menjalankan pod update.
  
  Catatan: Menjalankan pod clone tidak akan menginstal dependensi yang diperlukan.
Swift Package Manager
1. Di XCode, pilih File > Add Packages, lalu masukkan URL berikut di kolom Search atau Enter Package URL: https://github.com/GoogleCloudPlatform/recaptcha-enterprise-mobile-sdk
2. Pada dialog XCode, masukkan detail berikut:
  - Nama pengguna GitHub.
  - Token akses pribadi yang Anda buat menggunakan petunjuk GitHub. Personal Access Token harus memiliki cakupan yang tercantum pada dialog XCode Sign In.
  Xcode menginstal SDK dan dependensi yang diperlukan.
Flutter
Untuk petunjuk mendetail tentang penggunaan reCAPTCHA Enterprise melalui Flutter, lihat dokumentasi Flutter.

ReactNative
Untuk mengetahui petunjuk mendetail tentang penggunaan reCAPTCHA Enterprise melalui React Native, lihat dokumentasi React Native.
Download langsung
1. Jika Anda ingin mendownload SDK dan dependensinya sebagai xcframeworks, download client.
  
  Catatan: Tambahkan semua biner sebagai xcframeworks statis.

Mengonfigurasi aplikasi

Anda dapat menulis aplikasi di Swift atau Objective-C.

Untuk mengonfigurasi aplikasi, tambahkan file berikut di aplikasi Anda:

Swift

Jika aplikasi Anda ditulis dalam Swift, buat header penghubung Objective-C dan sertakan impor berikut:
```
#import <RecaptchaEnterprise/RecaptchaEnterprise.h>
```

Objective-C

Jika aplikasi Anda ditulis dalam Objective-C, buat file Swift contoh dan sertakan impor berikut untuk memastikan Xcode dapat menemukan dan menautkan library Swift.
```
import Foundation
```
Untuk memastikan kode Swift ditautkan dengan benar, buka Target > Build Settings > Always Embed Swift Standard Libraries dan pastikan opsi tersebut ditetapkan ke Yes.

Mengintegrasikan reCAPTCHA Enterprise dengan aplikasi iOS Anda

Untuk mengintegrasikan reCAPTCHA Enterprise dengan aplikasi iOS Anda, ikuti langkah-langkah berikut di Xcode:

Untuk membuat instance SDK dengan kunci reCAPTCHA (KEY_ID) yang Anda buat, update aplikasi dengan kode berikut:

Swift dengan Storyboard

Perbarui ViewController.swift.

Jika Anda menggunakan CocoaPods, abaikan baris import RecaptchaEnterprise, karena pernyataan impor #import <RecaptchaEnterprise/RecaptchaEnterprise.h> dalam file *-Bridging-Header.h sudah cukup.

import RecaptchaEnterprise

class ViewController: UIViewController {
  var recaptchaClient: RecaptchaClient?

  override func viewDidLoad() {
    super.viewDidLoad()
    Task {
      do {
        let client = try await Recaptcha.getClient(withSiteKey: "KEY_ID")
        self.recaptchaClient = client
      } catch let error as RecaptchaError {
         print("RecaptchaClient creation error: \(String(describing: error.errorMessage)).")
      }
    }
  }
}

Jika versi OS minimum aplikasi Anda kurang dari 13, gunakan penutupan akhir:

import RecaptchaEnterprise

class ViewController: UIViewController {
  var recaptchaClient: RecaptchaClient?

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

Swift dengan SwiftUI

Buat class ViewModel.

Jika Anda menggunakan CocoaPods, abaikan baris import RecaptchaEnterprise, karena pernyataan impor #import <RecaptchaEnterprise/RecaptchaEnterprise.h> di file *-Bridging-Header.h sudah cukup.

import RecaptchaEnterprise

@MainActor class ViewModel: ObservableObject {
  private var recaptchaClient: RecaptchaClient?

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

Jika versi OS minimum aplikasi Anda kurang dari 13, gunakan penutupan akhir:

import RecaptchaEnterprise

class ViewController: UIViewController {
  var recaptchaClient: RecaptchaClient?

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

Buat instance ViewModel di 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

Perbarui ViewController.h.

#import <RecaptchaEnterprise/RecaptchaEnterprise.h>

@interface ViewController : UIViewController
@property (strong, atomic) RecaptchaClient *recaptchaClient;
@end

Perbarui ViewController.m.

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

Buat tombol untuk memanggil reCAPTCHA Enterprise dan memicu execute().

Swift dengan Storyboard

Di {i>storyboard<i}, buat sebuah tombol.
Buat tindakan di ViewController yang ditautkan ke tombol yang Anda buat.

Panggil metode execute() yang meneruskan tindakan Login untuk menampilkan token reCAPTCHA dengan menggunakan cuplikan kode berikut:

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

Jika versi OS minimum aplikasi Anda kurang dari 13, gunakan penutupan akhir:

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 dengan SwiftUI

Mengupdate ViewModel.swift dengan kode eksekusi:

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

Jika versi OS minimum aplikasi Anda kurang dari 13, gunakan penutupan akhir:

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

Mengupdate 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

Di storyboard, buat tombol.
Buat tindakan di ViewController yang ditautkan ke tombol yang Anda buat.

Panggil metode execute() yang meneruskan tindakan Login untuk menampilkan token reCAPTCHA dengan menggunakan cuplikan kode berikut:

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);
}];

Menguji aplikasi Anda:
1. reCAPTCHA Enterprise menggunakan AppAttest Apple sebagai bagian dari mesin pendeteksinya. Jika Anda tidak berencana menggunakan kunci pengujian dengan skor tetap untuk pengembangan lokal, lakukan hal berikut:
  1. Di Xcode, tambahkan kemampuan App Attest ke aplikasi Anda.
  2. Di file .entitlements project Anda, tetapkan lingkungan App Attest ke production.
2. Untuk membersihkan lingkungan build Xcode, di menu Product, klik Clean Build Folder.
3. Untuk menjalankan aplikasi, di menu Product, klik Run.
4. Di aplikasi yang dimuat, klik tombol yang Anda buat sebelumnya.
5. Amati jendela output debug Anda untuk menemukan token reCAPTCHA (string alfanumerik), yang ditampilkan jika integrasi berhasil.

Menetapkan waktu tunggu untuk panggilan API

Anda dapat menentukan nilai waktu tunggu untuk getClient dan execute API menggunakan properti withTimeout setiap API.

Swift

Menyetel waktu tunggu saat memanggil getClient.

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

Jika versi OS minimum aplikasi Anda kurang dari 13, gunakan penutupan di akhir:

  Recaptcha.getClient(
    withSiteKey: "KEY_ID",
    withTimeout: 15000
  ) { client, error in
    guard let client = client else {
        print("RecaptchaClient creation error: \(error).")
      return
    }
    self.recaptchaClient = client
  }

Menyetel waktu tunggu saat memanggil execute.

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

Jika versi OS minimum aplikasi Anda kurang dari 13, gunakan penutupan di akhir:

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

Objective-C

Menyetel waktu tunggu saat memanggil getClient.

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

Menyetel waktu tunggu saat memanggil 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);
  }];

Referensi API

Untuk referensi lengkap reCAPTCHA API untuk iOS, lihat RecaptchaEnterprise.

Langkah selanjutnya

Untuk menilai token respons reCAPTCHA, buat penilaian.

Catatan: Token respons reCAPTCHA dinilai dan dianotasi dari server backend Anda, bukan dari perangkat seluler.

Mengintegrasikan reCAPTCHA Enterprise dengan aplikasi iOS

Sebelum memulai

Menyiapkan lingkungan iOS Anda

CocoaPods

Swift Package Manager

Flutter

ReactNative

Download langsung

Mengonfigurasi aplikasi

Swift

Objective-C

Mengintegrasikan reCAPTCHA Enterprise dengan aplikasi iOS Anda

Swift dengan Storyboard

Swift dengan SwiftUI

Objective-C

Swift dengan Storyboard

Swift dengan SwiftUI

Objective-C

Menetapkan waktu tunggu untuk panggilan API

Swift

Objective-C

Referensi API

Langkah selanjutnya