Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Captchas 滑块验证码

通过拖动滑块进行人机识别

进行简单的人机识别

Demo
Captcha
Loading ...

通过 ImagesPath 设置图床路径,通过 ImagesName 设置图片名称,后台通过计算拼接随机图片全路径名称

Demo
Captcha
Loading ...

通过 GetImageName 设置自定义方法拼接随机图片全路径名称

Demo
Captcha
Loading ...

Attributes

Loading...

Event

Loading...

Methods

Loading...
@page "/captchas"

<h3>Captchas 滑块验证码</h3>

<h4>通过拖动滑块进行人机识别</h4>

<Block Title="基础功能" Introduction="进行简单的人机识别">
    <Captcha ImagesPath="@ImagesPath" @ref="Captcha" OnValid="@OnValid" />
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="指定图床路径与名称" Introduction="通过 <code>ImagesPath</code> 设置图床路径,通过 <code>ImagesName</code> 设置图片名称,后台通过计算拼接随机图片全路径名称">
    <Captcha ImagesPath="@ImagesPath" ImagesName="@ImagesName" />
</Block>

<Block Title="指定图床委托方法" Introduction="通过 <code>GetImageName</code> 设置自定义方法拼接随机图片全路径名称">
    <Captcha GetImageName="@GetImageName" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

<MethodTable Items="@GetMethods()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Captchas
    {
        /// <summary>
        /// 获得/设置 图床路径 默认值为 images
        /// </summary>
        public string ImagesPath { get; set; } = "_content/BootstrapBlazor.Shared/images";

        /// <summary>
        /// 获得/设置 图床路径 默认值为 Pic.jpg
        /// </summary>
        public string ImagesName { get; set; } = "Pic.jpg";

        /// <summary>
        /// 
        /// </summary>
        private Captcha? Captcha { get; set; }

        /// <summary>
        /// 
        /// </summary>
        private BlockLogger? Trace { get; set; }

        private void OnValid(bool ret)
        {
            var result = ret ? "成功" : "失败";
            Trace?.Log($"验证码结果 -> {result}");
            if (ret)
            {
                Task.Run(async () =>
                {
                    await Task.Delay(1000);
                    Captcha?.Reset();
                });
            }
        }

        private static Random ImageRandomer { get; set; } = new Random();

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private string GetImageName()
        {
            var index = Convert.ToInt32(ImageRandomer.Next(0, 8) / 1.0);
            var imageName = Path.GetFileNameWithoutExtension(ImagesName);
            var extendName = Path.GetExtension(ImagesName);
            var fileName = $"{imageName}{index}{extendName}";
            return Path.Combine(ImagesPath, fileName);
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ImagesPath",
                Description = "图床路径",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "images"
            },
            new AttributeItem() {
                Name = "ImagesName",
                Description = "滑块背景图文件名称",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "Pic.jpg"
            },
            new AttributeItem() {
                Name = "HeaderText",
                Description = "组件 Header 显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "请完成安全验证"
            },
            new AttributeItem() {
                Name = "BarText",
                Description = "拖动滑块显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "向右滑动填充拼图"
            },
            new AttributeItem() {
                Name = "FailedText",
                Description = "背景图加载失败显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "加载失败"
            },
            new AttributeItem() {
                Name = "LoadText",
                Description = "背景图加载时显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "正在加载 ..."
            },
            new AttributeItem() {
                Name = "TryText",
                Description = "拼图失败滑块显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "再试一次"
            },
            new AttributeItem() {
                Name = "Offset",
                Description = "拼图对齐偏移量",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "5"
            },
            new AttributeItem() {
                Name = "Width",
                Description = "拼图宽度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "280"
            },
            new AttributeItem() {
                Name = "Height",
                Description = "拼图高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "155"
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new[]
        {
            new EventItem()
            {
                Name = "OnValid",
                Description="滑块验证码进行验证结果判断后回调此方法",
                Type ="Action<bool>"
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<MethodItem> GetMethods() => new[]
        {
            new MethodItem()
            {
                Name = "GetImageName",
                Description="自定义获取背景图文件名称方法",
                Parameters =" — ",
                ReturnValue = "string"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload