Captcha:FAQ integrasi klien

Q1: Bagaimana cara menangani beberapa captcha pada satu halaman?

• Metode 1: Gunakan mode popup. Atur elemen button yang diteruskan ke metode initAliyunCaptcha sebagai elemen tersembunyi, lalu bind event—misalnya klik—ke elemen pemicu captcha. Di dalam fungsi callback event tersebut, gunakan JavaScript untuk memicu klik pada elemen button tersembunyi ini. Tindakan ini akan membuka jendela popup captcha dan memungkinkan seluruh halaman berbagi satu instans captcha.

• Metode 2: Enkapsulasi captcha sebagai komponen dan gunakan di tempat yang diperlukan. Anda dapat meneruskan parameter inisialisasi sebagai props. Setelah verifikasi selesai, hapus komponen captcha dari DOM. Untuk informasi lebih lanjut, lihat Unduhan demo arsitektur Client V3 dan Unduhan demo arsitektur Client V2.

Pertanyaan 2: Bagaimana cara mengintegrasikan Captcha untuk mengirim kode verifikasi pesan teks?

• Untuk informasi lebih lanjut, lihat Demo arsitektur V2 untuk mengirim pesan teks (React).

• Untuk informasi lebih lanjut, lihat Demo arsitektur V3 untuk mengirim pesan teks (React).

Q3: Untuk arsitektur klien V2, bagaimana cara merefresh atau menghapus captcha secara manual, atau menampilkan/menyembunyikan jendela popup captcha secara manual?

Anda dapat memanggil metode yang sesuai dari instans captcha. Metode-metode ini tidak didukung untuk verifikasi awal dalam mode traceless.

Q4: Untuk integrasi aplikasi, bagaimana cara mengirim permintaan verifikasi dari klien aplikasi?

Dalam captchaVerifyCallback, Anda dapat memanggil antarmuka Java kustom testJsInterface (untuk Android) atau menggunakan metode yang memanfaatkan protokol WkScriptMessageHandler untuk interaksi antara JavaScript dan WKWebView (untuk iOS). Teruskan captchaVerifyParam ke klien aplikasi, lalu tutup jendela captcha H5 dan mulai permintaan verifikasi. Setelah klien aplikasi menerima hasil verifikasi, tampilkan apakah verifikasi berhasil atau tidak. Jika verifikasi gagal, jendela H5 muncul kembali untuk percobaan lainnya. Mode traceless tidak didukung dalam skenario ini karena captcha diinisialisasi ulang untuk setiap verifikasi, yang memulai siklus hidup baru. Akibatnya, setiap percobaan merupakan verifikasi traceless. Bahkan jika verifikasi traceless gagal, percobaan berikutnya tidak memicu verifikasi secondary, sehingga perlindungan menjadi melemah.

Q5: Bagaimana cara melakukan operasi bisnis kustom sebelum memicu jendela popup captcha? (Misalnya, memicu puzzle captcha hanya setelah validasi format nomor telepon berhasil.)

Setelah operasi bisnis kustom lolos validasi, Anda dapat menggunakan metode instans captcha.show untuk menampilkan captcha guna verifikasi. Elemen button dapat diatur sebagai elemen tersembunyi. Anda harus meneruskan parameter button selama inisialisasi (lihat Q15).

Q6: Bagaimana cara mengatasi error 'Uncaught TypeError: Cannot set properties of undefined (setting 'onclick')'?

Error ini terjadi karena elemen atau elemen button tidak ditemukan. Elemen-elemen tersebut harus ada di DOM. Pastikan Anda meneruskan ID elemen yang benar dalam parameter inisialisasi.

Q7: Saya mengatur parameter slideStyle, tetapi mengapa tidak memengaruhi slider pada puzzle captcha?

Parameter `slideStyle` hanya berlaku untuk captcha slider dan tidak berlaku untuk puzzle captcha. Dimensi puzzle captcha bersifat tetap. Antarmuka depan tidak dapat mengubah panjang atau lebar citra maupun slider. Mengubah dimensi tersebut akan menyebabkan verifikasi gagal.

Q8: captchaVerifyCallback mengembalikan informasi hasil verifikasi, tetapi mengapa captcha tidak merespons?

Hal ini dapat terjadi karena alasan berikut:

1. Pernyataan `return` dideklarasikan di dalam fungsi callback, seperti callback sukses `ajax`, tetapi fungsi luar `captchaVerifyCallback` tidak memiliki pernyataan `return`. Akibatnya, kit pengembangan perangkat lunak (SDK) Captcha tidak dapat memperoleh hasil verifikasi, sehingga alur verifikasi terblokir. Untuk mengatasi masalah ini, bungkus nilai kembali dalam promise dan resolve hasilnya di dalam callback.

   Contoh yang benar

   async function captchaVerifyCallback(captchaVerifyParam) {
     return new Promise((resolve) => {
       $.ajax({
         Url: 'xxxx',
         data: 'xxxx',
         success: (result) => {
           resolve({
             captchaResult: true,
             bizResult: false,
           });
         },
       });
     });
   }

   Contoh yang salah

   async function captchaVerifyCallback(captchaVerifyParam) {
     $.ajax({
       Url: 'xxxx',
       data: 'xxxx',
       success: (result) => {
         return {
           captchaResult: true,
           bizResult: false,
         };
       },
     });
   }

2. Dalam mode embedded, untuk mengirim permintaan segera setelah menyelesaikan slide atau pemilihan citra, tambahkan parameter immediate: true ke metode inisialisasi.

Q9: Saya mengikuti kode demo untuk integrasi, tetapi mengapa captcha tidak dirender?

Hal ini dapat terjadi karena alasan berikut:

• Permintaan inisialisasi ke API https://prefix.captcha-open.aliyuncs.com gagal. Kegagalan ini mungkin disebabkan oleh masalah jaringan atau timeout. Jika respons berisi Forbidden.AccountAccessDenied, kegagalan tersebut kemungkinan disebabkan oleh status Akun Alibaba Cloud yang tidak normal atau pembayaran tertunda. Dalam kasus ini, pesan error jaringan akan muncul di console developer tools browser Anda.

• Jika tidak ada pesan error di console developer tools browser Anda dan permintaan inisialisasi berhasil, bidang CaptchaType dalam respons mungkin diatur ke TRACELESS. Ini menunjukkan mode traceless, di mana captcha grafis tidak dirender pada verifikasi awal.

Q10: Saat mengintegrasikan dengan WeChat Mini Program, saya mendapat pesan bahwa paket kode terlalu besar. Bagaimana cara mengatasinya?

Karena alasan keamanan, kode plugin menggunakan mekanisme obfuscation kompleks yang meningkatkan ukurannya. Anda dapat mengatasi masalah ini dengan menggunakan fitur subpackaging pada WeChat Mini Programs, yaitu menempatkan halaman-halaman yang menggunakan captcha ke dalam subpackage. Untuk informasi lebih lanjut, lihat Menggunakan subpackage di WeChat native, Subpackaging independen untuk WeChat Mini Program Taro, dan Mengimpor paket kode plugin dalam subpackage di uni-app.

Q11: Selama integrasi klien web, apa yang harus saya lakukan jika resource captcha gagal dimuat?

Periksa apakah sistem Anda telah mengaktifkan penyaringan domain atau URL. Fitur-fitur tersebut dapat memblokir akses ke resource atau API captcha yang penting. Jika diaktifkan, tambahkan nama domain berikut ke daftar putih.

Q12: Selama integrasi captcha, muncul pesan 'Console was cleared' dan log dihapus dari console developer tools. Bagaimana cara memperbaikinya?

Menghapus log developer tools merupakan tindakan keamanan yang dilakukan oleh Captcha dan tidak memengaruhi fungsionalitas normal. Selama pengembangan, Anda dapat memilih opsi Preserve log di pengaturan Console untuk menyimpan log.

Q13: Dapatkah saya menggunakan mode traceless saat mengintegrasikan Captcha dalam aplikasi menggunakan WebView dan H5?

Saat mengintegrasikan Captcha (arsitektur V2 atau V3) dalam aplikasi menggunakan WebView dan H5:

• Jika WebView berisi halaman bisnis dengan operasi bisnis, dan verifikasi dipicu oleh tombol fisik di dalam WebView, Anda dapat menggunakan verifikasi traceless.

• Jika WebView tidak memiliki operasi bisnis dan hanya berisi verifikasi captcha, mode traceless akan memblokir semua percobaan. Dalam kasus ini, Anda harus memilih jenis captcha interaktif lainnya, seperti slider, verifikasi sekali klik, puzzle captcha, atau restorasi citra.

Q14: Dalam skenario bisnis saya, saya perlu memicu captcha langsung menggunakan JavaScript. Bagaimana caranya?

Anda dapat menggunakan metode show dari instans captcha untuk menampilkan captcha popup. Metode `show` tidak didukung untuk verifikasi awal dalam mode traceless karena captcha grafis tidak dirender. Hindari memicu captcha dengan mensimulasikan klik, karena tindakan tersebut dapat terdeteksi sebagai alat otomatis dalam beberapa skenario dan menyebabkan pemblokiran.

Q15: Setelah menggunakan metode show dari instans captcha untuk menampilkan captcha, bisnis saya tidak memiliki tombol fisik. Dapatkah saya menghilangkan parameter inisialisasi button?

Tidak, Anda tidak dapat melakukannya. Parameter button wajib dicantumkan dalam dokumen integrasi. Anda dapat menggunakan elemen tersembunyi untuk parameter ini. Jika parameter ini dihilangkan, error captcha dapat terjadi dalam beberapa skenario, seperti dalam mode traceless.

Q16: Dalam arsitektur V3, bagaimana cara merefresh captcha untuk verifikasi ulang setelah verifikasi berhasil?

Setelah verifikasi berhasil, siklus hidup captcha berakhir. Untuk memverifikasi ulang, Anda harus memanggil metode inisialisasi lagi untuk menginisialisasi ulang captcha. Untuk informasi lebih lanjut, lihat deskripsi fungsi callback sukses dalam contoh kode di Integrasi arsitektur klien Web dan H5 V3.

Q17: Mengapa callback sukses dipicu setelah inisialisasi initAliyunCaptcha mengalami timeout?

Dalam mekanisme pemulihan bencana default Captcha 2.0, callback sukses dipicu jika panggilan inisialisasi gagal. Hal ini memungkinkan langkah verifikasi dilewati ketika API produk mengalami anomali dan mencegah operasi bisnis terblokir.