我要评论关于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实现图片验证码的资料请关注移动技术网其它相关文章！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论