Pada artikel kali ini saya akan menjelaskan bagaimana membuat captcha dengan menggunakan google reCAPTCHA. Di artikel sebelumnya juga membahas tentang pembuatan captcha, bedanya captcha kali ini disediakan langsung oleh google sedangkan sebelumnya kita membuat manual sendiri. Dan keunggulan dari captcha oleh google ini menurut saya pribadi tentu saja adalah masalah keamanannya karena sudah menggunakan key di mana key ini berbeda untuk semua website yang kita daftarkan. Berikut ini adalah langkah-langkah menggunakan reCAPTCHA :
#MENDAFTAR reCAPTCHA
Yang perlu anda lakukan pertama kali adalah mendaftarkan website anda terlebih dahulu untuk mendapatkan SITE KEY dan SECRET KEY. Caranya adalah dengan membuka link berikut https://www.google.com/recaptcha/admin. Kemudian pilihlah menu + (Create) dan daftarkan domain anda. reCAPTCHA ini memiliki 4 jenis yaitu :
- reCAPTCHA v3
- reCAPTCHA v2 "I'm not a robot" Checkbox
- reCAPTCHA v2 Invisible reCAPTCHA badge
- reCAPTCHA v2 Android
Dan yang akan dijelaskan pada artikel ini adalah versi reCAPTCHA v2 "I'm not a robot" Checkbox. Jadi pilihlah reCAPTCHA tersebut saat anda mendaftarkan domain anda. Nantinya anda akan mendapatkan informasi reCAPTCHA Keys berupa SITE KEY dan SECRET KEY. Untuk saat ini simpan kedua informasi tersebut yang akan digunakan nantinya pada plugin laravel yang kita gunakan.
#INSTALASI PACKAGE
Cara instalasinya adalah dengan menggunakan composer seperti kode berikut
composer require buzz/laravel-google-captcha
Seperti biasanya jalankan perintah tersebut pada command prompt direktori program yang anda buat. Tunggu sampai proses download selesai kemudian tambahkan kode berikut berikut pada bagian providers di dalam file config/app.php
'Buzz\LaravelGoogleCaptcha\CaptchaServiceProvider',
#CARA PENGGUNAAN
Pertama adalah dengan mendaftarkan terlebih dahulu site key dan secret key yang telah anda dapatkan sebelumnya dalam program anda. Caranya adalah dengan menambahkan variabel berikut ini di dalam file .env program.
CAPTCHA_SECRET=[secret-key]
CAPTCHA_SITEKEY=[site-key]
Untuk penggunaan localhost sendiri google telah menyediakan secret key dan site key khusus agar dapat mem bypass pengecekan captcha tersebut. Hal ini diperlukan agar saat proses development, kita tidak perlu mencobanya secara langsung pada website kita. Berikut adalah key yang digunakan
- Site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
- Secret key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
Nantinya anda cukup mengubah site key dan secret key saat program anda sudah tidak dalam proses pengembangan lagi.
Untuk percobaan sederhana saya menyiapkan 2 buah route sebagai berikut
Route::get('/form-recaptcha','ReCaptchaController@index');
Route::post('/form-recaptcha','ReCaptchaController@submit');
Dimana route::get berisi tampilan form dan route::post berisi validasi dari captcha yang kita buat. Berikut ini adalah kode dari action index di dalam ReCaptchaController.php
public function index()
{
return view('recaptcha');
}
Dan berikut ini adalah kode lengkap di dalam file recaptcha.blade.php sebagai view nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Captcha</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
{{ Form::open(['method' => 'POST','class' => 'form-horizontal form-label-left']) }}
<br/>
<div class="form-group">
<label class="button-font">Captcha :</label>
<?php
// element attributes
$attributes = [
'data-theme' => 'light',
];
?>
{!! Form::captcha($attributes) !!}
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Submit</button>
</div>
{{ Form::close() }}
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@include('sweet::alert')
</body>
</html>
Cara untuk menampilkan captchanya adalah dengan menggunakan kode berikut
<?php
// element attributes
$attributes = [
'data-theme' => 'light',
];
?>
{!! Form::captcha($attributes) !!}
Untuk attributes apa saja yang bisa anda gunakan dapat anda lihat pada gambar di bawah ini
Dan biasanya yang saya gunakan hanya data-theme dan data-size saja. Sedangkan untuk attributes lainnya sampai saat ini tidak pernah saya coba dan gunakan.
Setelah selesai dengan membuat formnya sekarang yang dilakukan adalah membuat validasi dari capcha tersebut. Berikut ini adalah kode dari action submit sesuai dengan route yang telah kita buat sebelumnya
public function submit(Request $request){
$rules = ['g-recaptcha-response' => 'required|captcha'];
$validator = Validator::make(Input::all(), $rules);
if ($validator->fails())
{
echo '<p style="color: #ff0000;">Incorrect!</p>';
}
else
{
echo '<p style="color: #00ff30;">Matched :)</p>';
}
}
Cara validasinya masih sama dengan aritkel sebelumnya saat saya membahas mengenai capctha manual. Dan masih sama seperti sebelumnya kita menggunakan Validator dan Input jadi jangan lupa untuk menambahkan kode berikut pada file controller.
use Validator;
use Illuminate\Support\Facades\Input;
Demikianlah cara penggunaan dari google reCAPTCHA ini. Untuk pembuatan captcha manual dapat dibaca pada artikel sebelumnya
Baca juga:
Jika anda menemukan kesulitan saat menerapkan cara-cara di atas, silahkan gunakan fitur comment di bagian bawah. Saya biasanya selalu menjawab semua comment pertanyaan semampu saya walaupun mungkin bukan solusi bagi pertanyaan anda :). Selamat mencoba
Post a Comment
Post a Comment