使用腾讯验证码平台接入滑动验证,防止恶意、可疑用户登陆。接入地址,收费版可以享受更高级的接入,这里我是给自己的博客网站接入,所以免费的就完全够用了。
一. 首先去腾讯验证码平台注册账号,登陆后创建验证应用程序。
二. 创建之后点击到【快速接入】可以查看到appid和秘钥。
准备工作已完成,下面就是代码进行客户端接入和服务器接入了。
三.客户端接入:
客户端接入即前端引入html和js代码(非常简单)。
- 引入js文件,此处是引入外网js,也可以下载下来放到本地引用。
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
- 验证按钮(这个一般就是你的登陆按钮,按照腾讯固定格式)
<button type="button" class="pn" id="TencentCaptcha" data-appid="2096471113" data-cbfn="callback">进入后台系统</button>
注意:其中Id="TencentCaptcha"是固定值,data-appid 是你的应用程序appid
- 为了后台传值验证我这里加了2个隐藏的input用于存储回调的票据和随机字符串
<!--防水墙票据、字符串 begin-->
<input type="hidden" value="" name="ticket" id="ticket">
<input type="hidden" value="" name="randstr" id="randstr">
<!--防水墙票据、字符串 end-->
- 回调函数
<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>
至此客户端接入就已经完成了,现在就可以看到效果了:
客户端接入只是调起腾讯验证码平台,但是我们服务器端并没有对其进行验证,所以还需接入服务端把回执票据进行验证。
四. 服务端接入
发起GET请求将票据上传至服务器,校验验证码的票据,判断当次验证是否成功。
url:https://ssl.captcha.qq.com/ticket/verify,请求:get
参数 | 描述 |
aid (必填) | 2096471113 |
AppSecretKey (必填) | 0CB7wV-e7lJXDqYEdA1koXQ** |
Ticket (必填) | 验证码客户端验证回调的票据 |
Randstr (必填) | 验证码客户端验证回调的随机串 |
UserIP (必填) | 提交验证的用户的IP地址(eg: 10.127.10.2) |
- 后端代码示例(C#):
/// <summary>
/// 登录验证
/// </summary>
/// <param name="username">用户名</param>
/// <param name="password">密码</param>
/// <param name="verifycode">验证码</param>
/// <param name="autologin">下次自动登录</param>
/// <param name="ticket">客户端验证回调的票据</param>
/// <param name="randstr">客户端验证回调的随机串</param>
/// <returns></returns>
[HttpPost]
public ActionResult CheckLogin(string username, string password, string verifycode, int autologin,string ticket,string randstr)
{
AdminLoginBLL bll = new AdminLoginBLL();
try
{
//有了防水墙验证这个就可以不要了
#region 验证码验证
if (autologin == 0)
{
string oldcode = DESEncrypt.Decrypt(AdminCookieContext.getcookie());
if (verifycode != oldcode)
{
throw new Exception("验证码错误,请重新输入");
}
}
#endregion
#region 防水墙验证(Get请求)
string url = "https://ssl.captcha.qq.com/ticket/verify?";//请求地址
//参数
string aid = "********";//appid
string AppSecretKey = "0CB7wV-******dA1koXQ**";//App Secret Key
string UserIp = WebHelper.Ip;//提交验证的用户的IP地址
string parameters = string.Format("aid={0}&AppSecretKey={1}&Ticket={2}&Randstr={3}&UserIP={4}", aid, AppSecretKey, ticket, randstr, UserIp);
url = url + parameters;
//http get请求
string resulttoken = WebHelper.HttpWebRequest(url);
//验证结果
TencentCaptchaResultData tencentCaptcha = JsonHelper.DeserializeJsonToObject<TencentCaptchaResultData>(resulttoken);
//1:表示验证通过 0:失败
if (tencentCaptcha.response != 1)//失败则抛出异常,反之就进行后面的用户密码验证,判定是否等成功
{
throw new Exception("防水墙验证失败!");
}
#endregion
#region 内部账户验证
string pwd = DESEncrypt.Encrypt(MD5Util.GetMD5_32(password));
GetDataResult result = bll.CheckLogin(username, password);
if (result.Return_ID == 0)
{
return Success("登录成功。");
}
else
{
throw new Exception(result.Return_Mess);
}
#endregion
}
catch (Exception ex)
{
WebHelper.RemoveCookie("nineteam_autologin"); //清除自动登录
return Error(ex.Message);
}
}
TencentCaptchaResultData类是我对返回验证结果的封装:
到这服务器接入也完成了。是不是很快?高大上?主要是接入快!10分钟整一个登陆验证。