故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

使用腾讯滑块验证码

10965人阅读 2020/1/8 16:15 总访问:3841806 评论:0 收藏:0 手机
分类: 随笔

使用腾讯防水墙接入滑动验证效果,防止恶意、可疑用户登陆

接入代码还是很简单

首先要去腾讯防水墙注册账号,登陆后创建验证 官方地址:https://007.qq.com

创建之后点击到【快速接入】可以查看到appid和秘钥:

嗯~准备工作已完成,下面就是代码进行客户端接入和服务器接入了

一、客户端接入:

    客户端接入即前端引入html和js代码(非常简单)

    1、引入js 

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

 2、验证按钮(这个一般就是你的登陆按钮,按照腾讯固定格式)

<button type="button" class="pn" id="TencentCaptcha" data-appid="你的data-appid" data-cbfn="callback">进入后台系统</button>

为了后台传值验证我这里加了2个隐藏的input用于存储回调的票据和随机字符串

<!--防水墙票据、字符串 begin-->
<input type="hidden" value="" name="ticket" id="ticket">
<input type="hidden" value="" name="randstr" id="randstr">
<!--防水墙票据、字符串 end-->

 3、回调函数

  <script>
        window.callback = function(res) {
            if (res.ret === 1) {//验证失败
                alert("未通过验证,请重新验证");
                return;
            }
            if (res.ret === 0) {//验证成功
                //这里就是给上面的2个标签赋值
                $('#ticket').attr('value', res.ticket);//回调的票据
                $('#randstr').attr('value', res.randstr);//回调的字符串
                PreventLogin();
            }
        }
    </script>

贴一个完整一点的代码:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>

    <script>

        window.callback = function (res) {
            if (res.ret === 1) {//验证失败
                alert("未通过验证,请重新验证");
                return;
            }
            if (res.ret === 0) {//验证成功
                //这里就是给上面的2个标签赋值
                $('#ticket').attr('value', res.ticket);//回调的票据
                $('#randstr').attr('value', res.randstr);//回调的字符串
                //提交表单
                $("#loginform").submit()               
            }
        }
    </script>

</head>
<body>

    <div align="center">
        <h1>tnblog统一认证登录中心</h1>
        <form method="post" id="loginform" action="/account/Login">
            <!--防水墙票据、字符串 begin-->
            <input type="hidden" value="" name="ticket" id="ticket">
            <input type="hidden" value="" name="randstr" id="randstr">
            <!--防水墙票据、字符串 end-->
            用户名:<input type="text" name="userName" /><br />
            密  码:<input type="password" name="password" />
            <input type="hidden" name="returnUrl" value="@ViewData["returnUrl"]" /> <br />
            <input type="button" id="TencentCaptcha" data-appid="你的data-appid" data-cbfn="callback" value="登录" />
        </form>
    </div>
</body>
</html>

至此客户端接入就已经完成了,现在就可以看到效果了(登录样式请忽略):


二、服务器接入:

    在验证完成后,客户端收到获得一个验证票据(ticket)。将票据上传至服务器,并发送GET请求到下方接口可以校验验证码的票据,判断当次验证是否成功。

    后台代码写在登陆之前:

    URL: https://ssl.captcha.qq.com/ticket/verify


字段名描述
aid (必填)2096*******
AppSecretKey (必填)0CB7wV-**********dA1koXQ**
Ticket (必填)验证码客户端验证回调的票据
Randstr (必填)验证码客户端验证回调的随机串
UserIP (必填)提交验证的用户的IP地址(eg: 10.127.10.2)


后台代码:

[HttpPost]
public async Task<IActionResult> Login(string userName, string password, string verifycode, string ticket, string randstr, string returnUrl = null)
{

    //验证腾讯的防水墙
    #region 防水墙验证(Get请求)
    string url = "https://ssl.captcha.qq.com/ticket/verify?";//请求地址
    //参数
    string aid = _aid;//你的appid
    string AppSecretKey = _AppSecretKey;//你的App Secret Key
    string UserIp = HttpContext.Connection.RemoteIpAddress.ToString();
    //获取id方法2
    //string UserIp =  HttpContext.Request.UserHostAddress
    string parameters = string.Format("aid={0}&AppSecretKey={1}&Ticket={2}&Randstr={3}&UserIP={4}", aid, AppSecretKey, ticket, randstr, UserIp);
    url = url + parameters;
    //http get请求
    HttpClient httpClient = new HttpClient();
    string resulttoken = await httpClient.GetAsync(url).Result.Content.ReadAsStringAsync();
    //验证结果
    TencentCaptchaResultData tencentCaptcha = JsonConvert.DeserializeObject<TencentCaptchaResultData>(resulttoken);
    //1:表示验证通过 0:失败
    if (tencentCaptcha.response != 1)//失败则抛出异常,反之就进行后面的用户密码验证,判定是否等成功
    {
        throw new Exception("防水墙验证失败!");
    }
    #endregion
    ViewData["returnUrl"] = returnUrl;

    #region 内部账户验证
    return Redirect(returnUrl);
    #endregion

}

TencentCaptchaResultData 就是一个方便反序列的实体而已:

public class TencentCaptchaResultData
    {
        public int response { get; set; }
        public string evil_level { get; set; }
        public string err_msg { get; set; }
    }



三、自发起验证

默认的方式是用的按钮的id等标识触发的验证,但是有些时候想要自己控制触发,而不是默认的这样

这样还可以灵活的控制触发验证的时间点,比如需要通过客户端的验证才去触发滑块验证等操作


先生成一个验证码对象

 // 直接生成一个验证码对象
        var captcha1 = new TencentCaptcha('你的appid', function (res) {
            if (res.ret === 1) {//验证失败
                alert("未通过验证,请重新验证");
                return;
            }
            if (res.ret === 0) {//验证成功
                //这里就是给上面的2个标签赋值
                $('#ticket').attr('value', res.ticket);//回调的票据
                $('#randstr').attr('value', res.randstr);//回调的字符串
                //js提交表单到后台(在这里指定提交方式和提交的页面)
                $("#LoginForm").attr("method", "post");
                $("#LoginForm").attr("action", "/Login/ExecLogin?" + '@ViewBag.pjurl').submit();
            }
        });

使用的时候直接 对象.show即可。可以创建多个对象也可以在任何时间节点使用更灵活

captcha1.show();//发起验证





欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价