有关Blazor

因为在中国, Blazor一点也不普及化, 在阅读文章此篇前, 提议阅读者先翻阅我以前写的美文, 掌握Blazor Server Side的特性.

在一段时间内, 我会写一些讲解剖析型的 "为何挑选 Blazor Server Side" , 在适度的情况下再写快速入门系列产品.(不论是对于程序编写新学者還是很多年工作经验人士)

验证码

大家许多场所都完成过图片验证码.

图片验证码的关键关键是展现图片, 必须一个URL, 而这一URL必须传送参数以明确显示信息什么.

这一验证码怎样在网络服务器储存, 怎样传送一个参数公布给手机客户端, 还不可以让他人破译这一参数破译验证码, 全是烦心事

这一事例是叙述怎样用非常短的 "宣传单页" 编码, 完成认证全过程.

先图中:

[Asp.Net Core]用Blazor Server Side实现图片验证码 图片验证码 Side Server Blazor core asp.net ASP.NET  第1张

再上编码:

@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="https:@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());
 }

}

呈现实际效果以下:

[Asp.Net Core]用Blazor Server Side实现图片验证码 图片验证码 Side Server Blazor core asp.net ASP.NET  第2张

下边是讲解

全部编码仅有 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完成图片验证码的材料请关心其他类似文章!