验证码的重要性不言而喻，腾讯云 T-Sec 天御滑块验证码有其独特之处。其一，可准确验证用户身份，区分人类与自动化程序；其二，能有力增强安全性，阻挡恶意攻击与批量注册等行为；其三，给予相对便捷的验证途径，滑动即可完成；其四，具备一定趣味性，提升用户体验并减少抵触。

可腾讯云验证码官方收费着实有些高昂，对于我们这些资金有限（穷鬼）的人来说，那价格实在是让人望而却步，只能无奈地望其兴叹，仅仅是看看罢了。

好在今天看到一个不错的替代方法，功能和样式大同小异而且还免费。在这里分享给大家！

一、效果展示

二、实现过程

2.1新建前端框架

新建一个 index.html 文件

<!DOCTYPE html>
<html lang="zh">

<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>滑动验证码 刘郎阁</title>
<style>
body{margin:50px 0;text-align:center;font-family:PingFangSC-Regular,"Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif}
.btn{display:inline-block;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100px;height:40px;line-height:40px;font-size:16px;color:#666;cursor:pointer;background:#fff linear-gradient(180deg,#fff 0,#f3f3f3 100%)}
</style>
    <!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会影响程序的正常使用。 -->
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>

<body>
    <button id="TencentCaptcha" class="btn" type="button">验证</button>
</body>

<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var tcaptchaCallback = function(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（客户端出现异常错误 仍返回可用票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
    if (res.ret === 0) {
        $.ajax({
            type: "POST",
            dataType: "html",
            data: {ticket: res.ticket, randstr: res.randstr},
            url: "api.php",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert('服务器错误');
            }
        });
    }
}
$(document).ready(function(){
    var captcha1 = new TencentCaptcha('2046626881', tcaptchaCallback);
    $("#TencentCaptcha").click(function(){
        captcha1.show();
    })
})
</script>

</html>

2.2后端处理

新建一个api.php 文件，将以下 php 代码添加到其中：

此处内容已隐藏，请评论后刷新页面查看

三、使用方法

1.将以上两个新建好的文件放在同一个目录一下，上传到服务器(你需要使用的位置，如：评论验证、登录验证都可以)。

2.使用时根据自己的实际情况，对验证码返回的验证状态做判断，然后再跳转即可！

一、效果展示

二、实现过程

2.1新建前端框架

2.2后端处理

三、使用方法

登录

找回密码