創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買(mǎi)多久送多久，劃算不套路！

東鄉(xiāng)族ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

這篇文章將為大家詳細(xì)講解有關(guān)用Blazor Server Side如何實(shí)現(xiàn)圖片驗(yàn)證碼，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

關(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  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"  />
 <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());
 }

}

當(dāng)前文章：用BlazorServerSide如何實(shí)現(xiàn)圖片驗(yàn)證碼-創(chuàng)新互聯(lián)
路徑分享：http://www.sd-ha.com/article26/dojgcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站制作、網(wǎng)站收錄、做網(wǎng)站、品牌網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)