關於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>

當瀏覽器的'映象副本'被使用者點選後,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實現圖片驗證碼的資料請關注我們其它相關文章！