หน้าแรก/บทความ/ติดตั้ง reCAPTCHA ใน Laravel 5
กลับหน้าบทความ
🔐Laravel

ติดตั้ง reCAPTCHA ใน Laravel 5

วิธีติดตั้งและใช้งาน No CAPTCHA reCAPTCHA ใน Laravel 5 ด้วย Package anhskohbo/no-captcha ตั้งแต่ติดตั้ง กำหนดค่า ไปจนถึงการตรวจสอบฟอร์ม

ศิริชัย ธีรภัทรสกุล (ตั้ม)อ่าน 3 นาที2 ตุลาคม 2563
#Laravel#reCAPTCHA#PHP#Security#Composer

เนื่องจากมีบางโปรเจ็คถูก spam bot มาเยี่ยมเยียนบ่อย เลยคิดว่าหา Captcha มาติดเพิ่มเติมจะดีกว่า เลยมาจบที่แพ็กเกจที่ชื่อว่า No CAPTCHA reCAPTCHA ดูแล้วใช้งานไม่ยากนัก มาดูวิธีติดตั้งและใช้งานเบื้องต้นกันเลยครับ

สำหรับ Laravel 4 ให้ใช้ v1 branch ครับ

ติดตั้ง

composer require anhskohbo/no-captcha

ตั้งค่า

เนื่องจากแพ็กเกจนี้ Support ตัว Auto-discovery ดังนั้นถ้าใช้ Laravel 5.5 ขึ้นไป ให้ข้ามไปยังการกำหนดค่าในไฟล์ .env ได้เลย

สำหรับ Laravel เวอร์ชั่นต่ำกว่า 5.5 ในไฟล์ app/config/app.php ให้เพิ่มตามด้านล่างนี้

1. เพิ่ม ServiceProvider ใน providers array

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,

2. เพิ่ม class alias ใน aliases array

'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

3. ทำการ Publish ค่า config

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

กำหนดค่า

เพิ่ม NOCAPTCHA_SECRET และ NOCAPTCHA_SITEKEY ในไฟล์ .env ดังนี้

NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

สามารถไปรับ secret-key และ site-key ได้จาก https://www.google.com/recaptcha/admin

วิธีใช้งาน

ให้ไปที่ฟอร์มในไฟล์ blade template ที่เราต้องการติดตั้ง reCAPTCHA และใส่โค้ดด้านล่างเพื่อดึงไฟล์ Javascript สำหรับเรียกใช้ API

{!! NoCaptcha::renderJs() !!}

เพิ่มโค้ดด้านล่างนี้เพื่อแสดงผล reCAPTCHA

{!! NoCaptcha::display() !!}

{{-- หรือ Dark theme --}}
{!! NoCaptcha::display(['data-theme' => 'dark']) !!}

การตรวจสอบ

เพิ่มกฏ 'g-recaptcha-response' => 'required|captcha' ไปยัง rules array ดังนี้

$validate = Validator::make(Input::all(), [
    'g-recaptcha-response' => 'required|captcha'
]);

กลับมาที่ฟอร์มในไฟล์ blade template เพิ่มโค้ดด้านล่างนี้เพื่อแสดง captcha error

@if ($errors->has('g-recaptcha-response'))
    <span class="help-block">
        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
    </span>
@endif

ก็หวังว่าคงมีประโยชน์สำหรับใครที่ต้องการใช้งานนะครับ จริงๆแล้วมันยังมี Option ต่างๆอีก ทั้ง Testing หรือใช้กับ PHP เพียวๆ ลองไปอ่านเพิ่มเติมได้ที่ https://github.com/anhskohbo/no-captcha ครับ

🚀 รับพัฒนาเว็บไซต์ & เว็บแอพพลิเคชั่น

สนใจดูตัวอย่างงานหรือสอบถามเพิ่มเติม ติดต่อได้เลยครับ โค้ดโมทีฟ (CodeMotive)