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

2020-07-01 18:00:36丽君

我上一篇随笔有介绍,  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实现图片验证码的资料请关注易采站长站其它相关文章!