C# Blazor Server 圖形驗證簡單示例

#你能用一句話來概括你的人生格言嗎#

永遠保持好奇心，不斷學習和成長。

以下是一個簡單的C# Blazor Server圖形驗證的示例：

首先，在Pages檔案夾中建立一個新的Blazor頁面，命名為Captcha.razor：

@page "/captcha"
@inject ICaptchaService captchaService

<h3>圖形驗證</h3>

<div>
    <img src="@captchaService.GetCaptchaImage()" alt="驗證碼" />
    <br />
    <input type="text" @bind="captchaService.CaptchaInput" placeholder="請輸入驗證碼" />
    <br />
    <button @onclick="ValidateCaptcha">驗證</button>
    <br />
    @captchaService.ValidationMessage
</div>

@code {
    private void ValidateCaptcha()
    {
        if (captchaService.ValidateCaptcha())
        {
            captchaService.ValidationMessage = "驗證成功！";
        }
        else
        {
            captchaService.ValidationMessage = "驗證失敗，請重新輸入！";
        }
    }
}           

接下來，建立一個名為ICaptchaService.cs的接口，定義圖形驗證的相關方法和屬性：

public interface ICaptchaService
{
    string CaptchaInput { get; set; }
    string ValidationMessage { get; set; }
    
    string GetCaptchaImage();
    bool ValidateCaptcha();
}           

然後，建立一個名為CaptchaService.cs的實作類來實作ICaptchaService接口：

public class CaptchaService : ICaptchaService
{
    private string expectedCaptcha;
    
    public string CaptchaInput { get; set; }
    public string ValidationMessage { get; set; }
    
    public CaptchaService()
    {
        expectedCaptcha = GenerateRandomCaptcha();
    }
    
    public string GetCaptchaImage()
    {
        // 生成并傳回驗證碼圖檔的URL
        // 可以使用第三方庫或自定義方法來生成圖形驗證碼
    }
    
    public bool ValidateCaptcha()
    {
        // 比較使用者輸入的驗證碼和預期驗證碼是否相同
        return CaptchaInput.Trim().Equals(expectedCaptcha, StringComparison.OrdinalIgnoreCase);
    }
    
    private string GenerateRandomCaptcha()
    {
        // 生成随機的驗證碼并傳回
    }
}           

最後，将CaptchaService注冊為Blazor服務，在Startup.cs檔案中的ConfigureServices方法中添加以下代碼：

services.AddSingleton<ICaptchaService, CaptchaService>();           

現在你可以通過通路/captcha來檢視Blazor頁面上的圖形驗證執行個體了。

請注意，上述示例隻提供了一個基本的骨架，具體的圖形驗證碼生成和驗證實作可能會有所不同，你需要根據實際需求進行相應的調整和修改。

創作不易，如果您喜歡還請幫忙點贊關注，謝謝！[作揖]