写在前面这里是常用验证码的第三篇——滑动/图形验证码。在前两篇已经实现了随机验证码和算术验证码，感兴趣的可以去看一下~ •常用验证码之字符串验证码•常用验证码之算术验证码 除了这两种常用的验证码之外，现在最经常用到的还有几种，比如滑动验证，图片验证等，这一类的验证码一般借助于第三方来处理即可。比如图形验证码： check_img.png 本篇纪录两种常用验证码的第三方调用方式： •滑动验证码•图形验证码 滑动验证码1. 示例check_slide.gif 2. 应用场景人机验证服务适用于登录、注册、活动、论坛、短信等高风险业务场景。 3. 实际意义通过对用户的行为数据、设备特征与网络数据构建多维度数据分析，使用业界先进的风控引擎结合“规则+AI”模型，对风险设备使用、模拟行为、暴力重放等攻击进行综合实时风控判决。 4. 使用流程•接入平台：阿里云 搜索引擎搜索打开阿里云官网，注册并登录。•搜索栏搜索关键词：验证码 然后在结果中点击进入【人机验证(验证码)】 check_step_1.png •点立即开通，即可获取自己的专属token,记录下即可在代码配置中会用得到•点击产品文档，各种配置在里面查看配置即可；•示例 代码语言：javascript复制
代码语言：javascript复制// 首先得先引入资源如下
// 配置即可
var nc_token = ["[自己的key值]", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
renderTo: "#checkId",
appkey: "[自己的key值]",
scene: "nc_login",
token: nc_token,
customWidth: 300,
trans:{"key1":"code0"},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
isEnabled: true,
timeout: 3000,
times:5,
callback: function (data) {
// 验证后续操作
window.console && console.log(nc_token)
window.console && console.log(data.csessionid)
window.console && console.log(data.sig)
}
}
var nc = new noCaptcha(NC_Opt)
// 在此处配置相关文案信息
nc.upLang('cn', {
_startTEXT: "请按住滑块，拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀，出错了，点击刷新再来一次",
_errorNetwork: "网络不给力，请点击刷新",
})•打开后如案例所示，完成~
check_slide.png
图形验证码1. 示例check_img.gif
2. 应用场景•注册登录•活动秒杀•点赞发帖•数据保护
3. 实际意义为网页、App、小程序开发者打造立体、全面的人机验证，最大程度地保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下的业务安全。
4. 使用流程•接入平台：腾讯云 搜索引擎搜索打开腾讯云官网，注册并登录。•搜索栏搜索关键词：验证码 然后在结果中点击进入【验证码】
check_step_2.png
•点立即选购（体验即可，无需付费）或者在线体验•点击产品文档，各种配置在里面查看配置即可；相比之下，腾讯云的基本使用方法则比阿里云简单的多，示例如下：•示例
代码语言：javascript复制
代码语言：javascript复制// 首先得先引入资源如下
// 基础使用
window.callback = function (res) {
// 添加自己相应配置即可
console.log(res)
if (res.ret === 0) {
alert(res.ticket) // 票据
}
}•完成~