当前位置：移动技术网 > IT编程>开发语言>.net > [开源]快速构建验证码

[开源]快速构建验证码

2019年04月05日 | 移动技术网IT编程 | 我要评论

听是谁在唱歌吉他谱,婚期txt,傻妻撩人

使用说明

支持webform以及asp.net mvc构建验证码

项目源码：masterchief.dotnet.infrastructure.verifycode

nuget：install-package masterchief.dotnet.infrastructure.verifycode

欢迎star，欢迎pr；

如何使用

自定义验证码样式，只需要实现validatecodetype抽象类即可

/// <summary>
 ///     图片验证码抽象类
 /// </summary>
 public abstract class validatecodetype
 {
     #region methods

     /// <summary>
     ///     创建验证码抽象方法
     /// </summary>
     /// <param name="validatacode">验证code</param>
     /// <returns>byte数组</returns>
     public abstract byte[] createimage(out string validatacode);

     #endregion methods

     #region constructors

     #endregion constructors

     #region properties

     /// <summary>
     ///     验证码类型名称
     /// </summary>
     public abstract string name { get; }

     /// <summary>
     ///     验证码tooltip
     /// </summary>
     public virtual string tip => "请输入图片中的字符";

     /// <summary>
     ///     类型名称
     /// </summary>
     public string type => gettype().name;

     #endregion properties
 }

在webform使用说明

新建一般处理程序

/// <summary>
///     webformverifycodehandler 的摘要说明
/// </summary>
public class webformverifycodehandler : verifycodehandler, ihttphandler, irequiressessionstate
{
    public void processrequest(httpcontext context)
    {
        var validatetype = context.request.params["style"];
        var buffer = createvalidatecode(validatetype);
        context.response.clearcontent();
        context.response.contenttype = mimetypes.imagegif;
        context.response.binarywrite(buffer);
    }

    public bool isreusable => false;

    public override void onvalidatecodecreated(httpcontext context, string validatecode)
    {
        context.session["validatecode"] = validatecode;
    }

    public override byte[] createvalidatecode(string style)
    {
        style = style?.trim();
        validatecodetype createcode;
        switch (style)
        {
            case "type1":
                createcode = new validatecode_style1();
                break;

            default:
                createcode = new validatecode_style1();
                break;
        }

        var buffer = createcode.createimage(out var validatecode);
        onvalidatecodecreated(httpcontext.current, validatecode);
        return buffer;
    }
}

前端页面调用

<body>
    <form runat="server">
    <div class="row">
        <div class="col-md-8">
            <section id="loginform">
                <div class="form-horizontal">
                    <h4>use a local account to log in.</h4>
                    <hr />
                    <asp:placeholder runat="server" id="errormessage" visible="false">
                        <p class="text-danger">
                            <asp:literal runat="server" id="failuretext" />
                        </p>
                    </asp:placeholder>
                    <div class="form-group">
                        <asp:label runat="server" associatedcontrolid="email" cssclass="col-md-2 control-label">email</asp:label>
                        <div class="col-md-10">
                            <asp:textbox runat="server" id="email" cssclass="form-control" textmode="email" />
                            <asp:requiredfieldvalidator runat="server" controltovalidate="email"
                                cssclass="text-danger" errormessage="the email field is required." />
                        </div>
                    </div>
                    <div class="form-group">
                        <asp:label runat="server" associatedcontrolid="password" cssclass="col-md-2 control-label">password</asp:label>
                        <div class="col-md-10">
                            <asp:textbox runat="server" id="password" textmode="password" cssclass="form-control" />
                            <asp:requiredfieldvalidator runat="server" controltovalidate="password" cssclass="text-danger" errormessage="the password field is required." />
                        </div>
                    </div>
                    <div class="form-group">
                        <%--  <asp:image id="image1" runat="server" cssclass="col-md-2 control-label" imageurl="backhandler/webformverifycodehandler.ashx" />--%>
                        <img alt="看不清，换一张" class="col-md-2 control-label" src="backhandler/webformverifycodehandler.ashx" onclick="this.src = 'backhandler/webformverifycodehandler.ashx?style=type1&ver=' + math.random()" />
                        <div class="col-md-10">
                            <asp:textbox runat="server" id="verifycode" cssclass="form-control" />
                            <asp:requiredfieldvalidator runat="server" controltovalidate="verifycode" cssclass="text-danger" errormessage="the verifycode field is required." />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <div class="checkbox">
                                <asp:checkbox runat="server" id="rememberme" />
                                <asp:label runat="server" associatedcontrolid="rememberme">remember me?</asp:label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <asp:button runat="server" text="log in" cssclass="btn btn-default" onclick="login_click" />
                        </div>
                    </div>
                </div>
                <p>
                    <asp:hyperlink runat="server" id="registerhyperlink" viewstatemode="disabled">register as a new user</asp:hyperlink>
                </p>
                <p>
                    <%-- enable this once you have account confirmation enabled for password reset functionality --%>
                    <asp:hyperlink runat="server" id="forgotpasswordhyperlink" viewstatemode="disabled">forgot your password?</asp:hyperlink>
                </p>
            </section>
        </div>

        <div class="col-md-4">
        </div>
    </div>
    </form>
</body>

后端页面使用

protected void login_click(object sender, eventargs e)
{
    if (isvalid)
    {
        var verifycode = verifycode.text.trim();
        if (string.compare(session["validatecode"].tostring(), verifycode,
                stringcomparison.ordinalignorecase) != 0)
        {
            failuretext.text = "验证码验证不通过.";
            errormessage.visible = true;
        }
        else
        {
            response.redirect("default.aspx");
        }
    }
}

运行效果

在asp.net mvc使用说明

新建mvcverifycodehandler，并实现抽象类verifycodehandler

/// <summary>
  ///     处理生成mvc 程序验证码
  /// </summary>
  public sealed class mvcverifycodehandler : verifycodehandler
  {
      public override void onvalidatecodecreated(httpcontext context, string validatecode)
      {
          context.session["validatecode"] = validatecode;
      }

      public override byte[] createvalidatecode(string style)
      {
          validatecodetype createcode;
          switch (style)
          {
              case "type1":
                  createcode = new validatecode_style1();
                  break;
              default:
                  createcode = new validatecode_style1();
                  break;
          }

          var buffer = createcode.createimage(out var validatecode);
          onvalidatecodecreated(httpcontext.current, validatecode);
          return buffer;
      }
  }

在controller处理验证码生成

/// <summary>
///     生成验证码
/// </summary>
/// <param name="style">验证码样式</param>
/// <returns>actionresult</returns>
[allowanonymous]
public actionresult createverifycode(string style)
{
    verifycodehandler verifycodehandler = new mvcverifycodehandler();
    var buffer = verifycodehandler.createvalidatecode(style);
    return file(buffer, mimetypes.imagegif);
}

前端页面调用

@model masterchief.infrastructure.mvcsample.models.loginviewmodel
@{
    viewbag.title = "login";
}

<h2>@viewbag.title.</h2>
<div class="row">
    <div class=" col-md-8">

        <section id="loginform">
            @using (html.beginform("login", "account", new { viewbag.returnurl }, formmethod.post, new { @class = "form-horizontal", role = "form" }))
            {
                @html.antiforgerytoken()
                <h4>use a local account to log in.</h4>
                <hr />
                @html.validationsummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @html.labelfor(m => m.email, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @html.textboxfor(m => m.email, new { @class = "form-control" })
                        @html.validationmessagefor(m => m.email, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @html.labelfor(m => m.password, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @html.passwordfor(m => m.password, new { @class = "form-control" })
                        @html.validationmessagefor(m => m.password, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <img id="valicode" style="cursor: pointer;" class="col-md-2 control-label" src="~/account/createverifycode" alt="验证码" />
                    <div class="col-md-10">
                        @html.textboxfor(m => m.verifycode, new { @class = "form-control" })
                        @html.validationmessagefor(m => m.verifycode, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <div class="checkbox">
                            @html.checkboxfor(m => m.rememberme)
                            @html.labelfor(m => m.rememberme)
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="log in" class="btn btn-default" />
                    </div>
                </div>
            }
        </section>
    </div>
    <div class="col-md-4">
        @*<section id="socialloginform">
                @html.partial("_externalloginslistpartial", new externalloginlistviewmodel {returnurl = viewbag.returnurl})
            </section>*@
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#valicode").bind("click", function () {
                this.src = "createverifycode?style=type1&time=" + (new date()).gettime();
            });
        });
    </script>
}

后端代码使用

[httppost]
[allowanonymous]
[validateantiforgerytoken]
public actionresult login(loginviewmodel model, string returnurl)
{
    if (!modelstate.isvalid) return view(model);
    if (string.compare(session["validatecode"].tostring(), model.verifycode,
            stringcomparison.ordinalignorecase) != 0)
        modelstate.addmodelerror("verifycode", "验证码验证不通过.");
    else
        return redirecttoaction("index", "home");

    return view();
}

运行效果

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端

距离上次提出 [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件的想法后,&#... [阅读全文]
武装你的WEBAPI-OData入门

本文属于OData系列目录（可能会有后续修改） "武装你的WEBAPI OData入门" 武装你的WEBAPI OData便捷查询武装你的WEBAP... [阅读全文]
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)

依赖倒置原则(DIP) 依赖倒置(Dependency Inversion Principle,缩写DIP)是面向对象六大基本原则之一。他是指一种特定的... [阅读全文]
DevExpress+Winform（四）

视频：https://www.bilibili.com/video/BV15x411x7WN?p=5 新建Devexpress Winform Blan... [阅读全文]
Jenkins之Nunit的应用

一、在Jenkins中安装Nunit插件进入jenkins的插件管理模块，下载Nunit插件。此步骤不做截图说明二、引用nunit.console的nu... [阅读全文]
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布

框架介绍这是一个基于vue、element-ui、iview、.netcore3.1 可支持前端、后台动态扩展业务代码快速开发框架。框架内置定制开发... [阅读全文]
微信退款（在.net core 用http方式请求）

微信JSAPI支付申请退款接口地址接口链接：https://api.mch.weixin.qq.com/secapi/pay/refund 是否需... [阅读全文]
Owin Katana 的底层源码分析

最近看了一下开源项目asp.net katana，感觉公开的接口非常的简洁优雅，channel 9 说是受到node.js的启发设计的，Katana是一... [阅读全文]
jenkins发布application且并运行

一、发布配置差异配置：编译内容编译目标NetWorkClient/KJ90NetClient.csproj编译命令/t:build/p:Configur... [阅读全文]
WPF 简易日期控件魔改ListBox

先上截图修正：应该将SetTime方法修改为，行号为207行开始修改 var nk = Day_of_week(year, month, 1); i... [阅读全文]

网友评论


验证码：

[开源]快速构建验证码

2019年04月05日 | 移动技术网IT编程 | 我要评论

如何使用

您可能感兴趣的文章:

相关文章:

网友评论