Captcha:Panduan integrasi

Slider, puzzle, klik-untuk-lulus, dan pemulihan citra

Penjelasan diagram urutan:

1. Ketika pengguna melakukan inisialisasi Captcha pada klien bisnis, klien meminta sumber daya JavaScript (JS), seperti citra atau pertanyaan, dari server Captcha.

2. Server Captcha secara dinamis mengembalikan sumber daya JS tersebut. Klien bisnis kemudian memuat dan merender Captcha.

3. Setelah pengguna berhasil berinteraksi dengan Captcha pada klien bisnis—misalnya dengan menyelesaikan tantangan slider, puzzle, atau pemulihan citra—JS secara otomatis mengirim permintaan untuk memverifikasi jawaban tersebut. Server Captcha memverifikasi keabsahan jawaban dan apakah permintaan berasal dari mesin.

4. Jika verifikasi berhasil, server Captcha memanggil fungsi callback success dan mengembalikan CaptchaVerifyParam. Jika gagal, Captcha secara otomatis dimuat ulang untuk percobaan baru.

5. Klien bisnis mengirim permintaan yang berisi parameter bisnis dan CaptchaVerifyParam ke server bisnis.

6. Server bisnis memanggil API VerifyIntelligentCaptcha dari server Captcha untuk memverifikasi parameter CaptchaVerifyParam.

7. Server Captcha memverifikasi keabsahan parameter dan apakah permintaan bersifat berbahaya, lalu mengembalikan hasil verifikasi.

8. Server bisnis memproses logika bisnis berdasarkan hasil verifikasi dan mengembalikan hasil verifikasi serta hasil bisnis ke halaman web klien.

Verifikasi tanpa CAPTCHA

Integrasi Web dan H5

Jika Anda menggunakan integrasi Web dan H5, atur Integration Method menjadi Web/H5 saat membuat skenario verifikasi.

1. Integrasi sisi klien: Pada halaman klien (Web dan H5) yang menggunakan fitur verifikasi, integrasikan kode inisialisasi Captcha. Contoh kode inisialisasi tersedia di Integrasi arsitektur klien Web dan H5 V3.

2. Integrasi sisi server: Pada server yang sesuai dengan halaman klien (Web dan H5), integrasikan SDK, lalu panggil API VerifyIntelligentCaptcha untuk memulai verifikasi Captcha. Untuk informasi selengkapnya, lihat Integrasi sisi server.

Integrasi aplikasi

Jika Anda menggunakan integrasi aplikasi, atur Integration Method menjadi Webview+H5 (for Apps And WeChat Mini Programs) saat membuat skenario verifikasi.

1. Integrasi sisi klien: Pada halaman klien (Web dan H5) yang menggunakan fitur verifikasi, integrasikan kode inisialisasi Captcha. Contoh kode inisialisasi tersedia di Integrasi arsitektur klien Web dan H5 V3.

2. Integrasi sisi server: Pada server yang sesuai dengan halaman klien (Web dan H5), integrasikan SDK, lalu panggil API VerifyIntelligentCaptcha untuk memulai verifikasi Captcha. Untuk informasi selengkapnya, lihat Integrasi sisi server.

3. Integrasi sisi aplikasi

   • Aplikasi Android: Gunakan komponen WebView untuk mengaktifkan dan menerapkan halaman bisnis yang memerlukan Captcha 2.0 di aplikasi Anda. Untuk informasi selengkapnya, lihat Integrasi arsitektur Android V3.

   • Aplikasi iOS: Gunakan komponen WKWebView untuk mengaktifkan dan menerapkan halaman bisnis yang memerlukan Captcha 2.0 di aplikasi Anda. Untuk informasi selengkapnya, lihat Integrasi arsitektur iOS V3.

Integrasi Program Mini WeChat

Jika Anda menggunakan integrasi Program Mini WeChat, atur Integration Method menjadi Webview+H5 (for Apps And WeChat Mini Programs) atau WeChat Mini Program Native Plugin saat membuat skenario verifikasi.

Integrasi Program Mini WeChat: Setelah menambahkan skenario verifikasi di konsol, integrasikan kode inisialisasi Captcha pada halaman Program Mini WeChat yang menggunakan fitur verifikasi. Untuk informasi selengkapnya, lihat Integrasi Program Mini.

• Uji inisialisasi klien bisnis

  Setelah konfigurasi selesai, buka konsol browser pada halaman tempat Captcha diintegrasikan dan periksa informasi di tab Network.

  Jika semua item berikut tersedia, integrasi sisi klien berhasil:

  • Permintaan inisialisasi (① pada gambar)

  • Preview permintaan inisialisasi berisi informasi Captcha (② pada gambar), dan nilai success adalah true.

  • Sumber daya Captcha (③ pada gambar)

• Uji verifikasi klien bisnis

  Setelah mengirim permintaan verifikasi, buka konsol browser pada halaman tempat Captcha diintegrasikan dan periksa informasi di tab Network.

  Jika nilai VerifyResult adalah true (① pada gambar), verifikasi berhasil.

• Uji integrasi sisi server

  Setelah integrasi sisi klien berhasil, API bisnis mengirim parameter verifikasi captchaVerifyParam ke server bisnis. Server bisnis kemudian memanggil API Alibaba Cloud VerifyIntelligentCaptcha, yang mengembalikan hasil verifikasi.

  Hasil verifikasi dapat dilihat dalam respons server bisnis. Jika nilai VerifyResult adalah true, integrasi sisi server berhasil.

  {
      "RequestId": "C******-B***-4***-A***-5*******1",
      "Message": "success",
      "HttpStatusCode": 200,
      "Code": "Success",
      "Success": true,
      "Result": {
          "VerifyCode": "T001",
          "VerifyResult": true
      }
  }

• Uji apakah Captcha berfungsi sebagaimana mestinya

  Setelah integrasi sisi server berhasil, hasil bisnis dan hasil Captcha Alibaba Cloud dikembalikan ke klien. Klien menjalankan operasi bisnis yang berbeda berdasarkan hasil yang diterima. Anda dapat menggunakan Captcha pada klien untuk menguji apakah verifikasi berfungsi sebagaimana mestinya.

  • Untuk Verifikasi Slider, Verifikasi Jigsaw, Verifikasi Klik-untuk-lulus, dan Verifikasi Pemulihan Citra, verifikasi berhasil jika pesan Verification Passed ditampilkan.

  • Verifikasi tanpa CAPTCHA: Keberhasilan interaksi bisnis menunjukkan bahwa verifikasi berhasil. Misalnya, dalam skenario login, verifikasi berhasil jika pesan Logon Successful ditampilkan setelah Anda login dengan nama pengguna dan kata sandi.