كيف يمكنني اضافة captcha لتأمين حذف البيانات بواسطة مكتبة jQuery

يمكنك استخدام مكتبة جاهزة للCaptcha من الjquery  كالتالي 

    <!-- captcha challenge: placeholder -->
            <div id="botdetect-captcha" data-captchastylename="jqueryFormCaptcha"></div>

            <label>
                <span>Retype the characters from the picture:</span>
                <!-- captcha code: user-input textbox -->
                <input 
                    type="text" 
                    id="userCaptchaInput" 
                >
            </label>


 <script src="node_modules/jquery/jquery.min.js"></script>
 <script src="node_modules/jquery-captcha/dist/jquery-captcha.min.js"></script>

و هنا تقوم بعمل تصديق على صحة الأدخال كالتالي 

// إنشاء نسخة captcha للواجهة الأمامية في معالج الأحداث DOM.
    // وقم بتعيين خاصية captchaEndpoint للإشارة إلى
    // مسار نقطة نهاية اختبار captcha على الواجهة الخلفية لتطبيقك 
var captcha = $('#botdetect-captcha').captcha({
        captchaEndpoint: 'simple-captcha-endpoint.ashx'
    });

   $('#contactForm').submit(function (event) {

        if (isNameValid && isEmailValid && isSubjectValid && isMessageValid) {
            
            // الحصول على قيمة كود
          // captcha التي أدخلها المستخدم ليتم التحقق من صحتها في الجانب الخلفي
            var userEnteredCaptchaCode = captcha.getUserEnteredCaptchaCode();

            // الحصول على معرف مثيل captcha الذي حاول المستخدم حله
            var captchaId = captcha.getCaptchaId();

            var postData = {
                name: $('#name').val(),
                email: $('#email').val(),
                subject: $('#subject').val(),
                message: $('#message').val(),
               
                userEnteredCaptchaCode: userEnteredCaptchaCode,
             
                captchaId: captchaId
            };
          
          .....
          .....
         /// هنا تقوم بعملية ‘إرسال البيانات أو أي عملية تحتاجها 
        }

و هنالك طريقة أخرى و هي عيارة عن خلق canvas و رسم أحرف بطريقة عشوائية و تتمكن من خلالها أن تحدد المدخلات التي تريدها كالتالي :

// يتم استخدام document.querySelector () لتحديد عنصر من المستند باستخدام المعرف الخاص به

let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";


let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');


// يحتوي alphaNums على الأحرف التي تريد إنشاء CAPTCHA بها

let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// تولد هذه الحلقة سلسلة عشوائية من 7 أحرف باستخدام alphaNums

// علاوة على ذلك ، يتم عرض هذه السلسلة على أنها CAPTCHA
for (let i = 1; i <= 7; i++) {
 emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');


//هنا تقوم برسم الcanvas 
//  و يحتوي على الاحر المرادة 
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);



// هنا دالة تقوم بعمل النصديق على ال البانات المدخلة 
submitButton.addEventListener('click', function() {
  // هنا نقوم بالمقارنة بين القيمة المدخلة و القيمة التي تم عرضها و على أساسها نخبر المستحدم أن كانت صحيحة أم لا 
 if (userText.value === c) {
 output.classList.add("correctCaptcha");
 output.innerHTML = "Correct!";
 } else {
 output.classList.add("incorrectCaptcha");
 output.innerHTML = "Incorrect, please try again";
 }
});

يمكنك استخدام Google reCapatcha  بحيث يمكنك تضمين مكتبة api.js 

<script src="https://www.google.com/recaptcha/api.js"></script>

ثم يمكنك إنشاء وظيفة رد الاتصال callback للتعامل مع التوكن token 

<script>
	function onSubmit(token) {
		document.getElementById("MyForm").submit();
	}
</script>

ثم في زر الإرسال الخاص بالفورم يمكنك وضع الخصائص التالية 

class="g-recaptcha" data-sitekey="reCAPTCHA_site_key"data-callback='onSubmit' data-action='submit'

مثل 

<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key"data-callback='onSubmit' data-action='submit'>Submit</button>

يمكنك من هنا قراءة كافة التعليمات للتعامل مع Google reCapatcha.

يمكنك أخذ الname الخاصة بالملف الذي سيحذف 

ثم في ال modal يمكنك وضع صندوق ادخال يضع فيه المستخدم اسم الملف المراد حذفه عند انبثاق الmodal واذا تساوى مع الملف الذي أراد حذفه تعمل enable لزر التأكيد هكذا أنت لن تحتاج تعقيد الأمر عليك برمجيا