Sử dụng recaptcha-v3 trong VueJS

• Truy cập https://www.google.com/recaptcha để tạo captcha và lấy sitekey và secretkey để import vào dự án.
• Install recaptcha-v3 cho VueJs:

npm install vue-recaptcha-v3

• Sau khi install thành công, import recaptcha-v3 vào trong component cần sử dụng:

import Vue from ‘vue‘

import { VueReCaptcha } from ‘vue-recaptcha-v3‘

Vue.use(VueReCaptcha, { siteKey: ‘<YOUR_SITE_KEY>’ })

•   Sau khi đã import recaptcha-v3 vào component cần sử dụng, dùng grecaptcha.execute để tạo ra token (recaptcha-v3 sẽ tạo ra một token để ta xác nhận nó, token này chỉ được xác nhận một lần duy nhất)

 <input type=”button” @click =”submitForm” > 

methods: {

submitForm () {

grecaptcha.execute(YOUR_SITE_KEY).then(token => {

…code…

})

}

}

• Với token đã có, ta gọi ajax tới một file php để xác nhận token này:

grecaptcha.execute(YOUR_SITE_KEY).then(token => {

const requestURL = ‘/motion/htdocs/api/VerifyCaptcha.php’

let formData = new FormData()
formData.append(‘secretKey’, YOUR_SECRET_KEY)
formData.append(‘token’, token)

axios.post(requestURL, formData).then(response => {

….

})

})

• Trong file php, sư dụng file_get_contents gọi tới link api của recaptcha để xác nhận token đã có:

<?php
header(‘Access-Control-Allow-Origin: *’);
header(‘Access-Control-Allow-Headers: *’);

$secretKey = $_POST[‘secretKey’];

$token= $_POST[‘token’];

$url = ‘https://www.google.com/recaptcha/api/siteverify’;
$data = array(‘secret’ => $secretKey, ‘response’ => $token);

$options = array(

‘http’ => array(
‘header’ => “Content-type: application/x-www-form-urlencoded\r\n”,
‘method’ => ‘POST’,
‘content’ => http_build_query($data)
)

);

$context = stream_context_create($options);
$response = file_get_contents($url, false, $context);
echo $response;

• Tham khảo một số kết quả trả về từ ajax tại: https://developers.google.com/recaptcha/docs/verify