Javascript

Sử dụng recaptcha-v3 trong 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;