Memasang Google Captcha pada PHP

Captcha ini singkatan dari Completely Automated Public Turing test to tell Computers and Humans Apart. Biasanya dalam membuat suatu form login ataupun registrasi, Kita membutuhkan suatu keamanan agar form tersebut hanya bisa digunakan dengan interaksi manusia saja. Hal ini utuk menghindari dari bentuk interaksi yang dilakukan oleh BOT.

Pada tutorial kali ini, Kita akan mempelajari bagaimana cara memasang captcha yang telah disediakan oleh Google dengan nama Google reCaptcha. Dan kali ini kita akan memasangnya pada form login menggunakan V2 Google reCaptcha. Hal yang perlu dilakukan adalah :

1. Mendapatkan Site Key dan Secret Key
   Site Key dan Secret Key ini dibutuhkan dalam pemasangan Google reCapctha sebagai kode autentikasi. Pembaca bisa mendapatkannya di halaman ini dan berikut cara mendaftarkannya.
   • Buka link pada link ini dan isikan form seperti di bawah ini.

     

     • Nomer 1, isikan nama label sebagai penamaan kode ini yang mempermudah Anda menemukannya
     • Nomor 2, pilih reCaptcha V2 dan jenis captcha “I’m not a robot” Checkbox sebagai tutorial kali ini
     • Nomer 3, isikan nama domain Anda. Apabila sedang dalam development dan biasanya dilakukan di localhost, isikan localhost atau alamat lainnya. Bisa lebih dari satu.
     • Nomer 4, email login gmail otomatis Anda, bis juga Anda tambahkan.
     • Nomer 5, check list kotak ToS tersebut.
     • Kemudian submit. Maka Anda akan mendapatkan Site Key dan Secret Key untuk menampilkan Google reCaptcha di web Anda.
       

      

2. Mulai menginputkan codingan. Salah satu codingan yang cukup simple adalah sebagai berikut. Buat file dengan nama index.php dan copy codingan berikut :

     
   <script src="https://www.google.com/recaptcha/api.js"></script>
   <form action="login.php" method="POST" autocomplete="off">
    <div class="form-group">
     <label for="username" class="sr-only">Email</label>
     <input type="text" name="username" id="username" class="form-control" placeholder="Username">
    </div>
    <div class="form-group mb-4">
     <label for="password" class="sr-only">Password</label>
     <input type="password" name="password" id="password" class="form-control" placeholder="***********">
    </div>
    <div class="g-recaptcha" data-sitekey="site_key_yang_didapat" style="transform:scale(0.90);transform-origin:0 0;"></div>
    <button type="submit" class="btn btn-block login-btn mb-4">Login</button>
   </form>
    

   Terdapat beberapa baris coding yang perlu diperhatikan. Diantaranya adalah :

   •  
     <script src="https://www.google.com/recaptcha/api.js"></script>
      
     

     Baris script di atas adalah API yang berfungsi untuk mengambil file javascript untuk meload captcha dari google. Wajib untuk dituliskan.

   •  
     <div class="g-recaptcha" data-sitekey="site_key_yang_didapat"></div>
      

     Sedangkan baris di atas juga wajib dituliskan untuk menampilkan UI Google reCaptcha dan jangan lupa untuk menuliskan site key yang sudah didapatkan pada nomer 1 di atas.

3. Setelah file index.php di atas telah selesai, sekarang kita akan membuat file proses.php yang berfungsi sebagai proses autentifikasi code captcha dari halaman index.php. Berikut adalah isi dari file proses.php
   

    
   $user = $_POST['username'];
   $pw = $_POST['password']
   
   $secret_key = "secret_key_Anda";
   
   $verify = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response']);
   $response = json_decode($verify);
   
   if($response->success){ // Jika proses validasi captcha berhasil
        echo "captcha valid";
   }else{ // Jika captcha gagal
        echo "captcha invalid";
   }
    
   

   Pada code di atas, yang perlu diperhatikan adalah baris $secret_key. Silahkan diisi sesuai dengan secret key yang telah di dapat pada  nomer 1 di atas.