关于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.<p style="color:transparent">本文来源gao!%daima.com搞$代*!码$网3</p>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 , 展现新的图片给用户.
转载请注明原文链接：[Asp.Net Core]用Blazor Server Side实现图片验证码
