Integrasi Android dengan arsitektur V2 - - Alibaba Cloud Documentation Center

Anda dapat menggunakan komponen WebView di aplikasi Anda untuk mengintegrasikan versi HTML5 seluler Alibaba Cloud Captcha 2.0, sehingga memungkinkan penerapan verifikasi manusia-mesin melalui teknologi aplikasi seluler hibrid (Hybrid App). Topik ini menjelaskan cara mengintegrasikan Captcha 2.0 ke dalam aplikasi Android.

Informasi latar belakang

Versi HTML5 seluler Captcha 2.0 menawarkan iterasi cepat dan kompatibilitas yang kuat. Integrasi layanan Captcha 2.0 dengan pendekatan ini menghindari masalah kompatibilitas akibat dependensi dan referensi pada komponen aplikasi native. Selain itu, kemampuan iterasi cepat dari Captcha 2.0 HTML5 seluler membantu aplikasi Anda mengatasi skenario serangan canggih secara lebih efektif.

Proses integrasi

Untuk mengintegrasikan versi HTML5 Captcha 2.0 ke dalam aplikasi Android, ikuti langkah-langkah berikut:

Klien halaman HTML5: Integrasikan Captcha 2.0 di sisi klien halaman bisnis HTML5 Anda.
Backend untuk halaman HTML5: Integrasikan kit pengembangan perangkat lunak (SDK) Captcha 2.0 ke dalam backend, lalu panggil operasi VerifyIntelligentCaptcha untuk memulai verifikasi Captcha.
Aplikasi Android: Gunakan komponen WebView untuk memuat halaman bisnis yang memerlukan integrasi Captcha 2.0.

Jika Anda mengalami masalah selama proses integrasi, kirim tiket untuk menghubungi kami.

Prasyarat

Layanan Captcha 2.0 telah diaktifkan.
Sebuah skenario verifikasi telah dibuat dengan Integration Method diatur ke Webview+H5 (for Apps And WeChat Mini Programs).
Android 7.0 atau versi yang lebih baru digunakan.

Langkah 1: Integrasikan Alibaba Cloud Captcha 2.0 di klien halaman bisnis HTML5

Dalam kode sisi klien halaman bisnis HTML5 Anda, integrasikan kode integrasi sisi klien yang disediakan oleh Captcha 2.0. Untuk informasi selengkapnya, lihat Integrasi klien Web dan H5.

Sesuaikan kode integrasi sisi klien berdasarkan lingkungan tempat hasil bisnis diverifikasi.

Jika hasil bisnis diverifikasi di aplikasi Android, sesuaikan kode sebagai berikut:

Dalam fungsi callback untuk permintaan bisnis, tambahkan fungsi JavaScript yang sesuai untuk mengembalikan hasil verifikasi ke antarmuka Java kustom testJsInterface dari Langkah 5 dan Langkah 6. Setelah antarmuka Java menerima hasil verifikasi, Anda dapat menjalankan berbagai operasi bisnis di aplikasi Android.

// Fungsi callback untuk permintaan bisnis yang memerlukan 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 Anda...
  });

  // 2. Buat parameter pengembalian standar.
  const verifyResult = {
    captchaResult: result.captchaVerifyResult, // Menentukan apakah verifikasi Captcha berhasil. Parameter ini bertipe boolean dan wajib diisi.
    bizResult: get_your_business_verification_result_from_result, // Menentukan apakah verifikasi bisnis berhasil. Parameter ini bertipe boolean dan opsional. Jika tidak ada hasil bisnis yang diverifikasi, Anda dapat mengosongkan bizResult.
  };
  // Kembalikan hasil verifikasi ke antarmuka Java kustom.
  window.testInterface && window.testInterface.getVerifyResult(JSON.stringify(verifyResult));
  return verifyResult;
}

Atur fungsi callback untuk hasil verifikasi permintaan bisnis di halaman HTML5 menjadi fungsi kosong. Hal ini memindahkan operasi bisnis dari halaman HTML5 ke aplikasi Android.
```
// Fungsi callback untuk hasil verifikasi permintaan bisnis.
function onBizResultCallback(bizResult) {
  // Atur menjadi fungsi kosong.
}
```

Jika hasil bisnis diverifikasi di halaman HTML5, tidak diperlukan penyesuaian kode.
Jika hasil bisnis harus diverifikasi baik di halaman HTML5 maupun di aplikasi Android, sesuaikan kode sebagai berikut agar kode integrasi yang sama dapat digunakan di kedua lingkungan tanpa mengganggu logika verifikasi masing-masing.
1. Dalam fungsi callback untuk permintaan bisnis, tambahkan fungsi JavaScript yang sesuai. Untuk informasi selengkapnya, lihat Tambahkan fungsi JavaScript.
2. Ubah fungsi callback untuk hasil verifikasi permintaan bisnis di halaman HTML5 agar memeriksa apakah lingkungan verifikasi adalah halaman HTML5. Jika ya, tambahkan logika bisnis untuk halaman HTML5.
```
// Fungsi callback untuk hasil verifikasi permintaan bisnis.
function onBizResultCallback(bizResult) {
  // Periksa apakah lingkungan adalah aplikasi Android. Jika lingkungan verifikasi tidak memiliki fungsi JavaScript kustom, maka lingkungan tersebut adalah halaman HTML5.
  // Anda juga dapat menggunakan kondisi kustom untuk membedakan kedua lingkungan tersebut.
  if (!window.testInterface || !window.testInterface.getSlideData) {
      // Logika bisnis Anda untuk halaman HTML5.
  }
}
```

Langkah 2: Integrasikan Alibaba Cloud Captcha 2.0 di backend halaman HTML5

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

Penting

Setelah menyelesaikan integrasi sisi server, pastikan bahwa klien dan server berhasil terintegrasi dengan Captcha 2.0. Untuk informasi selengkapnya, lihat Langkah 3: Integrasikan Captcha.

Langkah 3: Aktifkan dan deploy halaman bisnis di aplikasi Android

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.*;

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

Catatan

Jika sumber daya HTTP lainnya dipanggil, tambahkan 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"
  ...
  >

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

Dalam file MainActivity.java, muat halaman bisnis 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);
        // Sesuaikan konten dengan ukuran layar.
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        // Nonaktifkan pemuatan cache. Hal ini memastikan bahwa versi terbaru Alibaba Cloud Captcha 2.0 dapat segera diambil untuk melindungi dari 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 bisnis.
        webview.loadUrl("http://x.x.x.x/demo/");
    }
}

Dalam file MainActivity.java, tambahkan antarmuka Java kustom testJsInterface dan definisikan metode getVerifyResult untuk mengambil hasil verifikasi.

import android.webkit.JavascriptInterface;

public class testJsInterface {
    @JavascriptInterface
    public void getVerifyResult(String verifyResult) {
        // Setelah Anda memperoleh hasil verifikasi, Anda dapat melakukan berbagai operasi bisnis.
        System.out.println(verifyResult);
    }
}

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

// Buat jembatan agar JavaScript dapat memanggil antarmuka Java.
webview.addJavascriptInterface(new testJsInterface(), "testInterface");

Setelah menyelesaikan konfigurasi ini, aplikasi Android Anda telah terintegrasi dengan Captcha 2.0. Anda kemudian dapat menggunakan Captcha di aplikasi Android Anda untuk menguji verifikasi. Jika Captcha berfungsi sesuai harapan, integrasi berhasil.