欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[Asp.Net Core] 为什么选择 Blazor Server Side (一) 快速实现图片验证码

程序员文章站 2022-12-02 20:55:32
Blazor的哪个特点, 可以让程序员快速完成任务?这随笔讲解的是使用代码上下文来节约代码, 让验证码机制变得更加简易. ......

关于blazor

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

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

 

验证码

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

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

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

 

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

先上图:

[Asp.Net Core] 为什么选择 Blazor Server Side (一) 快速实现图片验证码

再上代码:

 1 @page "/blazorverificationcode"
 2 
 3 <p>
 4     (blazor) a sample for how to show verification code and verify it.
 5 </p>
 6 
 7 @inject ijsruntime jsr
 8 
 9 @{
10     if (imgurl == null) makenewimage();
11 }
12 
13 <img style="border:solid 1px #ccc" src="@imgurl" />
14 <button @onclick="makenewimage">renew</button>
15 <hr />
16 <div>type the number in image</div>
17 <editform model="this" onsubmit="docheck">
18     <input type="text" @bind-value="inp_code" style="padding:5px" />
19     <button>check</button>
20 </editform>
21 
22 @code{
23     string inp_code;
24     string vericode;
25     string imgurl;
26 
27     void docheck()
28     {
29         string msg = "you typed a wrong value";
30         if (inp_code == vericode)
31             msg = "yes the number is " + vericode;
32         jsr.invokeasync<object>("alert", msg);
33     }
34 
35     void makenewimage()
36     {
37 
38         vericode = new random().next(100000, 999999).tostring();
39 
40         using skiasharp.skbitmap bmp = new skiasharp.skbitmap(200, 80);
41 
42         using (skiasharp.skcanvas canvas = new skiasharp.skcanvas(bmp))
43         {
44             canvas.clear(skiasharp.skcolors.white);
45             using skiasharp.skpaint skp = new skiasharp.skpaint();
46             skp.color = skiasharp.skcolors.red;
47             skp.textsize = 40;
48             canvas.drawtext(vericode, 30, 55, skp);
49             canvas.save();
50         }
51 
52         using system.io.memorystream ms = new system.io.memorystream();
53         using skiasharp.skmanagedwstream ws = new skiasharp.skmanagedwstream(ms);
54         bmp.encode(ws, skiasharp.skencodedimageformat.jpeg, 100);
55 
56         imgurl = "data:image/jpeg;base64," + convert.tobase64string(ms.toarray());
57     }
58 
59 }

 

展现效果如下:

[Asp.Net Core] 为什么选择 Blazor Server Side (一) 快速实现图片验证码

 

 


 

 

下面是解说

整个代码只有 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 (一)   :  使用上下文来节省时间