Implementasi Google reCAPTCHA pada Website dengan PHP

oleh pino · Agustus 4, 2016

5.00 avg. rating (96% score) - 2 votes

Implementasi Google reCAPTCHA pada Website dengan PHP. Halo para sobat tutorialweb.net, pada kesempatan kali ini akan saya share bagaimana cara implementasi atau cara membuat Google reCAPTCHA pada website sobat dengan PHP. reCAPTCHA sendiri adalah salah satu cara untuk mengamankan Form pada halaman website sobat agar tidak bisa di proses oleh Bot (mesin/software untuk memproses form secara otomatis), dengan kata lain reCAPTCHA ini berfungsi untuk membuktikan bahwa Form tersebut di isi manual oleh manusia.

Untuk mulai membuatnya, pastikan sobat sudah login dahulu email Gmail ya, jika belum silahkan Login, atau daftar jika belum punya. Kemudian silahkan kunjungi website Google reCAPTCHA di https://www.google.com/recaptcha/intro/index.html, maka sobat akan menemukan halaman seperti di bawah ini:

Klik saja pada bagian atas kanan tombol Get reCAPTCHA.

Lanjut sobat akan menemukan halaman registrasi seperti pada gambar di bawah ini:

Masukkan Label untuk namanya, bisa bebas. Disini di isi local.app

Untuk Domain karena saya buatnya di localhost, maka saya masukkan localhost, jika sobat buatnya online, masukkan domain sobat.

Centang pada bagian Send alert to owners. Dan klik Register.

Jika berhasil maka sobat akan mendapatkan beberapa informasi yang akan dimasukkan kedalam kode yang akan kita buat nantinya, seperti pada gambar di bawah ini sob:

Nah, terlihat pada gambar di atas ada kotak warna warni, ini nantinya yang akan dimasukkan ke dalam kode yang akan kita buat.

Oke, sekarang kita mulai untuk membuat kode untuk Form nya, saya buat sederhana saja ya, dan Form ini sudah menggunakan Bootstrap.

Silahkan buat file baru dengan nama index.php, kemudian ketikkan kode di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>TUTORIALWEB.NET | reCAPTCHA</title>
	<!-- Link untuk Bootstrap, jadi harus online ya :) -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<style>
		.g-recaptcha {
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-6">
				<h3>Daftar</h3>
				<hr>
				<form action="daftar.php" method="post" autocomplete="off">
					<div class="form-group">
						<label for="email">Email</label>
						<input type="email" name="email" class="form-control" id="email" placeholder="anda@domain.com" required>
					</div>
					<!-- Div di bawah ini untuk menampilkan reCAPTCHA nya. Pada gambar diatas masukkan yang ada di kotak biru -->
					<div class="g-recaptcha" data-sitekey="6Lf7WCUTAAAAANJ2ZMQ1Xvum9wXMo_6tGcl_rYej"></div>
					<input type="submit" name="submit" value="Daftar" class="btn btn-primary">
				</form>
			</div>
		</div>
	</div>
	<!-- Link javascript untuk api reCAPTCHA, pada gambar di atas masukkan pada kotak warna merah -->
	<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>TUTORIALWEB.NET | reCAPTCHA</title>

<style>

.g-recaptcha {

margin-bottom: 10px;

}

</style>

</head>

<body>

<h3>Daftar</h3>

<hr>

<label for="email">Email</label>

</div>

</form>

</div>

</body>

</html>

Untuk penjelasan kode sudah saya masukkan ya, bisa di baca didalam kodenya.

Selanjutnya, kita buat file untuk memproses Form nya, buat file daftar.php dan masukkan kode di bawah ini:

<?php
if(isset($_POST['submit'])){
	$email			= $_POST['email'];
	$captcha		= $_POST['g-recaptcha-response'];
	//di bawah ini silahkan masukkan pada gambar di atas pada kotak hijau
	$secretKey		= "6Lf7WCUTAAAAAGJzZ-U_aPv5GiGLEOExXDFpI_PM";
	$ip 			= $_SERVER['REMOTE_ADDR'];
	$response		= file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
	$responseKeys	= json_decode($response,true);
	if(intval($responseKeys["success"]) !== 1) {
		//pesan jika reCAPTCHA tidak di centang
		echo '<h2>Helloo... Spam detected... :(</h2>';
	}else{
		//pesan jika reCAPTCHA berhasil
		//masukkan script pendaftaran di sini
		echo '<h2>Oke! Anda benar-benar Manusia biasa... :)</h2>';
	}
}
?>

<?php

if(isset($_POST['submit'])){

$email = $_POST['email'];

$captcha = $_POST['g-recaptcha-response'];

//di bawah ini silahkan masukkan pada gambar di atas pada kotak hijau

$secretKey = "6Lf7WCUTAAAAAGJzZ-U_aPv5GiGLEOExXDFpI_PM";

$ip = $_SERVER['REMOTE_ADDR'];

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);

$responseKeys = json_decode($response,true);

if(intval($responseKeys["success"]) !== 1) {

//pesan jika reCAPTCHA tidak di centang

echo '<h2>Helloo... Spam detected... :(</h2>';

}else{

//pesan jika reCAPTCHA berhasil

//masukkan script pendaftaran di sini

echo '<h2>Oke! Anda benar-benar Manusia biasa... :)</h2>';

}

Kode juga sama sudah ada di dalamnya.

Silahkan coba sob, gampang banget kok.

Oke sob, saya rasa udah cukup untuk tutorialnya, jika ada pertanyaan bisa tinggalkan komentar atau kirim aja pesan ke saya.

Makasih sudah mau berkunjung…

meitri berkata:

Januari 14, 2017 pukul 10:41 am

agak sedikit bingung mas, kalau di buatkan video tutorialnya mungkin saya bisa lebih paham. hehehe

Balas
- pino berkata:
  
  Januari 14, 2017 pukul 1:31 pm
  
  gampang kok gan….
  video menyusul.. heheheh..
  
  Balas
Emanuelpras berkata:

Februari 10, 2017 pukul 11:11 am

gan itu di form daftar.php variabel email gak dipakai ya?

Balas
- pino berkata:
  
  Februari 11, 2017 pukul 3:25 pm
  
  hanya untuk pemanis gan. intinya hanya mengetes recaptcha nya aja.
  
  Balas