C#滑动验证码拼图验证功能实现(SlideCaptcha)攻略

问题描述

在网站或移动应用等中，为了防止恶意攻击或机器人入侵，通常需要进行验证码验证。其中，滑动验证码拼图验证功能是一种常见的形式，用户需要按照要求把滑块拖动到正确的位置上，才能通过验证。

本文将介绍如何使用C#语言，结合ASP.NET Web应用程序，来实现滑动验证码拼图验证功能的开发。

解决方案

1.前端实现

首先，我们需要在前端页面中添加滑动验证码拼图验证所需要的HTML、CSS和Javascript代码。其中，下面是一个示例代码：

<div class="slide-captcha-container">
  <div class="slide-captcha-bg">
    <img src="images/background.jpg" />
  </div>
  <div class="slide-captcha-print">
    <img src="images/print.png" />
  </div>
  <div id="slide-block" class="slide-captcha-block"></div>
</div>

<script>
    $(document).ready(function() {
        var slider = new SliderUnlock("#slide-block");
        slider.init();
    });
</script>

上述代码中，我们首先在页面上添加了一个滑动验证码的容器slide-captcha-container，其中包含了一个背景图slide-captcha-bg和一个打印图案slide-captcha-print，以及一个滑块slide-block。接着，我们使用了Javascript插件SliderUnlock实现了滑块的拖动功能，并且通过$(document).ready事件，当文档准备好后自动初始化滑块功能。

以下是一段示例的CSS代码，用于实现页面的布局和样式：

.slide-captcha-container {
    position: relative;
    width: 330px;
    height: 200px;
}

.slide-captcha-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 330px;
    height: 200px;
    background-color: #f5f5f5;
}

.slide-captcha-print {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    margin-top: -65px;
    margin-left: -65px;
    z-index: 1;
}

.slide-captcha-block {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 25px;
    z-index: 2;
    cursor: pointer;
}

2.后端实现

接下来，我们需要在后端服务器中对滑动验证码拼图验证进行后台验证，以确保用户输入的验证码是否正确。

下面是一段基本的后端验证代码，用于对滑块的具体位置进行验证：

public bool CheckSlideCaptcha(int sliderX, int bgWidth, int printWidth) {
    float offset = 10; // 容差范围
    float err = Math.Abs((float)bgWidth * (float)sliderX / (float)printWidth - (float)sliderX);
    if (err < offset) {
        return true;
    } else {
        return false;
    }
}

上述代码中，我们首先传递了用户输入的滑块位置sliderX、背景图宽度bgWidth和打印图案宽度printWidth三个参数。然后，我们使用容差范围来判断滑块的位置是否正确，如果误差在限定范围内，则验证通过，否则验证失败。

3.完整示例

下面是一段完整的示例代码，用于展示如何将前端和后端代码结合起来，实现滑动验证码拼图验证的完整功能：

<!doctype html>
<html>
<head>
    <title>Slide Captcha验证示例</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .slide-captcha-container {
            position: relative;
            width: 330px;
            height: 200px;
        }

        .slide-captcha-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 330px;
            height: 200px;
            background-color: #f5f5f5;
        }

        .slide-captcha-print {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 130px;
            height: 130px;
            margin-top: -65px;
            margin-left: -65px;
            z-index: 1;
        }

        .slide-captcha-block {
            position: absolute;
            top: 50%;
            left: 0;
            width: 50px;
            height: 50px;
            margin-top: -25px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 25px;
            z-index: 2;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <br />
        <div class="row">
            <div class="col-md-6">
                <div class="slide-captcha-container">
                    <div class="slide-captcha-bg">
                        <img src="images/background.jpg" />
                    </div>
                    <div class="slide-captcha-print">
                        <img src="images/print.png" />
                    </div>
                    <div id="slide-block" class="slide-captcha-block"></div>
                </div>
            </div>
            <div class="col-md-6">
                <h3>请滑动图片验证</h3>
                <hr />
                <p>请将滑块移动到正确位置上</p>
                <br />
                <button id="check-btn" class="btn btn-primary">验证</button>
            </div>
        </div>
        <br />
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="slide-captcha.js"></script>
    <script>
        $(document).ready(function () {
            var slider = new SliderUnlock("#slide-block");
            slider.init();

            $("#check-btn").on("click", function () {
                var sliderX = parseInt($("#slide-block").css("left"));
                var bgWidth = $(".slide-captcha-bg img").width();
                var printWidth = $(".slide-captcha-print img").width();

                $.post("SlideCaptchaHandler.ashx", { sliderX: sliderX, bgWidth: bgWidth, printWidth: printWidth }, function (res) {
                    if (res === "true") {
                        alert("验证通过！");
                    } else {
                        alert("验证失败，请重新尝试！");
                        slider.reset();
                    }
                });
            });
        });
    </script>
</body>
</html>

同时，我们还需要在服务器端添加相对应的SlideCaptchaHandler.ashx文件，用于处理用户提交的滑块位置信息，下面是一段示例代码：

using System;
using System.Web;
using System.Web.SessionState;

public class SlideCaptchaHandler : IHttpHandler, IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        HttpRequest request = context.Request;
        HttpResponse response = context.Response;

        int sliderX = Convert.ToInt32(request.Form["sliderX"]);
        int bgWidth = Convert.ToInt32(request.Form["bgWidth"]);
        int printWidth = Convert.ToInt32(request.Form["printWidth"]);

        if (CheckSlideCaptcha(sliderX, bgWidth, printWidth))
        {
            response.Write("true");
            response.End();
        }
        else
        {
            response.Write("false");
            response.End();
        }
    }

    public bool IsReusable
    {
        get { return false; }
    }

    private bool CheckSlideCaptcha(int sliderX, int bgWidth, int printWidth)
    {
        float offset = 10; // 容差范围
        float err = Math.Abs((float)bgWidth * (float)sliderX / (float)printWidth - (float)sliderX);
        if (err < offset)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

总结

本文介绍了如何使用C#和ASP.NET Web应用程序来实现滑动验证码拼图验证功能的开发。我们首先在前端页面中添加了验证码的HTML、CSS和Javascript代码，然后通过Javascript插件实现滑块的拖动功能。最后，我们在后端服务器中对用户提交的验证码进行验证，确保验证码输入的正确性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：C#滑动验证码拼图验证功能实现(SlideCaptcha) - Python技术站

C#滑动验证码拼图验证功能实现(SlideCaptcha)