快捷導(dǎo)航

netcore 生成驗(yàn)證碼的過程詳解

更新時間：2024年06月21日 10:46:37 作者：Session_MY

這篇文章主要介紹了netcore 生成驗(yàn)證碼的過程詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

安裝依賴

Install-Package Lazy.Captcha.Core

注冊服務(wù)

builder.Services.AddCaptcha();

自定義注冊服務(wù)

// 注冊服務(wù)的時候增加配置
services.AddCaptcha(Configuration, option =>
{
    option.CaptchaType = CaptchaType.WORD; // 驗(yàn)證碼類型
    option.CodeLength = 6; // 驗(yàn)證碼長度, 要放在CaptchaType設(shè)置后.  當(dāng)類型為算術(shù)表達(dá)式時，長度代表操作的個數(shù)
    option.ExpirySeconds = 30; // 驗(yàn)證碼過期時間
    option.IgnoreCase = true; // 比較時是否忽略大小寫
    option.StoreageKeyPrefix = ""; // 存儲鍵前綴
    option.ImageOption.Animation = true; // 是否啟用動畫
    option.ImageOption.FrameDelay = 30; // 每幀延遲,Animation=true時有效, 默認(rèn)30
    option.ImageOption.Width = 150; // 驗(yàn)證碼寬度
    option.ImageOption.Height = 50; // 驗(yàn)證碼高度
    option.ImageOption.BackgroundColor = SkiaSharp.SKColors.White; // 驗(yàn)證碼背景色
    option.ImageOption.BubbleCount = 2; // 氣泡數(shù)量
    option.ImageOption.BubbleMinRadius = 5; // 氣泡最小半徑
    option.ImageOption.BubbleMaxRadius = 15; // 氣泡最大半徑
    option.ImageOption.BubbleThickness = 1; // 氣泡邊沿厚度
    option.ImageOption.InterferenceLineCount = 2; // 干擾線數(shù)量
    option.ImageOption.FontSize = 36; // 字體大小
    option.ImageOption.FontFamily = DefaultFontFamilys.Instance.Actionj; // 字體
    /* 
        * 中文使用kaiti，其他字符可根據(jù)喜好設(shè)置（可能部分轉(zhuǎn)字符會出現(xiàn)繪制不出的情況）。
        * 當(dāng)驗(yàn)證碼類型為“ARITHMETIC”時，不要使用“Ransom”字體。（運(yùn)算符和等號繪制不出來）
        */
    option.ImageOption.TextBold = true;// 粗體，該配置2.0.3新增
});

提供一個生成驗(yàn)證碼和校驗(yàn)的接口

    /// <summary>
    /// 生成驗(yàn)證碼
    /// </summary>
    /// <param name="id"></param>
    /// <returns></returns>
    [HttpGet]
    public IActionResult Captcha(string id)
    {
        var info = _captcha.Generate(id);
        // 有多處驗(yàn)證碼且過期時間不一樣，可傳第二個參數(shù)覆蓋默認(rèn)配置。
        //var info = _captcha.Generate(id,120);
        var stream = new MemoryStream(info.Bytes);
        return File(stream, "image/gif");
    }
    /// <summary>
    /// 驗(yàn)證驗(yàn)證碼是否輸入正確
    /// </summary>
    [HttpGet]
    public bool Validate(string id, string code)
    {
        return _captcha.Validate(id, code);
    }

前端部分

<div class="text-center">
    <img id="captchaImage" src="" alt="Captcha Image" />
    <input type="text" id="captchaInput" placeholder="Enter the captcha code" />
    <button id="validateButton">Validate</button>
    <div id="resultMessage"></div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var guid = generateUUIDv4();
        // 加載驗(yàn)證碼圖片
        loadCaptcha();
        // 監(jiān)聽驗(yàn)證按鈕點(diǎn)擊事件
        document.getElementById('validateButton').addEventListener('click', validateCaptcha);
        // 點(diǎn)擊圖片刷新驗(yàn)證碼
        document.getElementById('captchaImage').addEventListener('click', captchaImageClick);
        async function captchaImageClick() {
            //刷新GUID
            guid = generateUUIDv4();
            // 重新加載驗(yàn)證碼
            loadCaptcha();
        } 
        async function loadCaptcha() {
            try {
                const response = await fetch('/home/Captcha?id=' + guid);
                const blob = await response.blob();
                const imageUrl = URL.createObjectURL(blob);
                document.getElementById('captchaImage').src = imageUrl;
            } catch (error) {
                console.error('Failed to load captcha:', error);
            }
        } 
        async function validateCaptcha() {
            const input = document.getElementById('captchaInput').value;
            const response = await fetch('/home/Validate?id=' + guid + "&code=" + input);
            const data = await response.json();
            const messageElement = document.getElementById('resultMessage');
            if (data) {
                messageElement.textContent = 'Captcha is correct!';
                messageElement.style.color = 'green';
            } else {
                messageElement.textContent = 'Incorrect captcha. Please try again.';
                messageElement.style.color = 'red';
                //刷新GUID
                guid = generateUUIDv4();
                // 重新加載驗(yàn)證碼
                loadCaptcha();
            }
        } 
        function generateUUIDv4() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    }); 
</script>