展示效果了：

腾讯云实现图像验证码着实比阿里云实现验证码容易。

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.detailif(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-captchaid="captcha"app-id="****"    //这里需要上腾讯云申请获取captchAppIdbindverify="handlerVerify"bindready="handlerReady"bindclose="handlerClose"binderror="handlerError" /><button bindtap='login'>登陆</button>
</view>

上腾讯云获取天宇验证码的captchAppId

上面PS解决方案

如果你未申请插件/找不到插件，你将以上的基础配置引入后会出现这么个问题：

然后你就直接点击添加或者详情追进去，就直接到了天御验证码第三方插件的页面了

点击添加【自行解决类目和主体问题】

到此基于腾讯云的三种图像验证码讲解完毕，觉得有用的可以给博主点个赞支持下

啊┏ (゜ω゜)=☞ 币币━━(￣ー￣*|||━━赞

调用腾讯云使用图像验证码相关推荐

大聪明教你学Java | 调用腾讯云短信接口，实现短信通知
前言提到短信接口,相信每一位程序猿都不会陌生,它可以来帮助我们实现短信验证码.短信通知等等功能,刚好最近在帮朋友开发一套会员管理系统,里面也集成了短信功能(短信接口平台选择的是腾讯云平台),借此机会 ...
笔记---腾讯云滑块验证码SDK的使用
腾讯云滑块验证码SDK(tencentcloud-sdk-captcha)的使用 1 代码引入 2 定义便于项目中使用的类 3 使用在rails(python.java.go等语言的代码示例可以在腾 ...
SpringBoot项目H5界面手机拍照调用腾讯云OCR卡证识别接口完整例子
最近一个微信端项目的功能涉及一个手机拍照上传身份证识别身份证信息回显的功能,调用的接口是腾讯云OCR的卡证识别功能.看了腾讯云的api通俗易懂,本地写好了demo测试可用.H5界面手机拍照调用后台方法 ...
C# 使用GET和POST（v1签名方式）以及SDK的方式调用腾讯云人像动漫化接口，包含设置代理
声明:此内容仅供学习交流使用,不用于商业用途,如果涉及侵权,联系作者删除. 最近在调用腾讯云的人像动漫化接口,感觉挺好玩的,自己去看文档写了一下,遇到了各种问题,最后都解决了 ,遇到最多的就是签名错误 ...
通用印刷体文字识别_谈谈调用腾讯云【OCR-通用印刷体识别】Api踩的坑
一.写在前面最近做项目需要用到识别图片中文字的功能,本来用的Tesseract这个写的,不过效果不是很理想. 随后上网搜了一下OCR接口,就准备使用腾讯云.百度的OCR接口试一下效果.不过这个腾讯云 ...
微信小程序云开发调用腾讯云AI 图像标签
本白菜在开发微信小程序调用腾讯云AI图像标签产品时,遇到了问题,自己琢磨了三天,搜遍了能搜的东西,还是没有解决.下边记录一下调用过程 1.首先进入https://cloud.tencent.com/ ...
Java调用腾讯云短信API实现发送短信验证码完整。（详细，内附工具类）
此先声明,本博文并不是为了推销腾讯云短信产品. 只是因为腾讯云短信SDK的使用指南讲的不是很详细,觉得肯定有很多人像我一样被搞的一头雾水.所以专门发一篇关于使用短信接口的博文,为了记录,也为了帮助和我 ...
详解-java调用腾讯云的短信接口（从申请到测试完成）
首先我们去注册或登录腾讯云可以白嫖200条短信(反正也是自己玩玩,足够了) 在产品那里找到短信进入之后,看应用列表里面有没有创建过(如果没有就创建)这里有一个SDKAppID会要用到创建之后呢, ...
【SpringBoot深入浅出系列】SpringBoot之调用腾讯云短信接口发送短信
目录一.开发前准备 1.创建签名 2.创建正文模板管理 3.创建应用 4.创建secretId和secretKey 二.开发 1.创建 Spring Initializr 项目 tengxunsms ...

调用腾讯云使用图像验证码