C#滑动拼图验证码实现笔记

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
前言

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>
  15. kg.captcha({
  16.     // 绑定显示区域
  17.     bind: "#captchaBox",
  19.     // 验证成功事务处理
  20.     success: function (e) {
  21.         console.log(e);
  22.         // 将验证成功后的 token 通过隐藏域传递到后端
  23.         kg.$("#kgCaptchaToken").value = e["token"];
  24.     },
  26.     // 验证失败事务处理
  27.     failure: function (e) {
  28.         console.log(e);
  29.     },
  31.     // 点击刷新按钮时触发
  32.     refresh: function (e) {
  33.         console.log(e);
  34.     }
  35. });
  36. // 检查表单提交
  37. function 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
  1. using System;
  2. using KgCaptchaSDK;
  4. public partial class _Default : System.Web.UI.Page{
  5.     protected void Page_Load(object sender, EventArgs e) {
  7.         // 后端处理
  8.         string html, appId, appSecret, Token;
  9.         if (Request.Form.ToString().Length > 0){  // 有数据处理
  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);
  20.             // 前端验证成功后颁发的 token，有效期为两分钟
  21.             request.token = Request.Form["kgCaptchaToken"];
  23.             // 填写应用服务域名，在应用管理中获取
  24.             request.appCdn = "https://cdn.kgcaptcha.com";
  26.             // 当安全策略中的防控等级为3时必须填写，一般情况下可以忽略
  27.             // 可以填写用户输入的登录帐号（如：$_POST["username"]），可拦截同一帐号多次尝试等行为
  28.             request.userId = "kgCaptchaDemo";
  30.             // 请求超时时间，秒
  31.             request.connectTimeout = 5;
  33.             // 发送验证请求
  34.             var requestResult = request.sendRequest();
  36.             if (requestResult.code == 0) {
  37.                 // 验签成功逻辑处理 ***
  39.                 // 这里做验证通过后的数据处理
  40.                 // 如登录/注册场景，这里通常查询数据库、校验密码、进行登录或注册等动作处理
  41.                 // 如短信场景，这里可以开始向用户发送短信等动作处理
  42.                 // ...
  44.                 html = "<script>alert('验证通过');history.back();</script>";
  45.             } else {
  46.                 // 验签失败逻辑处理
  47.                 html = "<script>alert(\"" + requestResult.msg + " - " + requestResult.code + "\");history.back();</script>";
  48.             }
  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/

【出处：响水网页制作公司 http://www.1234xp.com/xiangshui.html 复制请保留原URL】
更多阅读