常用验证码之滑动验证码|图形验证码

流眸

发布于 2020-07-06 08:57:11

22.2K00

代码可运行

文章被收录于专栏：前端技术分享|前沿资讯|读书分享前端技术分享|前沿资讯|读书分享

运行总次数：0

代码可运行

写在前面

这里是常用验证码的第三篇——滑动/图形验证码。在前两篇已经实现了随机验证码和算术验证码，感兴趣的可以去看一下~

•常用验证码之字符串验证码•常用验证码之算术验证码

除了这两种常用的验证码之外，现在最经常用到的还有几种，比如滑动验证，图片验证等，这一类的验证码一般借助于第三方来处理即可。比如图形验证码：

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)   // 票据
    }
}