:Integrasikan dengan arsitektur V2 untuk iOS

Informasi latar belakang

Versi HTML5 seluler dari Captcha V2.0 menawarkan iterasi cepat dan kompatibilitas kuat. Metode integrasi layanan Captcha V2.0 ini ke dalam aplikasi Anda menghindari masalah kompatibilitas yang disebabkan oleh dependensi dan referensi pada komponen aplikasi native. Iterasi cepat versi HTML5 seluler Captcha V2.0 juga membantu aplikasi Anda menangani ancaman tingkat lanjut dengan lebih baik.

Alur integrasi

Mengintegrasikan versi HTML5 dari Captcha V2.0 ke dalam aplikasi iOS melibatkan langkah-langkah berikut:

1. Klien halaman HTML5: Integrasikan Captcha V2.0 ke dalam klien halaman bisnis HTML5 Anda.

2. Server untuk halaman HTML5: Integrasikan kit pengembangan perangkat lunak (SDK) Captcha V2.0 di sisi server, lalu panggil operasi API VerifyIntelligentCaptcha untuk memulai verifikasi.

3. Aplikasi iOS: Gunakan komponen WKWebView untuk mengaktifkan dan men-deploy halaman bisnis yang memerlukan integrasi Captcha V2.0 di dalam aplikasi Anda.

Prasyarat

• Layanan Captcha 2.0 Alibaba Cloud telah diaktifkan.

• Sebuah skenario verifikasi telah dibuat. Integration Method diatur ke Webview+H5 (Supports Apps And WeChat Mini Programs).

• Gunakan iOS 10.0 atau versi yang lebih baru.

Langkah 1: Integrasikan Alibaba Cloud Captcha V2.0 ke dalam klien halaman bisnis HTML5 Anda

1. Integrasikan kode integrasi sisi klien yang disediakan oleh Captcha ke dalam kode antarmuka depan halaman HTML5 Anda. Untuk informasi selengkapnya tentang integrasi sisi klien untuk halaman HTML5, lihat Integrasi Sisi Klien Web dan H5.

2. Sesuaikan kode sisi klien berdasarkan lingkungan tempat Anda melakukan verifikasi hasil bisnis.

   • Jika Anda melakukan verifikasi hasil bisnis di sisi aplikasi iOS, sesuaikan kode sebagai berikut:

     1. Pada fungsi callback permintaan bisnis, tambahkan fungsi JavaScript yang sesuai. Panggil metode yang dikonfigurasi di Langkah 3 dan Langkah 4 untuk mengambil hasil verifikasi. Metode ini menggunakan protokol WKScriptMessageHandler untuk interaksi antara JavaScript dan WKWebView. Setelah mendapatkan hasil verifikasi, Anda dapat menjalankan berbagai operasi bisnis di aplikasi iOS.

        // Fungsi callback permintaan bisnis (dengan verifikasi Captcha)
        async function captchaVerifyCallback(captchaVerifyParam) {
          // 1. Kirim permintaan bisnis ke backend untuk mendapatkan hasil verifikasi Captcha dan hasil bisnis.
          const result = await xxxx('http://your_business_request_address', {
              captchaVerifyParam: captchaVerifyParam, // Parameter Captcha.
              yourBizParam... // Parameter bisnis.
          });
        
          // 2. Buat parameter kembali standar.
          const verifyResult = {
            captchaResult: result.captchaVerifyResult, // Menentukan apakah verifikasi Captcha berhasil. Parameter ini bertipe boolean dan wajib diisi.
            bizResult: Ambil hasil verifikasi bisnis Anda dari result, // Menentukan apakah verifikasi bisnis berhasil. Parameter ini bertipe boolean dan opsional. Jika tidak tersedia hasil verifikasi bisnis, Anda dapat mengosongkan bizResult.
          };
          // Panggil metode JavaScript yang diimplementasikan oleh protokol WkScriptMessageHandler untuk mendapatkan hasil verifikasi.
          window.webkit && window.webkit.messageHandlers.getVerifyResult.postMessage(verifyResult)
          return verifyResult;
        }

     2. Atur fungsi callback hasil verifikasi permintaan bisnis halaman HTML5 menjadi fungsi kosong. Hal ini memindahkan operasi bisnis dari sisi HTML5 ke sisi aplikasi iOS.

        // Fungsi callback hasil verifikasi permintaan bisnis
        function onBizResultCallback(bizResult) {
          // Atur menjadi fungsi kosong.
        }

   • Jika Anda melakukan verifikasi hasil bisnis di halaman HTML5, Anda tidak perlu menyesuaikan kode.

   • Untuk melakukan verifikasi hasil bisnis baik di halaman HTML5 maupun di sisi aplikasi iOS, sesuaikan kode sebagai berikut. Hal ini memastikan bahwa kode integrasi yang sama dapat digunakan di kedua lingkungan dan logika verifikasi hasil bisnis masing-masing tidak saling mengganggu.

     1. Pada fungsi callback permintaan bisnis, tambahkan fungsi JavaScript yang sesuai. Untuk informasi selengkapnya, lihat Tambahkan fungsi JavaScript.

     2. Ubah fungsi callback hasil verifikasi permintaan bisnis halaman HTML5 untuk menentukan apakah lingkungan verifikasinya adalah HTML5. Jika ya, tambahkan logika bisnis untuk halaman HTML5.

        // Fungsi callback hasil verifikasi permintaan bisnis
        function onBizResultCallback(bizResult) {
          // Tentukan apakah lingkungannya adalah aplikasi iOS. Jika tidak ada fungsi JavaScript kustom di lingkungan verifikasi, maka lingkungannya adalah halaman HTML5.
          // Anda juga dapat menggunakan kondisi kustom Anda sendiri untuk membedakan kedua lingkungan tersebut.
          if (!window.webkit || !window.webkit.messageHandlers) {
              // Logika bisnis Anda untuk halaman HTML5.
          }
        }

Langkah 2: Integrasikan Alibaba Cloud Captcha V2.0 ke dalam server halaman HTML5

Di sisi server halaman bisnis HTML5 Anda, setelah mengintegrasikan SDK sisi server yang disediakan oleh Captcha 2.0, panggil operasi VerifyIntelligentCaptcha untuk memulai verifikasi captcha. Untuk informasi selengkapnya, lihat Integrasi sisi server.

Langkah 3: Aktifkan dan deploy halaman bisnis di aplikasi iOS

1. Dalam file Controller.swift proyek aplikasi iOS Anda, impor dependensi yang diperlukan.

   import SwiftUI
   import WebKit

2. Dalam file Controller.swift proyek aplikasi iOS Anda, muat halaman bisnis HTML5.

   override func viewDidLoad() {
     super.viewDidLoad()
     view.addSubview(webView)
     let url = URL(string: "http://x.x.x.x/demo/")
     let request = URLRequest(url: url!);
     webView.load(request); // Muat halaman.
   }

3. Atur objek WKWebView agar memungkinkan interaksi antara JavaScript dan WKWebView menggunakan protokol WKScriptMessageHandler.

   lazy var webView: WKWebView = {
     // Konfigurasikan penskalaan halaman otomatis.
     let javascript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta)";
     let configuration = WKWebViewConfiguration();
     let userScript = WKUserScript(source: javascript, injectionTime: .atDocumentEnd, forMainFrameOnly: true);
     let usercontroller = WKUserContentController();
     usercontroller.addUserScript(userScript);
     configuration.userContentController = usercontroller;
     // Tambahkan metode untuk memanggil JavaScript halaman HTML. Anda dapat mengubah nama metode sesuai kebutuhan.
     configuration.userContentController.add(self, name: "getVerifyResult");
     // Konfigurasikan WKWebView.
     let webView = WKWebView(frame: self.view.frame, configuration: configuration);
     webView.navigationDelegate = self;
     return webView;
   }()

4. Atur metode yang sesuai untuk protokol WKScriptMessageHandler. Metode ini digunakan untuk mengambil nilai kembali dari Captcha V2.0 dan kode logika bisnis Anda, lalu meneruskan hasil verifikasi ke API kustom.

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
     if(message.name == "getVerifyResult"){
       // Setelah menerima hasil verifikasi, Anda dapat menjalankan berbagai operasi bisnis.
       print(message.body)
     }
   }