[Asp.Net Core]用Blazor Server Side實現圖片驗證碼_實用技巧

來源:腳本之家  責任編輯:小易  

查了一下,可以用命令行生成相應的文件:Scaffold-DbContext"Server=.\\SQLExpress;Database=SchoolDB;Trusted_Connection=True;Microsoft.EntityFrameworkCore.SqlServer-OutputDir Models連接字符串放json里面ConnectionStrings":{MbkDbConstr":"Data Source=(localdb)\\\\MBK;Database=MbkTest;}參考資料:網頁鏈接www.anxorj.tw防采集請勿采集本網。

關于Blazor

asp.net mvc5只能運行在Windows,一般通過IIS發布;asp.net core開源,可跨平臺,能夠發布到Linux等系統上。asp.net core做了很多的整合工作,目前來說完成了最基本的一部分類庫的遷移。從前景

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

在asp.net core 里非常建議使用entity framework,因為新的entity framework core定義了一套接口標準,就如同ado.net一樣,只要有廠家實現了這套接口就行,而且廠家的實現肯定會更好一些。在asp.

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

這是因為.net core為了跨平臺,編譯的方式使用的是dotnet publish-r 版本,例如發布到windows X64的機器上,使用的命令就應該是dotnet publish-r win-x64這樣的命令進行發布。而運行方式呢,使用的是

驗證碼

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

1、CORS的原理:CORS定義百一種跨域訪問的機度制,可以讓AJAX實現跨域訪問。CORS 允許問一個答域上的網絡應用向另一個域提交跨域 AJAX 請求。實現此功能非常簡版單,只需由服務器發送一個權響應

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

新框架沒用過,.Net Core 2.0感覺應該是支持的。這里有一篇帖子,你可以參考一下。www.bamn.cn/course/volume/3991 實在不行你就轉url吧,就像檢測用戶一樣,凡是沒有訪問權限的都轉到那個頁面。

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

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

先上圖:

再上代碼:

@page "/BlazorVerificationCode"<p> (Blazor) A sample for how to show verification code and verify it.</p>@inject IJSRuntime [email protected]{ 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> 在服務器上有活動的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實現圖片驗證碼的資料請關注真格學網其它相關文章!

ASP.NET Core 是一個全新的開2113源、跨平臺框架,可以用它來5261構建基于網絡連接的現代云應4102用1653程序,比如:Web  應用,IoT(Internet Of Things,物聯網)應用和移動后端等。ASP.NET Core可以運行在 .NET Core 或完整的  .NET Framework  之上,其架構為發布到云端或本地運行的應用提供了一個最佳的開發框架,由開銷很小的模塊化組件構成,這就保持了你構造解決方案的靈活性。你可以跨平臺地在Windows、Mac和Linux等設備上開發和運行你的  ASP.NET Core 應用。ASP.NET Core有以下優勢:ASP.NET Core相對于之前的版本有許多變化,才使得它成為一個更加靈活和模塊化的框架。ASP.NET  Core不再是基于System.Web.dll,它基于一組分解在NuGet的包。這使您可以根據實際需要來判斷是否引用相應的Nuget包,可以優化您的應用程序。表面積更小的應用程序的好處包括安全更強、維修更少,提高性能,降低成本。最新版本的 ASP.NET 叫做 ASP.NET Core (也被稱為 ASP.NET 5) 它顛覆了過去的 ASP.NET內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • [asp.net core] 淺談blazor server side
  • asp.netcore1.1版本去掉project.json后如何打包生成跨平臺包
  • abp框架中的日志功能完全解析
  • .net core ef core調用存儲過程的方式
  • asp.net也像winform程序一樣運行的實現方法
  • asp.net mvc實現簡單的實時消息推送
  • asp.net下dataset.writexml(string)與(stream)的區別
  • asp.net page.controls對象(找到所有服務器控件)
  • 淺談mvc框架的優點(翻譯)
  • js獲取.aspx頁面里面的服務器控件和.ascx中的服務器控件值
  • 關于前臺調用后臺事件__dopostback函數
  • ASP.net core是什么?
  • 請問asp.net core mvc怎么使用ef連接現有數據庫?
  • 如何評價asp.net core
  • ASP.NET Core win2003上可以用嗎
  • 請問:ASP.net mvc5和asp.net.core有什么區別呢?在今后的發展中這個前景怎么樣?
  • asp.net core里面,EF和NH哪個對Oracle的支持更好?
  • asp.net core mvc 是不是未包含使用UA 動態選擇displayModel
  • 如何在ASP NET Core中實現CORS跨域
  • Asp.Net Core 設置 .html 頁為起始頁
  • 沒有基礎可以學 asp.net core嗎?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全基礎應用實用技巧自學過程首頁asp.net實用技巧[asp.net core] 淺談blazor server sideasp.netcore1.1版本去掉project.json后如何打包生成跨平臺包abp框架中的日志功能完全解析.net core ef core調用存儲過程的方式asp.net也像winform程序一樣運行的實現方法asp.net mvc實現簡單的實時消息推送asp.net下dataset.writexml(string)與(stream)的區別asp.net page.controls對象(找到所有服務器控件)淺談mvc框架的優點(翻譯)js獲取.aspx頁面里面的服務器控件和.ascx中的服務器控件值關于前臺調用后臺事件__dopostback函數java正則表達式 pattern和matche未將對象引用設置到對象的實例 (asp.net(c#)網頁跳轉七種方法小結未能加載文件或程序集“xxx”或它asp.net“服務器應用程序不可用”asp.net中的幾種彈出框提示基本實asp.net gridview 72般絕技asp.net生成excel并導出下載五種asp.net對路徑"xxxxx"asp.net漢字轉拼音和獲取漢字首字mvc5 + ef6 + bootstrap3 (11) 實現排序、asp.net mvc中為dropdownlistfor設置選中asp.net實現qq、微信、新浪微博oauth2.0授asp net core 2.1中如何使用jwt(從原理到asp.net signalr應用并實現群聊功能進度條在.net導入excel時的應用實例asp.net程序優化 盡量減少數據庫連接操作.net core在服務器端獲取api傳遞的參數過運行asp.net時出現 http錯誤404-文件或asp.net mvc 4使用pagedlist.mvc分頁的實
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载