Android接入腾讯云图形验证
Posted LayneYao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android接入腾讯云图形验证相关的知识，希望对你有一定的参考价值。
android接入腾讯云图形验证
官方的文档有默认的方法：
https://cloud.tencent.com/document/product/1110/49810
但由于需求，需要定制的，这里使用的是web里面的方法3，官方没有demo，所以这里放出来给大家参考一下，也很简单，就直接贴代码了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 前端接入示例</title>
<!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会影响程序的正常使用。 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body onload="document.querySelector('div').click();">
<!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
<!--id : (不可变) 元素的 ID, 值必须是 'TencentCaptcha'-->
<!--data-appid : (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
<!--data-cbfn : (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
<!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
<div id="TencentCaptcha" data-appid="你的验证码CaptchaAppId" data-cbfn="callbackName"
data-biz-state="data-biz-state">
</div>
</body>
<script>
/*
window.location.search 拿到的是 ?lan=zh-hk
*/
var lan = window.location.search;
var language = lan.split('=')[1];
try
/*
needFeedBack：无需帮助按钮，如需要使用官方默认方法就行
userLanguage：设置语言
*/
var sdkOptions = "needFeedBack":false,"userLanguage":language;
new TencentCaptcha(
document.getElementById('TencentCaptcha'),
'你的验证码CaptchaAppId',
callback,
sdkOptions);
catch (error)
loadErrorCallback();
function callback(res)
/* res（验证成功） = ret: 0, ticket: "String", randstr: "String"
res（客户端出现异常错误 仍返回可用票据） = ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"
res（用户主动关闭验证码）= ret: 2
根据自己需要设置回调的数据即可
*/
if (res.ret === 0)
var result = ret:res.ret, randstr:res.randstr, ticket:res.ticket ;
window.jsBridge.getData(JSON.stringify(result));
else
var result = ret:res.ret, randstr:"", ticket:"" ;
window.jsBridge.getData(JSON.stringify(result));
// 验证码js加载错误处理
function loadErrorCallback()
var CaptchaAppId = ''
/* 生成票据或自行做其它处理 */
var ticket = 'terror_1001_' + CaptchaAppId + Math.floor(new Date().getTime() / 1000);
callback(
ret: 0,
randstr: '@'+ Math.random().toString(36).substr(2),
ticket: ticket,
errorCode: 1001,
errorMessage: 'jsload_error',
);
</script>
</html>
Android方面的代码：
public class MainActivity extends AppCompatActivity
private WebView webview;
private WebSettings webSettings;
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
private void initView()
webview = (WebView) findViewById(R.id.webview);
//如果要做成弹窗式的，那么这个webview就要设置成透明的，否则webview不透明会挡住主页面的布局
// webview.setBackgroundColor(0);
webSettings = webview.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
// 禁用缓存
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webview.setWebViewClient(new WebViewClient()
@Override
public 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"))
//zh-hk，ja，en
webview.loadUrl("file:///android_asset/verificationCode.html?lan=zh-hk");
public class JsBridge
@JavascriptInterface
public void getData(String data)
//回调结果："ret":2,"randstr":"","ticket":""
Log.e("csTest", data);
布局文件代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
最后记得要联网：
<uses-permission android:name="android.permission.INTERNET"/>
以上是关于Android接入腾讯云图形验证的主要内容，如果未能解决你的问题，请参考以下文章