UML示意图
代码示例
- 主要对外接口api
提供一个接口，参数为webView和一个Callback；主要的接口采用单例模式进行编写代码
package im.zego.login.slide;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import com.google.gson.Gson;
public class SlidingVerificationCode {
private static SlidingVerificationCode instance;
private WebView webView;
private WebSettings webSettings;
public SlidingVerificationCode() {
}
public static SlidingVerificationCode getInstance() {
if (instance == null) {
instance = new SlidingVerificationCode();
}
return instance;
}
public void createVerificationCode(WebView webview, final VerificationCallback verificationCallback) {
this.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.setAllowFileAccess(true);//本地读取文件
webSettings.setJavaScriptEnabled(true);
// 也可以加载本地html(webView.loadUrl("file:///android_asset/xxx.html"))
webview.loadUrl("file:///android_asset/verificationCode.html");
//方法内部类，充当Android和JS的桥梁
class JsBridgeSlidingVerificationCode {
@JavascriptInterface
public void getData(String data) {
Gson gson = new Gson();
VerificationResult result = gson.fromJson(data, VerificationResult.class);
verificationCallback.verify(result);
Log.d("JsBridge", data);
}
}
JsBridgeSlidingVerificationCode jsBridge = new JsBridgeSlidingVerificationCode();
webview.addJavascriptInterface(jsBridge, "jsBridge");
}
}- callback
package im.zego.login.slide;
public interface VerificationCallback {
void verify(VerificationResult result);
}- 回调model
package im.zego.login.slide;
public class VerificationResult {
private String bizState;
private String randstr;
private String ticket;
private int ret;// resultCode 0:Success , 2:Quit
public void setBizState(String bizState) {
this.bizState = bizState;
}
public String getBizState() {
return bizState;
}
public void setRandstr(String randstr) {
this.randstr = randstr;
}
public String getRandstr() {
return randstr;
}
public void setTicket(String ticket) {
this.ticket = ticket;
}
public String getTicket() {
return ticket;
}
public void setRet(int ret) {
this.ret = ret;
}
public int getRet() {
return ret;
}
@Override
public String toString() {
return "VerificationResult{" +
"bizState='" + bizState + '\'' +
", randstr='" + randstr + '\'' +
", ticket='" + ticket + '\'' +
", ret=" + ret +
'}';
}
}- 验证码视图
最后需要使用腾讯云的html，这个滑动模块是基于web进行的。
所以还得要一个html文件
<!DOCTYPE html>
<html lang="en" type="text/javascript">
<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('button').click();">
<!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
<!--id : (不可变) 元素的 ID, 值必须是 'TencentCaptcha'-->
<!--data-appid : (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
<!--data-cbfn : (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
<!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
<button id="TencentCaptcha" data-appid="自己去腾讯云进行申请就会有了，这里就不提供" data-cbfn="callbackName"
data-biz-state="data-biz-state"
style="display:none"
type="button">验证
</button>
</body>
<script>
// 回调函数需要放在全局对象window下
window.callbackName = function (res) {
// 返回结果
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// CaptchaAppId String 验证码应用ID。
// bizState Any 自定义透传参数。
// randstr String 本次验证的随机串，请求后台接口时需带上。
console.log('callback:', res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
//if (res.ret === 0) {
// 获取票据、随机数并调用App端注入的方法传入票据、随机数，进行后台票据校验
var result = {bizState: res.bizState,randstr:res.randstr, ticket:res.ticket ,ret:res.ret};
window.jsBridge.getData(JSON.stringify(result));
//}
}
</script>
</html>