關(guān)于Blazor

由于在國(guó)內(nèi), Blazor一點(diǎn)都不普及, 在閱讀此文前, 建議讀者先翻看我之前寫(xiě)的隨筆, 了解Blazor Server Side的特點(diǎn).

在一段時(shí)間內(nèi), 我會(huì)寫(xiě)一些解說(shuō)分析型的 "為什么選擇 Blazor Server Side" , 在適當(dāng)?shù)臅r(shí)候再寫(xiě)快速入門(mén)系列.(無(wú)論是針對(duì)編程新學(xué)者還是多年經(jīng)驗(yàn)人士)

驗(yàn)證碼

我們很多場(chǎng)合都實(shí)現(xiàn)過(guò)圖片驗(yàn)證碼.

圖片驗(yàn)證碼的主要關(guān)鍵是呈現(xiàn)圖片, 需要一個(gè)URL, 而這個(gè)URL需要傳遞參數(shù)以確定顯示什么東西.

這個(gè)驗(yàn)證碼如何在服務(wù)器保存, 如何傳遞一個(gè)參數(shù)公開(kāi)給客戶端, 還不能讓別人解密這個(gè)參數(shù)破解驗(yàn)證碼, 都是麻煩事

這個(gè)例子是講述如何用極短的 "單頁(yè)" 代碼, 實(shí)現(xiàn)驗(yàn)證過(guò)程.

先上圖:

再上代碼:

@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());
 }

}

展現(xiàn)效果如下:

下面是解說(shuō)

整個(gè)代碼只有 60 行.

已經(jīng)包含了,展示界面, 生成圖片,傳遞和測(cè)試驗(yàn)證碼的各部分.

代碼先用隨機(jī)數(shù)確保生成 vericode = new Random().Next(100000, 999999).ToString();

然后根據(jù)vericode生成一個(gè)圖片, 轉(zhuǎn)換成base64格式到 imgurl 變量

最后通過(guò) <img style="border:solid 1px #ccc" src="@imgurl" /> 呈現(xiàn)出來(lái).

我上一篇隨筆有介紹,  Blazor是'活'的, 是在服務(wù)器上生存著的.

<button @onclick="MakeNewImage">Renew</button> 在服務(wù)器上有活動(dòng)的instance, 而在客戶端瀏覽器也有'鏡像副本'

當(dāng)瀏覽器的'鏡像副本'被用戶點(diǎn)擊后, Blazor就會(huì)把事件回傳給服務(wù)器, 觸發(fā)服務(wù)器還在運(yùn)行中的 MakeNewImage

MakeNewImage 會(huì)重新生成新的 vericode 與 imgurl , 并且按照Blazor默認(rèn)行為, 會(huì)自動(dòng)重新Render當(dāng)前控件的內(nèi)容,  所以 <img> 的 src 會(huì)被重新設(shè)置到新的imgurl , 展現(xiàn)新的圖片給用戶.

當(dāng)用戶在 <input type="text" @bind-value="inp_code" style="padding:5px" /> 輸入驗(yàn)證碼后,  Blazor會(huì)根據(jù)onchange事件, 把value發(fā)送到服務(wù)器, 根據(jù) @bind-value="inp_code" 這個(gè)配置, 把值保存到 inp_code 上.

當(dāng) <button>Check</button> 被按下后,  OnSubmit="DoCheck" 會(huì)觸發(fā),  那么 DoCheck() 的代碼, 便可以判斷 inp_code == vericode 是否相同.

這個(gè)過(guò)程中, 和其他框架做法的最大不同是, Blazor 保持了服務(wù)器代碼運(yùn)行的上下文, 因?yàn)樯舷挛谋槐３至? 所以就不需要額外的傳遞了.

這就是為什么要   選擇 Blazor Server Side  :  使用上下文來(lái)節(jié)省時(shí)間

最后:

如果把例子換成 發(fā)送短信/郵件驗(yàn)證碼 , 原理是一樣的. 都無(wú)需利用其他代碼或資源去儲(chǔ)存?zhèn)鬟f驗(yàn)證碼.

如果因任何原因, 頁(yè)面被刷新了, 那么這個(gè)內(nèi)存中的上下文就會(huì)釋放, 丟失, 驗(yàn)證碼也失效, 需要重發(fā)重試.

如果是通常注冊(cè)后的郵件激活URL , 這個(gè)就不合適了. 需要找外部?jī)?chǔ)存激活URL相關(guān)的數(shù)據(jù).

以上就是[Asp.Net Core]用Blazor Server Side實(shí)現(xiàn)圖片驗(yàn)證碼的詳細(xì)內(nèi)容，更多關(guān)于Blazor Server Side實(shí)現(xiàn)圖片驗(yàn)證碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論