[JQUERY + PHP] Apply Recaptcha 2 On Your Website
[JQUERY + PHP] Use Recaptcha 2 On Your Website
In this tutorial, I want to show you how to apply Recaptcha 2 on your website step by step.
I. CREATE SIMPLE SIGN IN FORM
Code below is a simple sign in form using bootstrap 4 or you can use Materialize if you want. But I think bootstrap is the most popular framework now.
We have two fields (Username, Password) and a Submit Button here
<form>
<div class="form-group">
<label>Username</label>
<input class="form-control username" type="text"></input>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control password" type="password"></input>
</div>
<input class="btn btn-primary">Sign In</input>
</form>
II. ADD RECAPTCHA TO OUR FORM
Step 1 : Add recaptcha 2 script to our template
<script src='https://www.google.com/recaptcha/api.js'></script>
Step 2 : Add recaptcha field to our form
- Get captcha field template
<div class="g-recaptcha" data-sitekey="YOUR_KEY"></div> ---> you need to replace "YOUR_KEY" text to our recaptcha key
- Add it into our form
<form>
<div class="form-group">
<label>Username</label>
<input class="form-control username" type="text"></input>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control password" type="password"></input>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="YOUR_KEY"></div>
</div>
<input class="btn-signin btn btn-primary">Sign In</input>
</form>
III. HANDLE SIGN IN ACTION
Step 1 : Add Click Event For Sign In Button
- Here is just simple jQuery selector and apply click event for sign in button.
$('.btn-signin').on('click', function(){ });
Step 2 : Get Form Values
- Call value function to get real text value. Otherwise, you just get jQuery object array
var username = $('.username').val();
var password = $('.password').val();
Step 3 : Post It Into Our Server
$.ajax({
type: 'POST',
url: 'Signin.php',
data: {
username: username,
password: password,
captcha: grecaptcha.getResponse() -> important !!!! -> Captcha information
}
})
Step 4 : Verify In Server
Here is my sample code for server validation
- Get data values (Username, Password, Captcha) from Post Request.
- Create captcha validation url.
- Make a request and get validation result.
<?php
$secret = 'YOUR_SECRET'; ---> Replace Your Secret Key Here.
$response = $_POST['captcha'] ---> Get Captcha.
$username = stripslashes($_POST['username ']) ---> Get Username;
$password= stripslashes($_POST['password']) ---> Get Password;
$urlVerify= file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret= {$secret}&response={$response}') ---> Request to google captcha validation and get captcha result;
$result=json_decode($urlVerify) ---> Decode result to JSON object;
if ($result->success==true) {
// HANDLE SUCCESS HERE
}
?>
Then, you have it now.
Feel free to comment any questions and I'll reply you as soon as possible.... :D
Nice post
You are upvoted by me and I'm following you.
Please visit my blog and upvote and follow me.
I will do the same for your each vote.thanx
Thank you
Followed
This post received a 4.5% upvote from @randowhale thanks to @vominhquoc! For more information, click here!
@vominhquoc got you a $0.43 @minnowbooster upgoat, nice! (Image: pixabay.com)
Want a boost? Click here to read more!