[Asp.Net Core] 為什麼選擇 Blazor Server Side (一) 快速實現圖片驗證碼

来源:https://www.cnblogs.com/zhgangxuan/archive/2020/04/06/asp_net_core_blazor_server_side_002_01.html

Blazor的哪個特點, 可以讓程式員快速完成任務? 這隨筆講解的是使用代碼上下文來節約代碼, 讓驗證碼機制變得更加簡易. ...


關於Blazor

由於在國內, Blazor一點都不普及, 在閱讀此文前, 建議讀者先翻看我之前寫的隨筆, 瞭解Blazor Server Side的特點. 

在一段時間內, 我會寫一些解說分析型的 "為什麼選擇 Blazor Server Side" , 在適當的時候再寫快速入門系列.(無論是針對編程新學者還是多年經驗人士)

 

驗證碼

我們很多場合都實現過圖片驗證碼. 

圖片驗證碼的主要關鍵是呈現圖片, 需要一個URL, 而這個URL需要傳遞參數以確定顯示什麼東西. 

這個驗證碼如何在伺服器保存, 如何傳遞一個參數公開給客戶端, 還不能讓別人解密這個參數破解驗證碼, 都是麻煩事

 

這個例子是講述如何用極短的 "單頁" 代碼, 實現驗證過程. 

先上圖:

再上代碼:

 1 @page "/BlazorVerificationCode"
 2 
 3 <p>
 4     (Blazor) A sample for how to show verification code and verify it.
 5 </p>
 6 
 7 @inject IJSRuntime jsr
 8 
 9 @{
10     if (imgurl == null) MakeNewImage();
11 }
12 
13 <img style="border:solid 1px #ccc" src="@imgurl" />
14 <button @onclick="MakeNewImage">Renew</button>
15 <hr />
16 <div>Type the number in image</div>
17 <EditForm Model="this" OnSubmit="DoCheck">
18     <input type="text" @bind-value="inp_code" style="padding:5px" />
19     <button>Check</button>
20 </EditForm>
21 
22 @code{
23     string inp_code;
24     string vericode;
25     string imgurl;
26 
27     void DoCheck()
28     {
29         string msg = "You typed a wrong value";
30         if (inp_code == vericode)
31             msg = "Yes the number is " + vericode;
32         jsr.InvokeAsync<object>("alert", msg);
33     }
34 
35     void MakeNewImage()
36     {
37 
38         vericode = new Random().Next(100000, 999999).ToString();
39 
40         using SkiaSharp.SKBitmap bmp = new SkiaSharp.SKBitmap(200, 80);
41 
42         using (SkiaSharp.SKCanvas canvas = new SkiaSharp.SKCanvas(bmp))
43         {
44             canvas.Clear(SkiaSharp.SKColors.White);
45             using SkiaSharp.SKPaint skp = new SkiaSharp.SKPaint();
46             skp.Color = SkiaSharp.SKColors.Red;
47             skp.TextSize = 40;
48             canvas.DrawText(vericode, 30, 55, skp);
49             canvas.Save();
50         }
51 
52         using System.IO.MemoryStream ms = new System.IO.MemoryStream();
53         using SkiaSharp.SKManagedWStream ws = new SkiaSharp.SKManagedWStream(ms);
54         bmp.Encode(ws, SkiaSharp.SKEncodedImageFormat.Jpeg, 100);
55 
56         imgurl = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray());
57     }
58 
59 }

 

展現效果如下:

 

 


 

 

下麵是解說

整個代碼只有 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相關的數據. 

 


您的分享是我們最大的動力!

更多相關文章
  • 參考 ABP設計UI菜單欄的源碼分析,抽出了ABP這塊自定義擴展的實現。在ABP的源碼裡面有很多地方都用到了這種設計方式,實現了用戶自定義擴展。 新建一個空的asp.net core項目,新建一個類,源碼: StartUp類源碼: 擴展點:在 中提供用戶自定義擴展點,完美的是下瞭解耦。 參考: "B ...
  • 這篇文章中,我將帶領大家一起詳細學習:ASP.NET Core Middleware Components.這篇文章中,我將詳細討論下麵幾個問題:什麼是ASP.NET Core 中的中間件組件?ASP.NET Core應用程式中,在哪裡來使用中間件組件?怎樣來配置ASP.NET Core 應用程式中... ...
  • 在這篇文章中,我將詳細介紹在ASP.NET Core中使用appsettings.json文件的重要性。這篇文章,我將詳細介紹下麵幾個問題:在ASP.NET Core應用程式中,有哪些不同的配置資源可用呢?什麼是ASP.NET Core appsetting.json文件?在ASP.NET Core ...
  • 在進行 Asp.NetCore.MVC 文件上傳時,後臺無法正常讀取文件流保存,出現:Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead. 查找資料,發現需要 ...
  • 首先以Winform項目開發舉例 1.完整的學習計劃 2.對於學習內容分類 3.良好的學習習慣 4.項目實踐 學習計劃 1.基礎篇 2.提高篇 3.應用篇 內容分類 1.語法 2.控制項 3.業務邏輯 學習習慣 1.時間安排 2.進度安排 3.記錄筆記 4.練習寫代碼 項目實踐 1.實現頁面展示 2. ...
  • [TOC] 都是迭代,為啥我一定要用foreach ​ 問題起源於本人的一個練手的撲克牌程式:洗完牌之後要發給場上的三人。 ​ 只發給單個人的時候用 foreach 迴圈一下就好了,但三個人就有點麻煩了。 ​ 牌組用list保存你可能會想到這樣寫: 對於字典,可以使用 : 可能各位早會這樣弄了,讓各 ...
  • 這篇文章,我將帶領大家學習ASP.NET Core中的launchSettings.json文件。為了學習它,我們打開之前建的空白模板的ASP.NET Core項目。 從上面的圖片中你可以看到,我們項目的屬性中有一個launchSettings.json文件。那麼我們來一起學習這個重要的文件吧。la... ...
  • 在C#中,struct和class都是用戶定義的數據類型,struct和class有許多不同之處,但主要的區別是: Class是引用類型,它保存在堆上並且能夠被垃圾回收;然而stuct是值類型,它保存在棧上或者內嵌在它的包含類型之中。因此,從總體上來說struct比class節省記憶體。 下圖是Cla ...
一周排行
  • 文章篇幅較長,閱讀完大概20min,建議收藏閱讀, 讀完會有收穫。歡迎點贊關註 原文鏈接:https://www.softwaretestinghelp.com/types-of-software-testing/ 有多少軟體測試類型呢? 我們作為測試人員瞭解很多種不同的軟體測試類型,例如功能測試( ...
  • 過場CG: 接到公司領導的文件指示,“小熊”需要在6月底去海外執行一個行動代號為【定時任務】的營救計劃,這個計劃關係到公司某個項目的生死(數據安全漏洞),作戰部擬定兩個作戰方案: 方案一:使用務定時任務框架quartz; 方案二:使用windows Service服務。 最終的作戰方案為:兩者配套使 ...
  • 為什麼編寫TaskSchedulerEx類? 因為.NET預設線程池只有一個線程池,如果某個批量任務一直占著大量線程,甚至耗盡預設線程池,則會嚴重影響應用程式域中其它任務或批量任務的性能。 特點: 1、使用獨立線程池,線程池中線程分為核心線程和輔助線程,輔助線程會動態增加和釋放,且匯流排程數不大於參數 ...
  • 前幾天,公眾號後臺有朋友在問Core的中間件,所以專門抽時間整理了這樣一篇文章。 一、前言 中間件(Middleware)最初是一個機械上的概念,說的是兩個不同的運動結構中間的連接件。後來這個概念延伸到軟體行業,大家把應用操作系統和電腦硬體之間過渡的軟體或系統稱之為中間件,比方驅動程式,就是一個典型 ...
  • 參考文檔: https://www.cnblogs.com/liaods/p/10101513.html https://www.cnblogs.com/zyz-Notes/p/12030281.html 本示例使用MVC項目做演示(不推薦,推薦直接用WebAPI),框架版本使用 4.6.2 為了支 ...
  • 引用NModbus 在NuGet搜索NModbus,添加引用。 封裝ModbusTcp類 public class ModbusTCP { private ModbusFactory modbusFactory; private IModbusMaster master; private TcpCl ...
  • 系列文章 基於 abp vNext 和 .NET Core 開發博客項目 - 使用 abp cli 搭建項目 基於 abp vNext 和 .NET Core 開發博客項目 - 給項目瘦身,讓它跑起來 基於 abp vNext 和 .NET Core 開發博客項目 - 完善與美化,Swagger登場 ...
  • Microsoft.AspNetCore.Mvc.Versioning //引入程式集 .net core 下麵api的版本控製作用不需要多說,可以查閱https://www.cnblogs.com/dc20181010/p/11313738.html 普通的版本控制一般是通過鏈接、header此類 ...
  • 結合 AOP 輕鬆處理事件發佈處理日誌 Intro 前段時間,實現了 EventBus 以及 EventQueue 基於 Event 的事件處理,但是沒有做日誌(EventLog)相關的部分,原本想增加兩個介面, 處理事件發佈日誌和事件處理日誌,最近用了 AOP 的思想處理了 EntityFrame ...
  • 什麼是sam 轉換 Single Abstract Method 實際上這是java8中提出的概念,你就把他理解為是一個方法的介面的就可以了 看一下我們每天都在使用的線程池 ExecutorService executorService= Executors.newScheduledThreadPo ...