[Asp.Net Core]用Blazor Server Side实现图片验证码

 更新时间:2020-08-17 06:17:17   作者:佚名   我要评论(0)

关于Blazor
由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先翻看我之前写的随笔, 了解Blazor Server Side的特点.
在一段时间内, 我会写一些解说分析型的

关于Blazor

由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先翻看我之前写的随笔, 了解Blazor Server Side的特点.

在一段时间内, 我会写一些解说分析型的 "为什么选择 Blazor Server Side" , 在适当的时候再写快速入门系列.(无论是针对编程新学者还是多年经验人士)

验证码

我们很多场合都实现过图片验证码.

图片验证码的主要关键是呈现图片, 需要一个URL, 而这个URL需要传递参数以确定显示什么东西.

这个验证码如何在服务器保存, 如何传递一个参数公开给客户端, 还不能让别人解密这个参数破解验证码, 都是麻烦事

这个例子是讲述如何用极短的 "单页" 代码, 实现验证过程.

先上图:

再上代码:

@page "/BlazorVerificationCode"

<p>
 (Blazor) A sample for how to show verification code and verify it.
</p>

@inject IJSRuntime jsr

@{
 if (imgurl == null) MakeNewImage();
}

<img style="border:solid 1px #ccc" src="@imgurl" />
<button @onclick="MakeNewImage">Renew</button>
<hr />
<div>Type the number in image</div>
<EditForm Model="this" OnSubmit="DoCheck">
 <input type="text" @bind-value="inp_code" style="padding:5px" />
 <button>Check</button>
</EditForm>

@code{
 string inp_code;
 string vericode;
 string imgurl;

 void DoCheck()
 {
  string msg = "You typed a wrong value";
  if (inp_code == vericode)
   msg = "Yes the number is " + vericode;
  jsr.InvokeAsync<object>("alert", msg);
 }

 void MakeNewImage()
 {

  vericode = new Random().Next(100000, 999999).ToString();

  using SkiaSharp.SKBitmap bmp = new SkiaSharp.SKBitmap(200, 80);

  using (SkiaSharp.SKCanvas canvas = new SkiaSharp.SKCanvas(bmp))
  {
   canvas.Clear(SkiaSharp.SKColors.White);
   using SkiaSharp.SKPaint skp = new SkiaSharp.SKPaint();
   skp.Color = SkiaSharp.SKColors.Red;
   skp.TextSize = 40;
   canvas.DrawText(vericode, 30, 55, skp);
   canvas.Save();
  }

  using System.IO.MemoryStream ms = new System.IO.MemoryStream();
  using SkiaSharp.SKManagedWStream ws = new SkiaSharp.SKManagedWStream(ms);
  bmp.Encode(ws, SkiaSharp.SKEncodedImageFormat.Jpeg, 100);

  imgurl = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray());
 }

}

展现效果如下:

下面是解说

整个代码只有 60 行.

已经包含了,展示界面, 生成图片,传递和测试验证码的各部分.

代码先用随机数确保生成 vericode = new Random().Next(100000, 999999).ToString();

然后根据vericode生成一个图片, 转换成base64格式到 imgurl 变量

最后通过 <img style="border:solid 1px #ccc" src="@imgurl" /> 呈现出来.

我上一篇随笔有介绍,  Blazor是'活'的, 是在服务器上生存着的.

<button @onclick="MakeNewImage">Renew</button> 在服务器上有活动的instance, 而在客户端浏览器也有'镜像副本'

当浏览器的'镜像副本'被用户点击后, Blazor就会把事件回传给服务器, 触发服务器还在运行中的 MakeNewImage

MakeNewImage 会重新生成新的 vericode 与 imgurl , 并且按照Blazor默认行为, 会自动重新Render当前控件的内容,  所以 <img> 的 src 会被重新设置到新的imgurl , 展现新的图片给用户.

当用户在 <input type="text" @bind-value="inp_code" style="padding:5px" /> 输入验证码后,  Blazor会根据onchange事件, 把value发送到服务器, 根据 @bind-value="inp_code" 这个配置, 把值保存到 inp_code 上.

<button>Check</button> 被按下后,  OnSubmit="DoCheck" 会触发,  那么 DoCheck() 的代码, 便可以判断 inp_code == vericode 是否相同.

这个过程中, 和其他框架做法的最大不同是, Blazor 保持了服务器代码运行的上下文, 因为上下文被保持了, 所以就不需要额外的传递了.

这就是为什么要   选择 Blazor Server Side  :  使用上下文来节省时间

最后:

如果把例子换成 发送短信/邮件验证码 , 原理是一样的. 都无需利用其他代码或资源去储存传递验证码.

如果因任何原因, 页面被刷新了, 那么这个内存中的上下文就会释放, 丢失, 验证码也失效, 需要重发重试.

如果是通常注册后的邮件激活URL , 这个就不合适了. 需要找外部储存激活URL相关的数据.

以上就是[Asp.Net Core]用Blazor Server Side实现图片验证码的详细内容,更多关于Blazor Server Side实现图片验证码的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:

  • [Asp.Net Core] 浅谈Blazor Server Side

相关文章

  • [Asp.Net Core]用Blazor Server Side实现图片验证码

    [Asp.Net Core]用Blazor Server Side实现图片验证码

    关于Blazor 由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先翻看我之前写的随笔, 了解Blazor Server Side的特点. 在一段时间内, 我会写一些解说分析型的
    2020-08-17
  • 使用vs2019加.net core 对WeiApi的创建过程详解

    使用vs2019加.net core 对WeiApi的创建过程详解

    vs2019创建webapi 1.创建新的项目 2.选择.NET CORE的ASP .NET CORE WEB应用程序 3.定义项目名称和存放地点 4.选择API创建项目 5.删除原本的无用的类 6.添加新的
    2020-08-17
  • [Asp.Net Core]提高开发效率的方法

    [Asp.Net Core]提高开发效率的方法

    一、概述 在园子里面有很多关于各种技术细节的研究文章,都是比较牛逼的框架研究;但是一直没有看到关于怎么样提高开发效率的文章,大多提高开发效率的文章都是关
    2020-08-17
  • .Net Core + Nginx实现项目负载均衡的全步骤

    .Net Core + Nginx实现项目负载均衡的全步骤

    nginx大家如果没用过那或多或少都应该听过,vue的部署、反向代理、负载均衡nginx都能帮你做到。 今天主要说一下nginx负载均衡我们的项目,如下图所示,请求到达nginx
    2020-08-17
  • 详解ASP.NET Razor 语法

    详解ASP.NET Razor 语法

    Razor 同时支持 C# (C sharp) 和 VB (Visual Basic)。 主要的 Razor C# 语法规则 Razor 代码块包含在 @{ ... } 中 内联表达式(变量和函数)以 @ 开头 代码语
    2020-08-17
  • 详细分析ASP.NET Razor之C# 变量

    详细分析ASP.NET Razor之C# 变量

    变量 变量是用来存储数据的。 一个变量的名称必须以字母字符开头,并且不能包含空格或者保留字符。 一个变量可以是一个指定的类型,表示它所存储的数据类型。string
    2020-08-17
  • 浅谈AjaxPro.dll,asp.net 前台js调用后台方法

    浅谈AjaxPro.dll,asp.net 前台js调用后台方法

    1、什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写。"Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙
    2020-08-17
  • ASP.NET Core Authentication认证实现方法

    ASP.NET Core Authentication认证实现方法

    追本溯源,从使用开始     首先看一下我们通常是如何使用微软自带的认证,一般在Startup里面配置我们所需的依赖认证服务,这里通过JWT的认证方式讲解 public
    2020-08-17
  • .Net Core如何对MongoDB执行多条件查询

    .Net Core如何对MongoDB执行多条件查询

    以前项目基本上全部使用MySQL数据库, 最近项目排期空出了一点时间leader决定把日志模块迁移到插入/查询性能更好的MongoDB上. 多条件查询的写法着实费了些功夫, 撰文
    2020-08-17
  • ASP.NET Core中的响应压缩的实现

    ASP.NET Core中的响应压缩的实现

    介绍# 响应压缩技术是目前Web开发领域中比较常用的技术,在带宽资源受限的情况下,使用压缩技术是提升带宽负载的首选方案。我们熟悉的Web服务器,比如IIS、Tomca
    2020-08-17

最新评论