本文档详细介绍了如何在Web端、Android端和微信小程序端接入腾讯云图像验证码。从购买资源包到获取必要的凭证，再到具体的代码实现，每个步骤都有清晰的说明。示例代码涵盖了JavaScript、Android WebView及微信小程序的实现方式，帮助开发者快速集成验证码功能。
展示效果了：
腾讯云实现图像验证码着实比阿里云实现验证码容易。
web端口的验证码:
详情可以从腾讯云平台文档接入
| 验证码 Web 客户端接入-接入指引-文档中心-腾讯云 (tencent.com) |
第一步：你需要购买腾讯云图像验证码的资源包<当然新手的话可以选择免费的500次进行实践>
登录腾讯云平台 登录 - 腾讯云 新建图形验证
注册后
获取CaptchaAppId
获取 AppSecretKey。
再到用户详情页面
获取API 密钥
获取该子账号的 SecretId
web端使用
<!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>
<button id="CaptchaId" type="button">验证</button>
</body>
<script>
// 定义回调函数
function callback(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"}
// res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
// 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
if (res.ret === 0) {
// 复制结果至剪切板
var str = '【randstr】->【' + res.randstr + '】 【ticket】->【' + res.ticket + '】';
var ipt = document.createElement('input');
ipt.value = str;
document.body.appendChild(ipt);
ipt.select();
document.execCommand("Copy");
document.body.removeChild(ipt);
alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。');
}
}
// 定义验证码js加载错误处理函数
function loadErrorCallback() {
var appid = ''
// 生成容灾票据或自行做其它处理
var ticket = 'terror_1001_' + appid + Math.floor(new Date().getTime() / 1000);
callback({
ret: 0,
randstr: '@'+ Math.random().toString(36).substr(2),
ticket,
errorCode: 1001,
errorMessage: 'jsload_error',
});
}
// 定义验证码触发事件
window.onload = function(){
document.getElementById('CaptchaId').onclick = function(){
try {
// 生成一个验证码对象
// CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
//callback：定义的回调函数
var captcha = new TencentCaptcha('你的验证码CaptchaAppId', callback, {});
// 调用方法，显示验证码
captcha.show();
} catch (error) {
// 加载异常，调用验证码js加载错误处理函数
loadErrorCallback();
}
}
}
</script>
</html>APP端使用
Android 接入详细步骤
- 在项目的工程中，新建一个 Activity 并导入 WebView 组件所需的包。
import android.webkit.WebView; import android.webkit.WebSettings; import android.webkit.WebViewClient; import android.webkit.WebChromeClient; - 添加相关权限，如开启网络访问权限以及允许 App 进行非 HTTPS 请求等。
<uses-permission android:name="android.permission.INTERNET"/> <application android:usesCleartextTraffic="true">...</application> - 在 Activity 的布局文件中，添加 WebView 组件。
<WebView android:id="@+id/webview" android:layout_height="match_parent" android:layout_width="match_parent" /> - 在项目的工程中，添加自定义 JavascriptInterface 文件，并定义一个方法用来获取相关数据。
import android.webkit.JavascriptInterface; public class JsBridge { @JavascriptInterface public void getData(String data) { System.out.println(data); } } - 在 Activity 文件中，加载相关 H5 业务页面。
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); 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")) webview.loadUrl("https://x.x.x/x/"); } }
微信小程序端接入
微信小程序没有实践过，链接在这里很详细，需要的可以实践下
验证码 微信小程序接入-接入指引-文档中心-腾讯云 (tencent.com)
展示效果
第一步：你需要去微信开放平台申请天御验证码第三方插件。
PS：如果添加插件这边搜索不到天御验证码插件你可以先看下去，本文后续会告诉你如何解决。
第二步：往app.json，项目js，项目json，项目wxml中添加相关代码
app.json:
"plugins": {
"myPlugin": {
"version": "1.0.4",
"provider": "wxb302e0fc8ab232b4"
}
},项目json:
"usingComponents": {
"t-captcha": "plugin://myPlugin/t-captcha"
}项目js:
login: function () {
this.selectComponent('#captcha').show()
// 进行业务逻辑，若出现错误需重置验证码，执行以下方法
// if (error) {
// this.selectComponent('#captcha').refresh()
// }
},
// 验证码验证结果回调
handlerVerify: function (ev) {
// 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
if(ev.detail.ret === 0) {
// 验证成功
console.log('ticket:', ev.detail.ticket)
} else {
// 验证失败
// 请不要在验证失败中调用refresh，验证码内部会进行相应处理
}
},
// 验证码准备就绪
handlerReady: function () {
console.log('验证码准备就绪')
},
// 验证码弹框准备关闭
handlerClose: function (ev) {
// 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗
if(ev && ev.detail.ret && ev.detail.ret === 2){
console.log('点击了关闭按钮，验证码弹框准备关闭');
} else {
console.log('验证完成，验证码弹框准备关闭');
}
},
// 验证码出错
handlerError: function (ev) {
console.log(ev.detail.errMsg)
},项目wxml:
<view>
<!-- app-id：验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 在验证码控制台页面内【图形验证】>【验证列表】进行查看 -->
<t-captcha
id="captcha"
app-id="****" //这里需要上腾讯云申请获取captchAppId
bindverify="handlerVerify"
bindready="handlerReady"
bindclose="handlerClose"
binderror="handlerError" />
<button bindtap='login'>登陆</button>
</view>上腾讯云获取天宇验证码的captchAppId
上面PS解决方案
如果你未申请插件/找不到插件，你将以上的基础配置引入后会出现这么个问题：
然后你就直接点击添加或者详情追进去，就直接到了天御验证码第三方插件的页面了
点击添加【自行解决类目和主体问题】
到此基于腾讯云的三种图像验证码讲解完毕，觉得有用的可以给博主点个赞支持下
啊┏ (゜ω゜)=☞ 币 币━━(￣ー￣*|||━━赞
扫一扫
1794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
