Halaman ini diterjemahkan oleh Cloud Translation API.

Mengintegrasikan reCAPTCHA dengan aplikasi iOS

Halaman ini menjelaskan cara mengintegrasikan reCAPTCHA di aplikasi iOS Anda.

Karena variasi 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 berlapis Anda sendiri, seperti alur MFA untuk memberikan jalur redemption alternatif bagi traffic yang mencurigakan.

SDK menggunakan refleksi dan kode dinamis untuk memungkinkan update dan peningkatan sistem deteksi di aplikasi atau SDK yang telah di-deploy. Untuk menghindari gangguan pada aplikasi, kumpulan class yang tersedia di sistem dibatasi untuk daftar yang dikontrol dengan cermat.

Sebelum memulai

Tetapkan SDK minimum aplikasi Anda ke iOS 12 atau buat aplikasi seluler baru.
Siapkan lingkungan Anda untuk reCAPTCHA.
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 konsol Google Cloud, lakukan hal berikut:
  1. Buka halaman reCAPTCHA.
    
    Buka reCAPTCHA
  2. Di daftar kunci reCAPTCHA, arahkan kursor ke kunci yang ingin disalin, 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

Untuk menyiapkan lingkungan pengembangan, lakukan hal berikut:

Download dan instal Xcode versi terbaru dan buat aplikasi tampilan tunggal iOS kosong yang baru.
Download SDK menggunakan salah satu cara 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.6.0" ... 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. Di dialog Xcode, masukkan detail berikut:
  - Nama pengguna GitHub.
  - Token akses pribadi yang Anda buat menggunakan petunjuk GitHub. Token Akses Pribadi harus memiliki cakupan yang tercantum dalam dialog Login XCode.
  Xcode menginstal SDK dan dependensi yang diperlukan.
Flutter
Untuk petunjuk mendetail tentang cara menggunakan reCAPTCHA melalui Flutter, lihat dokumentasi Flutter.

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

Mengonfigurasi aplikasi

Anda dapat menulis aplikasi dalam Swift atau Objective-C.

Untuk mengonfigurasi aplikasi, tambahkan file berikut di aplikasi Anda:

Swift

Jika aplikasi Anda ditulis dalam Swift, sertakan impor berikut:
```
 import RecaptchaEnterprise
```

Objective-C

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

Mengintegrasikan reCAPTCHA dengan aplikasi iOS

Untuk mengintegrasikan reCAPTCHA dengan aplikasi iOS, 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

Update 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)).")
      }
    }
  }
}

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.fetchClient(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.

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

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.fetchClient(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

Update ViewController.h.

#import <RecaptchaEnterprise/RecaptchaEnterprise.h>

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

Update 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

Inisialisasi SDK dapat memerlukan waktu beberapa detik untuk selesai. Untuk mengurangi latensi ini, lakukan inisialisasi klien sedini mungkin, seperti selama panggilan onCreate() class Application kustom. Anda tidak boleh membuat elemen UI memblokir reCAPTCHA SDK.

Buat tombol untuk memanggil reCAPTCHA dan memicu execute().

Swift dengan Storyboard

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

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

Perbarui 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:

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

API execute klien dapat memerlukan waktu beberapa detik untuk selesai, seperti dalam kondisi jaringan yang lambat atau jika menunggu inisialisasi latar belakang selesai. Pastikan panggilan execute() tidak memblokir peristiwa UI, seperti menekan tombol.

Uji aplikasi Anda:
1. reCAPTCHA menggunakan AppAttest Apple sebagai bagian dari mesin deteksinya. 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.

Bermigrasi dari API metode ke metode fetchClient

Metode fetchClient menampilkan RecaptchaClient yang mencoba kembali inisialisasi karena kegagalan jaringan. Jika aplikasi tidak memiliki akses jaringan saat klien dibuat, klien akan terus mencoba lagi dan berhasil melakukan inisialisasi saat jaringan diperoleh.

Jika Anda memanggil execute(timeout) dan klien belum siap, klien akan mencoba melakukan inisialisasi sebelum menampilkan token atau RecaptchaErrorCode.

Contoh berikut menunjukkan cara bermigrasi dari getClient ke fetchClient.

Swift dengan 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)).")
    }
  }
}

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

// 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 dengan 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)).")
    }
  }
}

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

// 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

Menetapkan waktu tunggu untuk panggilan API

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

Swift

Tetapkan 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 akhir:

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

Objective-C

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

Menangani error

Jika aplikasi Anda tidak berhasil melakukan komunikasi dengan layanan reCAPTCHA, hal itu mungkin karena API mengalami error. Anda harus menambahkan logika di aplikasi untuk menangani error tersebut dengan baik.

Untuk mengetahui detail selengkapnya tentang mitigasi untuk error API umum, lihat RecaptchaErrorCode.

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, bukan dari perangkat seluler.

Mengintegrasikan reCAPTCHA dengan aplikasi iOS

Sebelum memulai

Menyiapkan lingkungan iOS

CocoaPods

Swift Package Manager

Flutter

ReactNative

Download langsung

Mengonfigurasi aplikasi

Swift

Objective-C

Mengintegrasikan reCAPTCHA dengan aplikasi iOS

Swift dengan Storyboard

Swift dengan SwiftUI

Objective-C

Swift dengan Storyboard

Swift dengan SwiftUI

Objective-C

Bermigrasi dari API metode ke metode fetchClient

Swift dengan Storyboard

Swift dengan SwiftUI

Objective-C

Menetapkan waktu tunggu untuk panggilan API

Swift

Objective-C

Menangani error

Referensi API

Langkah selanjutnya