Home / laravel / php / programming / Tutorial Laravel 5.5 - Membuat Captcha dengan Google reCAPTCHA

Tutorial Laravel 5.5 - Membuat Captcha dengan Google reCAPTCHA

, ,

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
Tutorial Laravel 5.5 - Membuat Captcha dengan Google reCAPTCHA Tutorial Laravel 5.5 - Membuat Captcha dengan Google reCAPTCHA Reviewed by Donny Winarto on March 02, 2019 Rating: 5

You May Also Like

1 comment:

  1. Rai VinsmokeJune 13, 2019 at 6:46 AM

    ingin mendapatkan uang banyak dengan cara cepat ayo segera bergabung dengan kami di f4n5p0k3r
    Promo Fans**poker saat ini :
    - Bonus Freechips 5.000 - 10.000 setiap hari (1 hari dibagikan 1 kali) hanya dengan minimal deposit 50.000 dan minimal deposit 100.000 ke atas
    - Bonus Cashback 0.5% dibagikan Setiap Senin
    - Bonus Referal 20% Seumur Hidup dibagikan Setiap Kamis
    Ayo di tunggu apa lagi Segera bergabung ya, di tunggu lo ^.^

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.