How to Add Google ReCaptcha

Submitted by nurhodelta_17 on Wednesday, April 11, 2018 - 21:27.

Creating our App

First step is to create our App or registering our App in the reCaptcha Admin Page of your Google Account. 1. Go to reCaptcha Admin Page and login with your Google Account. 2. On the Register a new site form, enter the ff values.
Field Value Explaination
Label localhost We put localhost since we're using this server for development
Choose the type of reCAPTCHA reCAPTCHA v2 This is what we are using
Domains localhost 127.0.0.1 This is so we can use recaptcha in any localhost development
google recaptcha form localhost 3. Dont forget to Accept the reCaptcha Terms and Service and click Register button. 4. After a successful register, you will be redirected to the page on "How to integrate reCaptcha". Take note of your App's sitekey and secret key.

Integrating reCaptcha to our Application

First, we create the form where we want to put our recaptcha. In this tutorial, I wont be adding any more fields in the form except the recaptcha field. Create a new file, name it as index.php and paste the codes below. 
  1. <?php session_start(); ?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. 	<meta charset="utf-8">
  6. 	<title>How to Add Google ReCaptcha</title>
  7. 	<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  8. 	<script src='https://www.google.com/recaptcha/api.js'></script>
  9. 	<style type="text/css">
  10. 		.mt20{
  11. 			margin-top:20px;
  12. 		}
  13. 		.mt10{
  14. 			margin-top:10px;
  15. 		}
  16. 	</style>
  17. </head>
  18. <body>
  19. <div class="container">
  20. 	<h1 class="text-center mt20">How to Add Google reCaptcha</h1>
  21. 	<hr>
  22. 	<div class="row justify-content-md-center">
  23. 		<div class="col-sm-5">
  24. 			<?php
  25. 				if(isset($_SESSION['error'])){
  26. 					echo "
  27. 						<div class='alert alert-danger text-center'>
  28. 							".$_SESSION['error']."
  29. 						</div>
  30. 					";
  31. 					unset($_SESSION['error']);
  32. 				}
  33.  
  34. 				if(isset($_SESSION['success'])){
  35. 					echo "
  36. 						<div class='alert alert-success text-center'>
  37. 							".$_SESSION['success']."
  38. 						</div>
  39. 					";
  40. 					unset($_SESSION['success']);
  41. 				}
  42. 			?>
  43. 			<form method="POST" action="submit.php">
  44. 				<div class="g-recaptcha" data-sitekey="6LevO1IUAAAAAFX5PpmtEoCxwae-I8cCQrbhTfM6"></div>
  45. 				<button type="submit" class="btn btn-primary mt10" name="submit">Submit</button>
  46. 			</form>
  47. 		</div>
  48. 	</div>
  49. </div>
  50. </body>
  51. </html>
Notice that our recaptcha field contains sitekey="6LevO1IUAAAAAFX5PpmtEoCxwae-I8cCQrbhTfM6". This is where you put the sitekey of your created app.

Submitting the reCaptcha Form

Lastly, we create the script if the visitor submitted the form and to check whether he correctly answers the recaptcha. Create a new file, name it as submit.php and paste the codes below. 
  1. <?php
  2. 	session_start();
  3.  
  4. 	if(isset($_POST['submit'])){
  5. 		if (isset($_POST['g-recaptcha-response'])) {
  6. 			require('recaptcha/src/autoload.php');		
  7. 			$recaptcha = new \ReCaptcha\ReCaptcha('6LevO1IUAAAAAFCCiOHERRXjh3VrHa5oywciMKcw', new \ReCaptcha\RequestMethod\SocketPost());
  8. 			$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  9. 			  	if (!$resp->isSuccess()){
  10. 			  		$_SESSION['error'] = 'Please answer recaptcha correctly';			
  11. 			  	}	
  12. 			  	else{
  13. 			  		$_SESSION['success'] = 'Captcha Verified User';
  14. 			  	}
  15. 		}
  16. 		else{
  17. 			$_SESSION['error'] = 'Please verify that you are human';
  18. 		}
  19. 	}
  20.  
  21. 	header('location:index.php');
  22.  
  23. ?>
Note: The recaptcha autoload.php is included in the downloadable of this tutorial. That ends this tutorial. Happy Coding :)

Tags

Add new comment

About text formats
  • 596 views