[Asp.Net Core]怎么用Blazor Server Side实现图片验证码功能
创始人
2024-11-27 10:41:39
0次

关于Blazor

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

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

验证码

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

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

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

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

先上图:

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

再上代码:

@page "/BlazorVerificationCode"

 (Blazor) A sample for how to show verification code and verify it.

@inject IJSRuntime jsr @{  if (imgurl == null) MakeNewImage(); } Renew
Type the number in image
    @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("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实现图片验证码功能

下面是解说

整个代码只有 60 行.

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

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

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

最后通过 呈现出来.

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

在服务器上有活动的instance, 而在客户端浏览器也有'镜像副本'

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

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

当用户在 输入验证码后,  Blazor会根据onchange事件, 把value发送到服务器, 根据 @bind-value="inp_code" 这个配置, 把值保存到 inp_code 上.

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

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

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

最后:

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

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

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

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...