前提条件
客户端接入前,需完成新建验证,并在验证列表获取所需的 CaptchaAppId 以及 AppSecretKey。步骤如下:
1. 登录 验证码控制台,左侧导航栏选择图形验证 > 验证管理,进入验证管理页面。
2. 单击新建验证,根据业务场景需求,设置验证名称、客户端类型、验证方式等参数。
3. 单击确定,完成新建验证,即可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey。
接入步骤
注意
App 客户端(Android/iOS/Harmony)当前仅支持通过 Webview 引入 H5页面进行接入。
Android 接入
Android 接入主要流程
1. 在 Android 端利用 WebView 引入 H5页面。H5 页面接入验证码,详情请参见 Web 客户端接入。
2. 在 H5 页面中,通过调用验证码 JS,渲染验证页面,并将 JS 返回的参数值传到 Android App 业务端。
3. Android App 业务端把相关参数(票据 ticket、随机数等)传入业务侧后端服务进行票据验证,详情请参见 接入票据校验(Web及App)。
Android 接入详细步骤
1. 在项目的工程中,新建一个 Activity 并导入 WebView 组件所需的包。
import android.webkit.WebView;import android.webkit.WebSettings;import android.webkit.WebViewClient;import android.webkit.WebChromeClient;
2. 添加相关权限,如开启网络访问权限以及允许 App 进行非 HTTPS 请求等。
<uses-permission android:name="android.permission.INTERNET"/><application android:usesCleartextTraffic="true">...</application>
3. 在 Activity 的布局文件中,添加 WebView 组件。
<WebViewandroid:id="@+id/webview"android:layout_height="match_parent"android:layout_width="match_parent"/>
4. 在项目的工程中,添加自定义 JavascriptInterface 文件,并定义一个方法用来获取相关数据。
import android.webkit.JavascriptInterface;public class JsBridge {@JavascriptInterfacepublic void getData(String data) {System.out.println(data);}}
5. 在 Activity 文件中,加载相关 H5 业务页面。
public class MainActivity extends AppCompatActivity {private WebView webview;private WebSettings webSettings;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {webview = (WebView) findViewById(R.id.webview);webSettings = webview.getSettings();webSettings.setUseWideViewPort(true);webSettings.setLoadWithOverviewMode(true);// 禁用缓存webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);webview.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});// 开启js支持webSettings.setJavaScriptEnabled(true);webview.addJavascriptInterface(new JsBridge(), "jsBridge");// 也可以加载本地html(webView.loadUrl("file:///android_asset/xxx.html"))webview.loadUrl("https://x.x.x/x/");}}
6. 在 H5 业务页面中接入验证码,详情请参见 Web 客户端接入 文档,并使用 JSBridge 传回验证数据给具体业务端。
注意
常见问题
更多信息