C# 滑動驗證碼|拼圖驗證|SlideCaptcha

CoolDog;發表於2022-04-21

使用背景：

　　關於滑動驗證碼的使用場所還是非常多的，如： 調取簡訊介面之前，和註冊請求之前或者頻繁會呼叫的介面 都需要加這個拼圖驗證。這裡先上一下效果圖吧（心中無碼，自然高清）。

　　話不多說，開擼！

實現分析：

　　滑動驗證碼的邏輯也很簡單。大概說一下：

　　1，伺服器生成主圖+附圖（從主圖裁剪下來的不需要管y座標）並且儲存X座標；

　　2，前端傳入本地X座標到伺服器。

　　3，伺服器進行計算儲存X座標和本地X座標相差值；

　　4，驗證相差值是否在 0-2 之間，判斷 true | false

後端程式碼：

　　　　　　準備：

　　　　　　　　增加SlideCaptcha資料夾，並且增加Captcha.cs CaptchaModel.cs Config.cs ImgFormat.cs 4個檔案。分別是：驗證，驗證實體，配置和圖片生成類。程式碼如下：

Captcha.cs 　　　　　　

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Net;


namespace SliderCaptcha.NET
{
    public class Captcha
    {

        public static Captcha64Model GenerateBase64()
        {
            CaptchaModel model = Captcha.Generate();
            if (model != null)
            {
                return new Captcha64Model()
                {
                    X = model.X,
                    Y = model.Y,
                    Background = ImageToBase64(model.Background,ImageFormat.Jpeg),
                    Slide = ImageToBase64(model.Slide, ImageFormat.Png)
                };
            }
            else
            {
                return null;
            }
        }

        /// <summary>
        /// 生成驗證碼
        /// </summary>
        /// <returns></returns>
        public static CaptchaModel Generate()
        {
            Bitmap image = BgImage();
            if (image != null)
            {
                int l = Config.l;
                int d = Config.d;
                int width = image.Width;
                int height = image.Height;
                int x = RandomNext(width / 3, width - d - l - 10);//初始x
                int y = RandomNext(10 + d, height - l - 10); ;//初始y
                GraphicsPath path = GetSliderPath(x, y);
                Graphics g = GetGraphics(image);

                //水印
                if (Config.showWatermark)
                {
                    Font font = new Font("宋體", 12, FontStyle.Bold);
                    SizeF size = g.MeasureString(Config.watermarkText, font);
                    Point Plogo = new Point((int)(width - size.Width - 5), (int)(height - size.Height - 5));
                    Color color = image.GetPixel(Plogo.X, Plogo.Y);
                    SolidBrush bru = new SolidBrush(AntiColor(color));
                    g.DrawString(Config.watermarkText, font, bru, Plogo);
                }

                Pen pen = new Pen(Color.FromArgb(200, 255, 255, 255), 2);
                g.DrawPath(pen, path);
                Image slider = CaptureSlider(image, path, x, width, height);
                SolidBrush brush = new SolidBrush(Color.FromArgb(100, 255, 255, 255));
                g.FillPath(brush, path);
                g.Save();
                g.Dispose();
                return new CaptchaModel()
                {
                    X = x,
                    Y = y,
                    Background = image,
                    Slide = slider
                };
            }
            return null;
        }




        /// <summary>
        /// 獲取圖片Graphics
        /// </summary>
        /// <param name="image"></param>
        /// <returns></returns>
        private static Graphics GetGraphics(Image image)
        {
            Graphics g = Graphics.FromImage(image);
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.CompositingQuality = CompositingQuality.HighQuality;
            g.InterpolationMode = InterpolationMode.High;
            return g;
        }

        /// <summary>
        /// 獲取滑塊path
        /// </summary>
        private static GraphicsPath GetSliderPath(int x, int y)
        {
            int l = Config.l;
            int r = Config.r;
            int b = Config.b;
            int c = Config.c;
            int d = Config.d;
            int blod = Config.blod;
            GraphicsPath path = new GraphicsPath(FillMode.Winding);
            Point Pa = new Point(x, y);
            Point Pb = new Point(x + l / 2 - b, y - c + blod);
            Point Pd = new Point(x + l, y);
            Point Pe = new Point(Pd.X + c - blod, y + l / 2 - b);
            Point Pg = new Point(Pd.X, y + l);
            Point Ph = new Point(x, y + l);
            Point Pj = new Point(x + c - blod, Pe.Y);
            path.AddLine(Pa, Pb);
            path.AddArc(x + l / 2 - r, y - d, d, d, 130f, 280f);
            path.AddLines(new Point[] { Pd, Pe });
            path.AddArc(x + l, y + l / 2 - r, d, d, 220f, 280f);
            path.AddLines(new Point[] { Pg, Ph });
            path.AddArc(x, y + l / 2 - r, d, d, 140f, -280f);
            path.AddLine(Pj, Pa);
            return path;
        }


        /// <summary>
        /// 獲取滑塊區域
        /// </summary>
        /// <param name="image"></param>
        /// <param name="path"></param>
        /// <param name="x"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        private static Image CaptureSlider(Image image, GraphicsPath path, int x, int width, int height)
        {
            Bitmap concave = new Bitmap(image.Width, image.Height);
            Graphics g = GetGraphics(concave);
            TextureBrush brush = new TextureBrush(image);
            g.Clear(Color.Transparent);
            g.FillPath(brush, path);
            g.Dispose();
            return CaptureImage(concave, x, height);
        }


        /// <summary>
        /// 裁剪圖片
        /// </summary>
        /// <param name="fromImage"></param>
        /// <param name="offsetX"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        private static Image CaptureImage(Image fromImage, int offsetX, int height)
        {
            int width = Config.l + Config.d + Config.blod;
            Bitmap bitmap = new Bitmap(width, height);
            Graphics g = GetGraphics(bitmap);
            g.DrawImage(fromImage, 0, 0, new Rectangle(offsetX, 0, width, height), GraphicsUnit.Pixel);
            g.Dispose();
            return bitmap;
        }


        /// <summary>
        /// 生成隨機數
        /// </summary>
        /// <param name="min"></param>
        /// <param name="max"></param>
        /// <returns></returns>
        private static int RandomNext(int min, int max)
        {
            Random random = new Random(Guid.NewGuid().GetHashCode());
            return random.Next(min, max);
        }


        /// <summary>
        /// 取反色
        /// </summary>
        /// <param name="color"></param>
        /// <returns></returns>
        public static Color AntiColor(Color color)
        {
            if (color.R > 128 && color.G > 128 && color.B > 128)
            {
                return Color.Black;
            }
            else
            {
                return Color.White;
            }

        }

        /// <summary>
        /// 獲取背景圖
        /// </summary>
        /// <returns></returns>
        private static Bitmap BgImage()
        {
            WebClient web = new WebClient();
            int num = RandomNext(1, 20);
            Stream stream = web.OpenRead($"http://00x1.com/images/Pic/{num}.jpg");
            Bitmap bitmap = (Bitmap)Image.FromStream(stream);
            return bitmap;
        }



        /// <summary>
        /// base64轉圖片
        /// </summary>
        /// <param name="base64string"></param>
        /// <returns></returns>
        public static Bitmap Base64ToImage(string base64string)
        {
            byte[] b = Convert.FromBase64String(base64string);
            MemoryStream ms = new MemoryStream(b);
            Bitmap bitmap = new Bitmap(ms);
            return bitmap;
        }

        /// <summary>
        /// 圖片轉base64
        /// </summary>
        /// <param name="image"></param>
        /// <returns></returns>
        public static string ImageToBase64(Image image, ImageFormat format)
        {
            if (image == null) return string.Empty;
            string strbaser64 = "";
            try
            {
                string head = "";
                string formatName = ImgFormat.NameFromGuid(format);
                head = $"data:image/{formatName.ToLower()};base64,";
                MemoryStream ms = new MemoryStream();
                image.Save(ms, format);
                byte[] arr = new byte[ms.Length];
                ms.Position = 0;
                ms.Read(arr, 0, (int)ms.Length);
                ms.Close();
                strbaser64 = head+Convert.ToBase64String(arr);
            }
            catch (Exception)
            {
                throw new Exception("Something wrong during convert!");
            }
            return strbaser64;
        }
        
    }

}

CaptchaModel.cs　　　　　

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;

namespace SliderCaptcha.NET
{
    public class CaptchaModel
    {
        public int X { get; set; }
        public int Y { get; set; }
        public Image Background { get; set; }
        public Image Slide { get; set; }
    }
    public class Captcha64Model
    {
        public int X { get; set; }
        public int Y { get; set; }
        public string Background { get; set; }
        public string Slide { get; set; }
    }
}

Config.cs

using System;

namespace SliderCaptcha.NET
{
    public class Config
    {
        /// <summary>
        /// 矩形寬
        /// </summary>
        public static int l = 42;
        /// <summary>
        /// 圓形半徑
        /// </summary>
        public static int r = 9;
        /// <summary>
        /// 圓形直徑
        /// </summary>
        public static int d = r * 2;
        /// <summary>
        /// 計算圓形與矩形交接三角形邊
        /// </summary>
        public static int a = (int)(r * Math.Sin(Math.PI * (50 / 180f)));
        public static int b = (int)(r * Math.Cos(Math.PI * (50 / 180f)));
        public static int c = r - a;
        /// <summary>
        /// 滑塊邊框
        /// </summary>
        public static int blod = 2;
        /// <summary>
        /// 水印
        /// </summary>
        public static string watermarkText = "SC.NET";
        /// <summary>
        /// 是否顯示水印
        /// </summary>
        public static bool showWatermark = true;

    }
}

ImgFormat.cs

using System;
using System.Collections.Generic;
using System.Drawing.Imaging;

namespace SliderCaptcha.NET
{
    public class ImgFormat
    {

        private static Dictionary<string, string> Formats = new Dictionary<string, string>() {
                            {"b96b3caa-0728-11d3-9d7b-0000f81ef32e","MemoryBmp"},
                            {"b96b3cab-0728-11d3-9d7b-0000f81ef32e","Bmp"},
                            {"b96b3cac-0728-11d3-9d7b-0000f81ef32e","Emf"},
                            {"b96b3cad-0728-11d3-9d7b-0000f81ef32e","Wmf"},
                            {"b96b3cae-0728-11d3-9d7b-0000f81ef32e","Jpeg"},
                            {"b96b3caf-0728-11d3-9d7b-0000f81ef32e","Png"},
                            {"b96b3cb0-0728-11d3-9d7b-0000f81ef32e","Gif"},
                            {"b96b3cb1-0728-11d3-9d7b-0000f81ef32e","Tiff"},
                            {"b96b3cb2-0728-11d3-9d7b-0000f81ef32e","Exif"},
                            {"b96b3cb5-0728-11d3-9d7b-0000f81ef32e","Icon"}
        };

        public static ImageFormat FormatFromGuid(ImageFormat format)
        {
            return FormatFromGuid(format.Guid);
        }
        public static ImageFormat FormatFromGuid(Guid guid)
        {
            return FormatFromGuid(guid.ToString());
        }
        public static ImageFormat FormatFromGuid(string guid)
        {
            if (Formats.ContainsKey(guid))
            {
                string name = Formats[guid];
                ImageFormat format = null;
                switch (name)
                {
                    case "MemoryBmp":
                        format = ImageFormat.MemoryBmp;
                        break;
                    case "Bmp":
                        format = ImageFormat.Bmp;
                        break;
                    case "Emf":
                        format = ImageFormat.Emf;
                        break;
                    case "Wmf":
                        format = ImageFormat.Wmf;
                        break;
                    case "Gif":
                        format = ImageFormat.Gif;
                        break;
                    case "Jpeg":
                        format = ImageFormat.Jpeg;
                        break;
                    case "Png":
                        format = ImageFormat.Png;
                        break;
                    case "Tiff":
                        format = ImageFormat.Tiff;
                        break;
                    case "Exif":
                        format = ImageFormat.Exif;
                        break;
                    case "Icon":
                        format = ImageFormat.Icon;
                        break;
                }
                return format;
            }
            else
            {
                return null;
            }
            
        }



        public static string NameFromGuid(ImageFormat format)
        {
            return NameFromGuid(format.Guid);
        }
        public static string NameFromGuid(Guid guid)
        {
            return NameFromGuid(guid.ToString());
        }
        public static string NameFromGuid(string guid)
        {
            if (Formats.ContainsKey(guid))
            {
                return Formats[guid];
            }
            else
            {
                return string.Empty;
            }

        }

    }
}

　　　　　　使用：

　　　　　　　　這裡用的是asp.net mvc 的框架，用的是api介面，前後端分離供前端使用。具體使用根據個人需求，可以是介面呼叫亦可以是專案呼叫。

　　　　　　　　呼聲如果很高的話，考慮出一個winfrom版本的滑動驗證碼~（滑稽）

        [HttpGet]
        public IHttpActionResult GetCaptcha()
        {
            Captcha64Model model = Captcha.GenerateBase64();
            CacheHelper.Cache.SetCache("sliderX", model.X);
            Hashtable ht = new Hashtable();
            ht.Add("background", model.Background);
            ht.Add("slider", model.Slide);
            ht.Add("sliderXXXXX", model.X);
            return Json(ht);
        }

        /// <summary>
        /// 檢查驗證
        /// </summary>
        /// <param name="x"></param>
        /// <returns></returns>
        [HttpPost]
        public IHttpActionResult CheckCaptcha([FromBody] int x = 0)
        {
            Hashtable hs = new Hashtable();
            string Mess = "";
            int Code = 0;
            var session = CacheHelper.Cache.GetCache("sliderX");
            if (session == null)
            {
                Mess = "請重新整理驗證碼";
                Code = 500;
                goto block;
            }
            string sliderXStr = session?.ToString();// as string
            int sliderX = Convert.ToInt32(sliderXStr);
            int difX = sliderX - x;
            if (difX >= 0 - Config.blod && difX <= Config.blod)
            {
                Mess = "success";
                Code = 0;
            }
            else
            {
                session = null;
                Mess = "錯誤";
                Code = 500;
            }
        block:
            hs.Add("Mess", Mess);
            hs.Add("Code", Code);
            return Json(hs);
        }

前端程式碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Splide Captcha</title>
    <style>
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .sc-captcha {
            width: 300px;
            margin: 100px auto;
        }

        .sc_net_panel {
            padding: 10px;
        }

            .sc_net_panel > div {
                position: relative;
            }

        .bg_slider {
            position: absolute;
            left: 0;
            top: 0;
        }

        .bg_refresh {
            position: absolute;
            right: 5px;
            top: 5px;
            background: #808080;
            color: #fff;
            border-radius: 3px;
            width: 16px;
            line-height: 16px;
            text-align: center;
            cursor: pointer;
        }

        .sc_net_slider_icon {
            position: absolute;
            left: 0;
            top: 0;
            height: 37px;
            text-align: center;
            border-radius: 5px;
            border: #808080 1px solid;
            width: 37px;
            line-height: 37px;
            cursor: pointer;
        }

            .sc_net_slider_icon:hover {
                color: #fff;
                background: #1991fa;
            }

        .sc_net_slider_text {
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            width: 280px;
            color: #45494c;
            border: #808080 1px solid;
            border-radius: 5px;
            line-height: 35px;
            height: 37px;
            cursor: default;
        }

        .sc_net_slider_area {
            position: absolute;
            left: 0;
            top: 0;
            height: 37px;
        }
    </style>
    <script src="E:\porject\碚煜Api\ByzkApi\Scripts\jquery-3.4.1.js"></script>
    <script src="E:\porject\碚煜Api\ByzkApi\Scripts\jquery-3.4.1.min.js"></script>

</head>
<body>
    <div>
        <div class="sc-captcha">
            <div class="sc_net_panel">
                <div class="sc_net_bg">
                    <div class="sc_net_bgimg">
                    </div>
                    <div class="bg_refresh" onclick="loadCaptcha()" title="重新整理">↻</div>
                </div>
            </div>
            <div class="sc_net_panel">
                <div class="sc_net_slider">
                    <div class="sc_net_slider_text">向右拖動滑塊填充拼圖</div>
                    <div class="sc_net_slider_area"></div>
                    <div class="sc_net_slider_icon">➞</div>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
    loadCaptcha();
    function loadCaptcha() {
        $.ajax({
            url: "http://192.168.1.216:5500/api/TestApi/GetCaptcha",
            type: "Get",
            dataType: "JSON",
            success: function (json) {
                var bg = createCanvas(280, 155);
                bg.className = 'bg_img';
                bg_slider = createCanvas(62, 155);
                bg_slider.className = 'bg_slider';
                CanvasSetImage(bg, json.background);
                CanvasSetImage(bg_slider, json.slider);
                var doc = document.getElementsByClassName("sc_net_bgimg")[0];
                doc.innerHTML = "";
                doc.appendChild(bg);
                doc.appendChild(bg_slider);

                console.log(json.modelX);
            }
        })
    }

    function createCanvas(width, height) {
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        return canvas;
    };


    function CanvasSetImage(_canvas, base64) {

        //獲取2d畫布物件
        var ctx = _canvas.getContext("2d");
        //建立圖片標籤
        var _img = document.createElement("img");
        //設定圖片地址
        _img.src = base64;

        //ctx.fillRect(0, 0, _canvas.clientWidth, _canvas.clientHeight);
        //ctx.fillStyle = 'rgba(255, 255, 255, 0)';
        _img.onload = function () {
            ctx.drawImage(_img, 0, 0);
        }
        /*           ctx.drawImage(_img, 10, 10);*/
    }

    function getByClassName0(className) {
        return document.getElementsByClassName(className)[0];
    };

    var slider = getByClassName0("sc_net_slider_icon");
    var text = getByClassName0("sc_net_slider_text");
    var area = getByClassName0("sc_net_slider_area");
    var bg_slider;

    slider.addEventListener('mousedown', handleDragStart);
    slider.addEventListener('touchstart', handleDragStart);
    document.addEventListener('mousemove', handleDragMove);
    document.addEventListener('touchmove', handleDragMove);
    document.addEventListener('mouseup', handleDragEnd);
    document.addEventListener('touchend', handleDragEnd);
    document.addEventListener('mousedown', function () { return false; });
    document.addEventListener('touchstart', function () { return false; });

    var originX, originY, trail = [],
        isMouseDown = false;

    var isOk = false;

    function handleDragStart(e) {
        console.log("handleDragStart");
        if (isOk) return;
        originX = e.clientX || e.touches[0].clientX;
        originY = e.clientY || e.touches[0].clientY;
        isMouseDown = true;
    };

    function handleDragMove(e) {
        if (!isMouseDown) return false;
        var eventX = e.clientX || e.touches[0].clientX;
        var eventY = e.clientY || e.touches[0].clientY;
        var moveX = eventX - originX;
        var moveY = eventY - originY;
        if (moveX >= 0 && moveX <= 243) {
            slider.style.left = moveX + "px";
            bg_slider.style.left = moveX / 243 * 218 + "px";
        }

    };

    function handleDragEnd(e) {
        if (!isMouseDown)
            return false
        isMouseDown = false
        var eventX = e.clientX || e.changedTouches[0].clientX
        if (eventX == originX)
            return false

        //獲取前端的x座標；
        var a = $(".bg_slider");
        var localX = a[0].offsetLeft;


        $.ajax({
            url: "http://192.168.1.216:5500/api/TestApi/CheckCaptcha?x=" + localX,
            type: "Post",
            dataType: "JSON",
            success: function (res) {
                alert(res.Mess);
            }
        })
    };
</script>
</html>

結語：

　　　　到這裡基本上就已經完成了，以上前端地址更換成自己的介面即可。正常業務驗證碼是很頻發的一個操作並且是多使用者。所以快取儲存的時候也需要注意一下。最後有問題的話，可以評論區溝通。感謝觀看！（這次很用心在寫，能否上個推薦~）

C#滑動拼圖驗證碼實現筆記
2023-05-06
C#筆記
【記錄】KgCaptcha滑動拼圖驗證碼
2023-04-20
GCAPT
滑動拼圖驗證碼水印Logo修改
2023-04-21
Go
Vue.js 滑動拼圖驗證碼實現筆記
2023-03-31
Vue.js筆記
基於Nuxt.js實現滑動拼圖驗證碼
2023-05-08
UXJS
滑動驗證碼實踐
2017-12-13
鴻蒙第三方元件——SwipeCaptcha滑動拼圖驗證元件
2021-03-12
鴻蒙元件APT
C#圖片驗證碼
2010-05-24
C#
簡單幾步實現滑動驗證碼（後端驗證）
2022-04-04
後端
直播商城原始碼，驗證方式之一，滑塊驗證
2022-01-28
原始碼
小程式接入滑動驗證
2020-05-26
canvas實現滑動驗證
2016-12-07
Canvas
【驗證碼逆向專欄】某驗“初代”滑塊驗證碼逆向分析
2023-02-03
利用puppeteer破解極驗的滑動驗證
2018-02-23
行為式驗證碼家族再添一員網易易盾推出推理拼圖驗證碼
2019-11-26
【驗證碼逆向專欄】某驗三代滑塊驗證碼逆向分析
2022-12-23
【驗證碼逆向專欄】某驗四代滑塊驗證碼逆向分析
2023-01-05
聊天平臺原始碼，登入時拼圖驗證
2021-11-01
原始碼
爬蟲模擬登入破解無原圖滑動驗證碼
2019-06-19
爬蟲
震驚! 滑動驗證碼竟然能這樣破解
2018-07-12
使用 Chapel 實現滑動驗證碼識別
2024-11-16
驗證碼原理及驗證
2020-06-21
使用 Turing 破解滑塊驗證碼
2024-11-13
C#驗證身份證號
2009-02-27
C#
圖片驗證碼 Captcha
2018-11-21
APT
圖片驗證碼介面
2020-11-03
[外掛擴充套件]PC手機端和嵌入式滑動拼圖驗證碼外掛三種效果
2020-04-04
套件
使用 Seed7 實現滑動驗證碼識別
2024-11-19
使用 ActionScript 實現簡單滑動驗證碼識別
2024-11-19
C# 常用驗證
2018-03-26
C#
c#驗證照片
2009-11-06
C#
一對一原始碼，滑塊驗證，滑塊左右滑動顯示的位置
2022-03-14
原始碼
短視訊直播原始碼，拖動滑塊實現圖片驗證效果
2022-06-01
原始碼
驗證碼---js重新整理驗證碼
2020-04-07
JS
對極驗geetest滑塊驗證碼圖片還原演算法的研究
2022-01-14
演算法
JavaScript驗證碼生成和驗證效果
2018-05-21
JavaScript
Flutter 生成圖形驗證碼
2020-07-23
Flutter
golang 生成圖片驗證碼
2020-05-21
Golang

C# 滑動驗證碼|拼圖驗證|SlideCaptcha

使用背景：

後端程式碼：

準備：

使用：

前端程式碼：

結語：

相關文章

　　　　　　準備：

　　　　　　使用：