Captcha:Integrasi dengan arsitektur V3 di Android

Langkah 1: Integrasikan Alibaba Cloud Captcha 2.0 ke dalam klien layanan HTML5

1. Dalam kode klien layanan HTML5 Anda, integrasikan kode sisi klien yang disediakan oleh Captcha 2.0. Untuk informasi lebih lanjut, lihat Integrasi dengan arsitektur V3 untuk klien web dan HTML5.

   Catatan

   Jika layanan Anda menggunakan arsitektur V2, lihat Integrasi dengan arsitektur V2 untuk klien web dan HTML5.

2. Dalam fungsi callback sukses, tambahkan fungsi JavaScript untuk mengembalikan parameter verifikasi tanda tangan ke antarmuka Java kustom testJsInterface, seperti yang dijelaskan dalam Langkah 5 dan Langkah 6. Setelah antarmuka Java mendapatkan parameter verifikasi tanda tangan, aplikasi Android dapat mengirim permintaan layanan dan verifikasi tanda tangan serta memproses hasil verifikasi.

   // fungsi callback sukses
   function success(captchaVerifyParam) {
     // Parameter input adalah captchaVerifyParam untuk verifikasi tanda tangan.
     // Kembalikan parameter verifikasi tanda tangan ke antarmuka Java kustom.
     window.testInterface && window.testInterface.getCaptchaVerifyParam(captchaVerifyParam);
   }
   

Langkah 2: Integrasikan Alibaba Cloud Captcha 2.0 ke dalam server untuk halaman HTML5

Di server untuk halaman layanan HTML5, integrasikan kit pengembangan perangkat lunak (SDK) sisi server yang disediakan oleh Captcha 2.0. Kemudian, panggil operasi API VerifyIntelligentCaptcha untuk memulai verifikasi tanda tangan untuk layanan Anda. Untuk informasi lebih lanjut, lihat Integrasi Sisi Server.

Langkah 3: Aktifkan dan terapkan halaman layanan pada klien aplikasi Android

1. Dalam file Activity.java proyek aplikasi Android Anda, impor pustaka dependensi untuk komponen WebView.

   import android.webkit.WebView;
   import android.webkit.WebSettings;
   import android.webkit.WebViewClient;
   import android.webkit.WebChromeClient;
   // Atau
   // import android.webkit.*;

2. Dalam file konfigurasi AndroidManifest.xml, atur izin untuk memuat halaman web.

   Catatan

   Jika sumber daya HTTP lain dipanggil, Anda juga harus menambahkan konfigurasi yang sesuai.

   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
   <application
     ...
     android:usesCleartextTraffic="true"
     ...
     >

3. Dalam file tata letak activity_main.xml, tambahkan komponen WebView.

   <WebView
     android:id="@+id/webview"
     android:layout_height="match_parent"
     android:layout_width="match_parent"
   />

4. Dalam file MainActivity.java, muat halaman layanan HTML5.

   public class MainActivity extends AppCompatActivity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           initView();
       }
       private void initView() {
           // Tata letak halaman
           WebView webview = findViewById(R.id.webview);
           // Pengaturan WebView
           WebSettings webSettings = webview.getSettings();
           // Opsional. Aktifkan debugging Chrome.
           WebView.setWebContentsDebuggingEnabled(true);
           // Jadikan layar responsif.
           webSettings.setUseWideViewPort(true);
           webSettings.setLoadWithOverviewMode(true);
           // Nonaktifkan caching untuk memastikan versi terbaru Captcha 2.0 dapat segera diambil untuk melawan serangan.
           webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
           // Izinkan komponen WebView memuat JavaScript.
           webSettings.setJavaScriptEnabled(true);
           webSettings.setDomStorageEnabled(true);
           
           // Gunakan komponen WebView untuk memuat halaman alih-alih browser default.
           webview.setWebViewClient(new WebViewClient(){
               @Override
               public boolean shouldOverrideUrlLoading(WebView view, String url) { 
                   view.loadUrl(url);
                   return true;
               }
           });
           // Muat halaman layanan.
           webview.loadUrl("http://x.x.x.x/demo/");
       }
   }

5. Dalam file MainActivity.java, tambahkan antarmuka Java kustom testJsInterface dan definisikan metode getCaptchaVerifyParam untuk mendapatkan parameter verifikasi tanda tangan Captcha.

   import android.webkit.JavascriptInterface;
   
   public class testJsInterface {
       @JavascriptInterface
       public void getCaptchaVerifyParam(String captchaVerifyParam) {
           // Setelah Anda mendapatkan parameter verifikasi tanda tangan, Anda dapat mengirim permintaan layanan dan verifikasi tanda tangan serta memproses hasil verifikasi.
           System.out.println(captchaVerifyParam);
       }
   }

6. Dalam metode initView() dari MainActivity.java, ikat antarmuka Java kustom ke fungsi JavaScript.

   // Bangun jembatan untuk JavaScript memanggil antarmuka Java.
   webview.addJavascriptInterface(new testJsInterface(), "testInterface");