Pada postingan kali ini saya akan membahas tentang Cara Memasang Google ReCaptcha pada Laravel, Google ReCaptcha biasanya digunakan pada aplikasi atau website yang tersedia fitur data collect seperti fitur login, register, contact us.
Apa itu Google ReCaptcha ?
Gооglе Rесарtсhа dapat mеlіndungі website аtаu арlіkаѕі dаrі penipuan dаn реnуаlаhgunааn tаnра menimbulkan gеѕеkаn раdа рrоgrаm. Recaptcha mеnggunаkаn аdvаnсеd risk analysis and аdарtіvе challenges untuk mеnсеgаh ѕоftwаrе (rоbоt) bеrbаhауа dаlаm aktivitas реnуаlаhgunааn wеbѕіtе аtаu арlіkаѕі. Dengan reCaptcha, ѕіtuѕ kіtа аkаn tеrhіndаr dаrі uѕеr bеrtіре robot (bukаn manusia). Karena dengan bеrhаѕіlnуа mеnуеlеѕаіkаn tantangan аtаu сhаlеngе gооglе rесарtсhа, uѕеr dараt tеruѕ lanjut menggunakan website аtаu aplikasi ѕереrtі аktіvіtаѕ mеlаkukаn реmbеlіаn, melihat hаlаmаn аtаu mеmbuаt akun dаn pengguna уаng tеrdеtеkѕі rоbоt (tіdаk bisa mеnуеlеѕаіkаn tantangan аtаu сhаllеngе) tidak аkаn bіѕа lаnjut dan аkаn dіblоkіr.
Tutorial Gооglе Rесарtсhа ini dapat digunakan pada versi laravel 6, laravel 7, laravel 8, dan laravel 9.
Langkah 1. Daftar Gооglе Rесарtсhа
Pada langkah ini kita perlu untuk mendaftar terlebih dahulu pada https://www.google.com/recaptcha/admin/create. Isi seperti pada contoh gambar dibawah ini, untuk label dan domain sesuaikan dengan punya kalian.
Setelah menyelesaikan proses daftar maka kita akan diberikakan Site Key dan Secret Key seperti gambar dibawah ini :
Langkah 2 : Buka file Contact Controller
Pada langkah ini kita akan lenjut ke aplikasi kita yang sudah ada, disini saya akan membuat contact us sebagai contoh kita. Kalian bisa buka controller yang sesuai dengan punya kalian.
public function send(Request $request)
{
$request->validate([
'subject' => 'required|string',
'name' => 'required|string',
'phone' => 'required|numeric',
'email' => 'required|email',
'message' => 'required',
]);
$token = $request->input('g-recaptcha-response');
if (strlen($token) > 0) {
$data = array(
'subject' => $request->subject,
'name' => $request->name,
'phone' => $request->phone,
'email' => $request->email,
'message' => $request->message,
);
Mail::to('isi dengan email ada)->send(new ContactUsMail($data));
return back()->with('success', 'Pesan anda sukses terkirim');
} else {
return back()->with('info', 'Centang reCAPTCHA dulu bosku!');
}
}Kodingan diatas digunakan untuk mengirim pesan, pertama kita validasi dulu untuk inputannya kemudian kita buat variabel $token dan isi dengan request input recaptcha setelah itu kita menggunakan if untuk melakukan pengecekan pada $token apabila google recapchanya belum di centang maka akan menuju ke else dan jika sudah di centang maka akan terkirim ke email kita.
Langkah 3. Buka File Contact.blade.php
Pada langkah ini kita akan pergi ke bagian frontend, halaman contact ini berisikan form untuk mengisi data yang akan dikirim.
<form action="{{ route('send') }}" method="POST" class="wpcf7-form">
@csrf
<p class="col-md-12 col-xs-12">
<input type="text" name="subject" class="wpcf7-form-control wpcf7-text @error('subject') is-invalid @enderror" placeholder="Subject *"
required value="{{ old('subject') }}" autofocus>
@error('subject')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</p>
<p class="col-md-6 col-xs-12">
<input type="text" name="name" class="wpcf7-form-control wpcf7-text @error('name') is-invalid @enderror" placeholder="Name *"
required value="{{ old('name}}">
@error('fname')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</p>
<p class="col-md-6 col-xs-12">
<input type="tel" name="phone" class="wpcf7-form-control wpcf7-text @error('phone') is-invalid @enderror"
placeholder="Phone Number *" required value="{{ old('phone') }}">
@error('phone')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</p>
<p class="col-md-6 col-xs-12">
<input type="email" name="email" class="wpcf7-form-control wpcf7-text @error('email') is-invalid @enderror"
placeholder="Your Email *" required value="{{ old('email') }}">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</p>
<p class="col-md-12 col-xs-12">
<textarea type="text" name="message" class="wpcf7-form-control @error('message') is-invalid @enderror"
placeholder="Your Message">{{ old('message') }}</textarea>
@error('message')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</p>
<div class="g-recaptcha" data-sitekey="ISI DENGAN DATA SITE KEY KALIAN"></div>
<p class="text-center">
<button class="octf-btn octf-btn-icon octf-btn-primary pull-right">Send Message<i
class="flaticon-right-arrow-1"></i></button>
</p>
</form>Pada bagian ini kalian cukup menyesuaikan saja dengan form punya kalian, yang perlu di perhatikan kalian harus tambahkan kode dibawah di bagian baris kodingan kalian agar Google ReCaptcha muncul.
<div class="g-recaptcha" data-sitekey="ISI DENGAN DATA SITE KEY KALIAN"></div>Setelah itu kita perlu tambahkan script api.js google recaptcha
<script src="https://www.google.com/recaptcha/api.js" async defer></script>Jika sudah semua silahkan jalankan aplikasi kalian, jika berhasil akan muncul seperti contoh dibawah ini :
Sekian dari saya semoga tutorial ini dapat bermanfaat untuk kalian, jika terdapat kendala atau error kalian bisa tinggalkan komentar pada kolom komentar dibawah ini.
Social Media