ติดตั้งและใช้งาน reCaptcha ใน Yii Framework 2

ในบทเรียนรู้นี้เรามาติดตั้งและใช้งาน reCaptcha ใน Yii Framework 2 กันนะครับ reCaptcha เป็นบริการหนึ่งของ Google ครับ ซึ่งให้บริการในการ Validate ตัวอักขระรูปภาพ เพื่อป้องกันการ Submit จาก Bot หรือ Script ต่างๆ โดยทำให้แน่ใจว่าถูก Submit ด้วยมนุษย์นั่นเอง

ก่อนอื่นเข้าไปสร้าง Key กันก่อนโดยเข้า https://www.google.com/recaptcha

กด Admin Console -> กดเครื่องหมาย + (สร้าง)

จากนั้นกด ปุ่ม ส่ง จะปรากฏ Key ลักษณะดังนี้

สำหรับการติดตั้งจะใช้ package 

himiklab/yii2-recaptcha-widget

โดยพิมพ์คำสั่งติดตั้งผ่าน Composer ดังนี้

composer require --prefer-dist "himiklab/yii2-recaptcha-widget" "*"

จากนั้นเพิ่ม reCaptcha ใน Component ของ Yii โดยแก้ไขไฟล์ config/web.php หรือ common/config/main.php แล้วเพิ่มคำสั่งในส่วน Component ดังนี้

'reCaptcha' => [
            'name' => 'reCaptcha',
            'class' => 'himiklab\yii2\recaptcha\ReCaptcha',
            'siteKey' => 'sitekey',
            'secret' => 'secret',
        ],

ขั้นตอนต่อไปให้ไปกำหนดใน Model ที่ต้องการให้ Validate

public function rules()
    {
        return [
            [['forum_category_id', 'name', 'description', 'thread_by', 'thread_tel', 'thread_contact'], 'required'],
            [['forum_category_id', 'status', 'created_at', 'updated_at'], 'integer'],
            [['description', 'thread_contact', 'remark'], 'string'],
            [['name'], 'string', 'max' => 300],
            [['thread_by'], 'string', 'max' => 100],
            [['thread_tel', 'thread_email'], 'string', 'max' => 45],
            ['reCaptcha', \himiklab\yii2\recaptcha\ReCaptchaValidator::className(), 'secret' => '6Le8w-QUAAsdgAF5232sdKaoDbjZjp1oTVvcgRD74'],
            [['forum_category_id'], 'exist', 'skipOnError' => true, 'targetClass' => ForumCategory::className(), 'targetAttribute' => ['forum_category_id' => 'id']],
        ];
    }

กำหนด attributeLabels()

'thread_contact' => 'ช่องทางการติดต่อกลับ',
            'remark' => 'หมายเหตุ',
            'reCaptcha' => '',

จากนั้นเพิ่ม reCaptcha ในฟอร์มกรอกข้อมูลลักษณะดังนี้

<?= $form->field($model, 'reCaptcha')->widget(\himiklab\yii2\recaptcha\ReCaptcha::className()) ?>

เมื่อเปิด Web Application จะปรากฏฟอร์มลักษณะดังนี้