前言
C# 是一个现代的、通用的、面向对象的编程语言，它是由微软(Microsoft)开发的，由 Ecma 和 ISO 核准认可的。突发奇想，动手开发一个C#滑动拼图验证码，下面是我开发过程的记录。
准备工作
本文使用IIS搭建环境，同时确保项目运行正常。
目录结构
核心代码
- noramal.html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>凯格行为验证码 - Net C# demo</title> 6<link rel="stylesheet" href="./style/demo.css" /> 7<!-- 8将以下域名替换成你的“应用服务器域名” 9将以下 appid 替换成你的 AppID 10服务器域名和appid在你的应用管理中获取 11示例：<script src="captcha.js?appid=xxx"></script> 12--> 13<script src="captcha.js?appid=appId"></script> 14<script> 15kg.captcha({ 16 // 绑定显示区域 17 bind: "#captchaBox", 18 19 // 验证成功事务处理 20 success: function (e) { 21 console.log(e); 22 // 将验证成功后的 token 通过隐藏域传递到后端 23 kg.$("#kgCaptchaToken").value = e["token"]; 24 }, 25 26 // 验证失败事务处理 27 failure: function (e) { 28 console.log(e); 29 }, 30 31 // 点击刷新按钮时触发 32 refresh: function (e) { 33 console.log(e); 34 } 35}); 36// 检查表单提交 37function check() { 38 if (kg.$("#kgCaptchaToken").value == "") { 39 alert("请完成图形验证后提交") 40 return false; 41 } else { 42 return true; 43 } 44} 45</script> 46</head> 47<body> 48 <form action="demo.aspx?cty=1" method="post" id="form" onsubmit="return check();"> 49 <!-- 将验证成功后的 token 通过隐藏域传递到后端 --> 50 <input type="hidden" name="kgCaptchaToken" id="kgCaptchaToken" value="" /> 51 <div class="inputForm"> 52 <input type="text" name="username" placeholder=" 例：填写登录帐号" /> 53 <br/> 54 <input type="password" name="password" placeholder=" 例：填写登录密码" /> 55 </div> 56 <!-- 绑定显示区域 --> 57 <div id="captchaBox"></div> 58 <input type="submit" value="提 交" class="btn" /> 59 </form> 60</body> 61</html>
- demo.aspx.cs
1using System; 2using KgCaptchaSDK; 3 4public partial class _Default : System.Web.UI.Page{ 5 protected void Page_Load(object sender, EventArgs e) { 6 7 // 后端处理 8 string html, appId, appSecret, Token; 9 if (Request.Form.ToString().Length > 0){ // 有数据处理 10 11 string cty = Request.QueryString["cty"]; 12 // 设置 AppId 及 AppSecret，在应用管理中获取 13 if (cty == "1"){ 14 appId = "appId"; 15 appSecret = "appSecret"; 16 } 17 // 填写你的 AppId 和 AppSecret，在应用管理中获取 18 var request = new kgCaptcha(appId, appSecret); 19 20 // 前端验证成功后颁发的 token，有效期为两分钟 21 request.token = Request.Form["kgCaptchaToken"]; 22 23 // 填写应用服务域名，在应用管理中获取 24 request.appCdn = "https://cdn.kgcaptcha.com"; 25 26 // 当安全策略中的防控等级为3时必须填写，一般情况下可以忽略 27 // 可以填写用户输入的登录帐号（如：$_POST["username"]），可拦截同一帐号多次尝试等行为 28 request.userId = "kgCaptchaDemo"; 29 30 // 请求超时时间，秒 31 request.connectTimeout = 5; 32 33 // 发送验证请求 34 var requestResult = request.sendRequest(); 35 36 if (requestResult.code == 0) { 37 // 验签成功逻辑处理 *** 38 39 // 这里做验证通过后的数据处理 40 // 如登录/注册场景，这里通常查询数据库、校验密码、进行登录或注册等动作处理 41 // 如短信场景，这里可以开始向用户发送短信等动作处理 42 // ... 43 44 html = "<script>alert('验证通过');history.back();</script>"; 45 } else { 46 // 验签失败逻辑处理 47 html = "<script>alert(\"" + requestResult.msg + " - " + requestResult.code + "\");history.back();</script>"; 48 } 49 50 // 输出结果 51 Response.Write(html); 52 } else { 53 Response.Redirect("index.html"); 54 } 55 } 56}
最后
SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/