常用验证码之滑动验证码|图形验证码
常用验证码之滑动验证码|图形验证码
写在前面
这里是常用验证码的第三篇——滑动/图形验证码。在前两篇已经实现了随机验证码和算术验证码，感兴趣的可以去看一下~
•常用验证码之字符串验证码•常用验证码之算术验证码
除了这两种常用的验证码之外，现在最经常用到的还有几种，比如滑动验证，图片验证等，这一类的验证码一般借助于第三方来处理即可。比如图形验证码：
check_img.png
本篇纪录两种常用验证码的第三方调用方式：
•滑动验证码•图形验证码
滑动验证码
1. 示例
check_slide.gif
2. 应用场景
人机验证服务适用于登录、注册、活动、论坛、短信等高风险业务场景。
3. 实际意义
通过对用户的行为数据、设备特征与网络数据构建多维度数据分析，使用业界先进的风控引擎结合“规则+AI”模型，对风险设备使用、模拟行为、暴力重放等攻击进行综合实时风控判决。
4. 使用流程
•接入平台：阿里云 搜索引擎搜索打开阿里云官网，注册并登录。•搜索栏搜索关键词：验证码 然后在结果中点击进入【人机验证(验证码)】
check_step_1.png
•点立即开通，即可获取自己的专属token,记录下即可在代码配置中会用得到•点击产品文档，各种配置在里面查看配置即可；•示例
<div id="checkId" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->// 首先得先引入资源如下
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
// 配置即可
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: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
_errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
})•打开后如案例所示，完成~
check_slide.png
图形验证码
1. 示例
check_img.gif
2. 应用场景
•注册登录•活动秒杀•点赞发帖•数据保护
3. 实际意义
为网页、App、小程序开发者打造立体、全面的人机验证，最大程度地保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下的业务安全。
4. 使用流程
•接入平台：腾讯云 搜索引擎搜索打开腾讯云官网，注册并登录。•搜索栏搜索关键词：验证码 然后在结果中点击进入【验证码】
check_step_2.png
•点立即选购（体验即可，无需付费）或者在线体验•点击产品文档，各种配置在里面查看配置即可；相比之下，腾讯云的基本使用方法则比阿里云简单的多，示例如下：•示例
<button id="TencentCaptcha" data-appid="2041127177" data-cbfn="callback" type="button">验证</button>// 首先得先引入资源如下
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
// 基础使用
window.callback = function (res) {
// 添加自己相应配置即可
console.log(res)
if (res.ret === 0) {
alert(res.ticket) // 票据
}
}•完成~