Dalam tutorial ini, saya akan menunjukkan bagaimana Anda dapat menambahkan Google reCAPTCHA v3 ke formulir Anda di CodeIgniter 4.
Google reCAPTCHA v3 adalah jenis captcha yang tidak terlihat di mana pengguna tidak perlu berinteraksi. Ini melacak perilaku pengguna di situs dan mengembalikan skor antara 0 hingga 1 dengan respons.
Skor ini digunakan untuk validasi di sisi server. Tanpa basa-basi lagi, yuk ikuti langkah-langkah berikut ini.
1. Dapatkan Google reCapctcha Keys
Anda dapat melewati langkah ini jika Anda telah mendaftar untuk Google reCAPTCHA v3 dan memiliki site dan secret keys. Jika belum ada, Anda bisa mengikuti langkah berikut.
Buka tautan berikut ini dan masuk ke akun Anda jika belum masuk
Nanti akan muncul tampilan halaman seperti ini.
Di sini, masukkan label, pilih reCAPTCHA v3 dari jenis reCAPTCHA, masukkan nama domain Anda tanpa https, misalnya leravio.com. Anda juga dapat menentukan localhost jika Anda ingin mengujinya pada sistem lokal Anda.
Centang Terima Persyaratan Layanan reCAPTCHA dan klik tombol Kirim.
Selanjutnya, Anda bisa copy site key dan secret key.
2. Configurasi
Selanjutnya, kita akan menerapkan google reCaptcha ke Codeigniter 4. Pertama yaitu buka .env di folder root project. Kemudian, kita definisikan 2 variables yang menyimpan site key dan secret key.
GOOGLE_RECAPTCHAV3_SITEKEY = 6LdP-nIhAAAAAA6rzq7BTh_jKqIYeKMoaALxkKte GOOGLE_RECAPTCHAV3_SECRETKEY = 6LdV-nIhAAAAAL-uFI4w9kQUaqMkeU2K3KojlXyE
Selanjutnya pada file .env, Hapus # di awal security.tokenName, security.headerName, security.cookieName, security.expires, dan security.regenerate.
Saya akan memperbarui nilai security.tokenName dengan ‘csrf_hash_name‘. Dengan nama ini, baca hash CSRF. Anda dapat memperbaruinya dengan nilai lainnya.
Jika Anda tidak ingin membuat ulang hash CSRF setelah setiap permintaan, maka setel security.regenerate = false.
security.tokenName = 'csrf_hash_name' security.headerName = 'X-CSRF-TOKEN' security.cookieName = 'csrf_cookie_name' security.expires = 7200 security.regenerate = true
Setelah itu, buka file app/Config/Filters.php dan hapus komentar ‘csrf‘ di ‘before‘ jika ada komentar.
// Always applied before every request
public $globals = [
'before' => [
// 'honeypot',
'csrf',
// 'invalidchars',
],
'after' => [
'toolbar',
// 'honeypot',
// 'secureheaders',
],
];3. Membuat Custom Validation Untuk reCaptcha V3
Buat aturan untuk memverifikasi respons reCaptcha v3.
- Buat berkas CaptchaValidation.php baru di folder app/Config/.
- Buatlah sebuah kelas CaptchaValidation.
- Di dalam kelas tersebut buatlah method verifyrecaptchaV3(). Di sini, nama method juga merupakan nama rule.
- Baca secret key dari berkas .env dan tetapkan ke $secret_key.
- Kirim permintaan ke –
https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$str."&remoteip=".$_SERVER['REMOTE_ADDR']
- Di sini, masukkan secret key, recaptcha response, dan alamat IP.
- Ini nantinya akan mengembalikan respons JSON.
- Jika $responseData->success bernilai true dan $responseData->score > 0.6 maka return true jika tidak, tetapkan pesan kesalahan di $error dan return false.
Note
Anda dapat memperbarui nilai $score dari 0,6 ke nilai lainnya. Pastikan untuk mengaturnya antara 0,5 hingga 1.
Untuk full codenya akan terlihat seperti ini.
<?php
namespace Config;
class CaptchaValidation{
public function verifyrecaptchaV3(string $str, ?string &$error = null): bool
{
$secretkey = getenv('GOOGLE_RECAPTCHAV3_SECRETKEY');
if(($str) && !empty($str)) {
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$str."&remoteip=".$_SERVER['REMOTE_ADDR']);
$responseData = json_decode($response);
$score = 0.6; // 0 - 1
if($responseData->success && $responseData->score > $score) { // Verified
return true;
}
}
$error = "Invalid captacha";
return false;
}
}Untuk menggunakan aturan validasi yang telah dibuat di atas, Anda harus mendefinisikannya di file Validation.php.
- Buka file app/Config/Validation.php.
- Sertakan kelas Config\CaptchaValidation.
- Tentukan kelas CaptchaValidation::class di dalam Array $ruleSets.
<?php
namespace Config;
use CodeIgniter\Config\BaseConfig;
use CodeIgniter\Validation\CreditCardRules;
use CodeIgniter\Validation\FileRules;
use CodeIgniter\Validation\FormatRules;
use CodeIgniter\Validation\Rules;
use Config\CaptchaValidation; // Custom reCAPTCHA v3 validation
class Validation extends BaseConfig
{
// --------------------------------------------------------------------
// Setup
// --------------------------------------------------------------------
/**
* Stores the classes that contain the
* rules that are available.
*
* @var string[]
*/
public $ruleSets = [
Rules::class,
FormatRules::class,
FileRules::class,
CreditCardRules::class,
CaptchaValidation::class, // Custom reCAPTCHA v3 validation
];
/**
* Specifies the views that are used to display the
* errors.
*
* @var array<string, string>
*/
public $templates = [
'list' => 'CodeIgniter\Validation\Views\list',
'single' => 'CodeIgniter\Validation\Views\single',
];
// --------------------------------------------------------------------
// Rules
// --------------------------------------------------------------------
}4. Membuat Controller
Buat controller dengan nama PagesController dengan perintah berikut ini.
php spark make:controller PagesController
Setelah itu, buka file app/Controllers/PagesController.php dan buat 2 metode antara lain.
- index() – Memuat tampilan indeks.
- submitContactUs() – Metode ini memanggil form submit.
Validasi nilai yang dikirimkan. Di sini, untuk memvalidasi recaptcha tentukan – ‘recaptch_response’ => ‘required|verifyrecaptchaV3’,.
verifyrecaptchaV3 adalah aturan validasi khusus yang dibuat di langkah sebelumnya.
Jika <form> tidak tervalidasi maka kembalikan ke halaman dengan pesan kesalahan, jika tidak, simpan pesan sukses di flash SESSION dan alihkan ke route(‘/’).
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
class PagesController extends BaseController
{
public function index(){
return view('index');
}
public function submitContactUs(){
// Validation
$input = $this->validate([
'name' => 'required',
'email' => 'required',
'subject' => 'required',
'message' => 'required',
'recaptcha_response' => 'required|verifyrecaptchaV3',
],[
'recaptcha_response' => [
'required' => 'Please verify captcha',
],
]);
if (!$input) { // Not valid
$data['validation'] = $this->validator;
return redirect()->back()->withInput()->with('validation', $this->validator);
}else{
// Set Session
session()->setFlashdata('message', 'Request Submitted Successfully!');
session()->setFlashdata('alert-class', 'alert-success');
}
return redirect()->route('/');
}
}5. Menambahkan Routes
Buka file app/Config/Routes.php. Di sini, buat 2 route yaitu:
- /
- page/submitContactUs – Menangani pengiriman formulir.
$routes->get('/', 'PagesController::index');
$routes->post('page/submitContactUs', 'PagesController::submitContactUs');6. Membuat Tampilan
Buat berkas index.php di folder app/Views/. Lalu, sertakan recaptcha js di bagian berikut ini.
<!-- reCAPTCHA JS-->
<script src="https://www.google.com/recaptcha/api.js?render=<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>"></script>Di sini, tentukan juga sitekey.
- Buat formulir kontak dan setel action URL ke <?=site_url(‘page/submitContactUs’)?>. Tentukan event onSubmit pada <form> yang memanggil onSubmit(event).
- Tampilkan pesan kesalahan jika elemen <form> tidak tervalidasi. Di dalam juga tampilkan pesan kesalahan jika recaptcha tidak tervalidasi.
- Buat elemen tersembunyi #recaptcha_response untuk menyimpan respons token recapatcha pada <form> submit.
- Terakhir yaitu buat submit button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to add Google reCAPTCHA v3 in CodeIgniter 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<!-- reCAPTCHA JS-->
<script src="https://www.google.com/recaptcha/api.js?render=<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>"></script>
<!-- Include script -->
<script type="text/javascript">
function onSubmit(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute("<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>", {action: 'submit'}).then(function(token) {
// Store recaptcha response
document.getElementById("recaptcha_response").value = token;
// Submit form
document.getElementById("contactForm").submit();
});
});
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mt-5" style="margin: 0 auto;">
<?php
// Display Response
if(session()->has('message')){
?>
<div class="alert <?= session()->getFlashdata('alert-class') ?>">
<?= session()->getFlashdata('message') ?>
</div>
<?php
}
?>
<h2 class="mb-4">Contact US</h2>
<?php $validation = \Config\Services::validation(); ?>
<form id="contactForm" method="post" action="<?=site_url('page/submitContactUs')?>" onSubmit="onSubmit(event)">
<?= csrf_field(); ?>
<!-- Recaptcha Error -->
<?php if( $validation->getError('recaptcha_response') ) {?>
<div class="alert alert-danger">
<?= $validation->getError('recaptcha_response'); ?>
</div>
<?php }?>
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name" value="<?= old('name') ?>">
</div>
<!-- Error -->
<?php if( $validation->getError('name') ) {?>
<div class='text-danger mt-2'>
* <?= $validation->getError('name'); ?>
</div>
<?php }?>
</div>
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" value="<?= old('email') ?>">
</div>
<!-- Error -->
<?php if( $validation->getError('email') ) {?>
<div class='text-danger mt-2'>
* <?= $validation->getError('email'); ?>
</div>
<?php }?>
</div>
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="subject" placeholder="Enter Subject" name="subject" value="<?= old('subject') ?>" >
</div>
<!-- Error -->
<?php if( $validation->getError('subject') ) {?>
<div class='text-danger mt-2'>
* <?= $validation->getError('subject'); ?>
</div>
<?php }?>
</div>
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea class="form-control" id="message" name="message"><?= old('message') ?></textarea>
</div>
<!-- Error -->
<?php if( $validation->getError('message') ) {?>
<div class='text-danger mt-2'>
* <?= $validation->getError('message'); ?>
</div>
<?php }?>
</div>
<div class="form-group ">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" id="recaptcha_response" name="recaptcha_response" value="">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>7. Penutup
Dengan menggunakan ini, Anda dapat melindungi situs web Anda tanpa memaksa pengguna untuk memverifikasi apakah itu manusia atau bot. Dan selamat sekarang Anda telah berhasil menambahkan Google reCaptcha v3 di Codeigniter 4. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.