博客

.NET 6实现滑动验证码的示例详解

  • Post category:C#

以下是关于“.NET6实现滑动验证码的示例详解”的完整攻略：

1. 什么是滑动验证码？

滑动验证码是一种常见的验证码类型，它要求用户在一个滑块上滑动，证明他们是人类而不是机器。滑动验证码通常用于防止机器人攻击和滥用。

2. 实现动验证码

在.NET6中，可以使用一些技术来实现滑动验证码，例如：

  • ASP.NET Core MVC
  • JavaScript

下面我们将演示如何使用ASP.NET Core MVC和JavaScript来实现滑动验证码。

2.1. 示例 1：使用ASP.NET Core MVC实现滑动验证码

在这个示例中，我们将使用ASP.NET Core MVC来实现滑动验证码。可以按照以下步骤操作：

2.1.1. 创建ASP.NET Core MVC应用程序

首先，我们需要创建一个ASP.NET Core MVC应用程序。可以使用以下命令创建一个名为SlideCaptcha的应用程序：

dotnet new mvc -n SlideCaptcha

.1.2. 添加滑动验证码

接下来，我们需要添加滑动验证码。可以按照以下步骤操作：

  1. 在Views/Shared文件夹中创建一个名为_SlideCaptcha.cshtml的局部视图2. 在_SlideCaptcha.cshtml中添加以下代码：
<div class="slide-captcha">
    <div class="slide-captcha-bg"></div>
    <div class="slide-captcha-block"></div>
    <div class="slide-captcha-slider"></div>
</div>
  1. 在wwwroot/css/site.css中添加以下代码：
.slide-captcha {
    position: relative;
    width: 300px;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
}

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

.slide-captcha-block {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 50px;
    margin-top: -25px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 25px;
}

.slide-captcha-slider {
    position: absolute;
    top: 50%;
 left: 0;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background-color: #337ab7;
    border: 1px solid #2e6da4;
    border-radius:25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
  1. 在wwwroot/js/site.js中添加以下代码：
$(function () {
    var slider = $('.slide-captcha-slider');
    var block = $('.slide-captcha-block');
    var bg = $('.slide-captcha-bg');
    var success = false;
    var x = 0;

    slider.on('mousedown', function (e) {
        x = e.pageX - slider.offset().left;
        slider.addClass('active');
        block.addClass('active');
    });

    bg.on('mousemove', function (e) {
        if (slider.hasClass('active')) {
            var newX = e.pageX - x - bg.offset().left;
            var maxX = bg.width() - slider.width();

            if (newX < 0) {
                newX = 0;
            }

            if (newX > maxX) {
                newX = maxX;
                success = true;
            }

            slider.css('left', newX);
            block.css('left', newX);
        }
    });

    $(document).on('mouseup', function () {
        slider.removeClass('active');
        block.removeClass('active');

        if (success) {
            alert('验证通过！');
        } else {
            slider.animate({ left: 0 }, 200);
            block.animate({ left: 0 }, 200);
        }

        success = false;
    });
});

在上面的代码中，我们使用jQuery来实现滑动验证码。我们在_SlideCaptcha.cshtml中添加了一个包含背景、滑块和滑块块的容器。然后，我们在site.css中添加了样式，并在site.js中添加了JavaScript代码来实现滑动验证码。

2.1.3. 添加滑动验证码到视图

最后，我们需要将滑动验证码添加到视图中。可以按照以下步骤操作：

  1. 在视图中添加以下代码：
<div class="form-group">
    <label asp-for="Captcha"></label>
   div class="col-md-10">
        <partial name="_SlideCaptcha" />
    </div>
</div>

在上面的代码中，我们使用partial标记将滑动验证码添加到视图中。

2.2. 示例2：使用JavaScript实现滑动验证码

在这个示例中，我们将使用JavaScript来实现滑动验证码。可以按照以下步骤操作：

2.2.1. 创建HTML文件

首先，我们需要创建一个HTML文件。可以按照以下步骤操作：

  1. 创建一个名为index.html的文件。

  2. 在index.html中添加以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Slide Captcha</title>
    <style>
        .slide-captcha {
            position: relative;
            width: 300px;
            height: 150px;
            margin: 0 auto;
            overflow: hidden;
        }

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

        .slide-captcha-block {
            position: absolute;
            top: 50%;
            left: 10%;
            width: 80%;
            height: 50px;
            margin-top: -25px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 25px;
        }

        .slide-captcha-slider {
            position: absolute;
            top: 50%;
            left: 0;
            width: 50px;
            height: 50px;
            margin-top: -25px;
            background-color: #337ab7;
            border: 1px solid #2e6da4;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="slide-captcha">
        <div class="slide-captcha-bg"></div>
        <div class="slide-captcha-block"></div>
        <div class="slide-captcha-slider"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            var slider = $('.slide-captcha-slider');
            var block = $('.slide-captcha-block');
            var bg = $('.slide-captcha-bg');
            var success = false;
            var x = 0;

            slider.on('mousedown', function (e) {
                x = e.pageX - slider.offset().left;
                slider.addClass('active');
                block.addClass('active');
            });

            bg.on('mousemove', function (e) {
                if (slider.hasClass('active')) {
                    var newX = e.pageX - x - bg.offset().left;
                    var maxX = bg.width() - slider.width();

                    if (newX < 0) {
                        newX = 0;
                    }

                    if (newX > maxX) {
                        newX = maxX;
                        success = true;
                    }

                    slider.css('left', newX);
                    block.css('left', newX);
                }
            });

            $(document).on('mouseup', function () {
                slider.removeClass('active');
                block.removeClass('active');

                if (success) {
                    alert('验证通过！');
                } else {
                    slider.animate({ left: 0 }, 200);
                    block.animate({ left: 0 }, 200);
                }

                success = false;
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们使用jQuery来实现滑动验证码。我们在HTML中添加了一个包含背景、滑块和滑块块的器。然后，我们在<script>标记中添加了JavaScript代码来实现滑动验证码。

3. 结论

通过以上步骤，我们可以使用ASP.NET Core MVC和JavaScript来实现滑动验证码。滑动验证码是一种常见的验证码类型，它要求用户在一个滑块上滑动，以证明他们是人类不是机器。滑动验证码通常用于防止机器人攻击和滥用。在实现滑动验证码时，我们可以使用ASP.NET Core MVC和JavaScript来实现。

Tags: