إضافة Google reCAPTCHA إلى النماذج في لارافيل
جدول المحتويات
تعتبر الـ Forms واحده من أهم العناصر في تطبيقات الويب، فمعظم التطبيقات تحتوي على نموذج إتصل بنا، إلا أن هذه النماذج تعتبر مصدرا للرسائل المزعجة spam، وأفضل وسيلة للتخلص من هذه الرسائل المزعجة إستخدام Google reCAPTCHA.
في هذه المقالة، سنتعرف كيف يمكن إضافة Google reCAPTCHA في التطبيقات التي نعمل عليها.
إضافة حزمة reCAPTCHA
يوجد حزمة مخصصة للقيام بذلك وهي anhskohbo/no-captcha ولتثبيتها
composer require anhskohbo/no-captcha
بعد تثبيت الحزمة ، يجب الحصول على secret keys والتي يمكن الحصول عليها من جوجل من خلال هذا الرابط
بعد تعبئة البيانات والضغط على إرسال، نحصل على secret_key, site_key
نذهب إلى ملف .env ونضيف هذه القيم
NOCAPTCHA_SECRET= PUT YOUR SECRET KEY HERE NOCAPTCHA_SITEKEY= PUT YOUR SITE KEY HERE
إظهار Google reCAPTCHA في ملف العرض blade
يوجد مجموعة من الخيارات لإظهار Google reCAPTCHA والتي يمكن الإطلاع عليها من خلال صفحة الحزمة على جت هب، لكن هنا سوف أستخدم العرض الأساسي
{!! NoCaptcha::display() !!}
<div class="col-md-6 pull-center">
{!! app('captcha')->display() !!}
@if ($errors->has('g-recaptcha-response'))
<span class="help-block">
<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
</span>
@endif
</div>وكذلك يجب تضمين أكود الجافاسكربت
{!! NoCaptcha::renderJs() !!}{!! NoCaptcha::renderJs() !!}
</script>
</body>إضافة Google reCAPTCHA في عملية validation
في دالة الحفظ بداخل الكونترولر نضيف التحقق
public function send(Request $request){
$this->validate($request, [
'name' => 'required',
'email' => 'required',
'subject' => 'required',
'message' => 'required',
'g-recaptcha-response' => 'required|captcha',
]);
// Your Code Logic Here
return redirect()->back();
}
كما نرى، فقد حاولت أن أرسل البيانات دونأن أستخدم Google reCAPTCHA لكن عملية validation بداخل الدالة أرجعت الخطأ.
تحسين تجربة المستخدم
ما يظهر لدينا بالأعلى أن زر send يمكن الضغط عليه حتى لو لم يتم إدخال captcha والـ controller اي من خلال server side هو من يفحص ويرجع الخطأ، لكن من الأفضل أن يكون زر send معطل وحين يقوم المستخدم بإدخال Google reCAPTCHA بشكل صحيح، أن يتم تفعيل هذا الزر.
للقيام بذلك نذهب إلى ملف blade ونضيف الكود التالي مكان ظهور Google reCAPTHA.
- إزالة الدالة الإفتراضية NoCaptcha::display من العرض وإستبدالها بالتالي
<div class="g-recaptcha" data-callback="recaptcha_callback" data-sitekey="6LewwJoaAAAAACyrfXCF1eqZaCOIerF6cTCbrf9z"></div>
- إضافة خاصية disabled إلى button
<div class="g-recaptcha" data-callback="recaptcha_callback"
data-sitekey="6LewwJoaAAAAACyrfXCF1eqZaCOIerF6cTCbrf9z"></div>
@if ($errors->has('g-recaptcha-response'))
<span class="help-block">
<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
</span>
@endif
</div>
<button type="submit" disabled id="button1" class="btn btn-primary">Send</button>- وفي الجافا سكربت إضافة الدالة التالية
{!! NoCaptcha::renderJs() !!}
<script>
function recaptcha_callback(){
document.getElementById("button1").disabled = false;
}
</script>
</body>