reCaptcha API Tutorial, Install Google's reCAPTCHA - Add Captcha to Your site's forms, slow the spam

if you're a fan of robots it's probably not the robots that abused the forms on your website in this video I'm going to show you how to use the reCAPTCHA api to secure the forms on your website the reCAPTCHA api is pretty simple to use and it really helps cut down the number of spam submissions that you get on your forms so let's get started on showing you how to implement that into the forms on your website so here on the idea Pro example site we're going to create a blank page this is a wordpress site but we're actually going to use just a page just a regular HTML page for the site so here in sublime text editor which is what I use I'm going to create a new page and I'm going to call it test dot PHP and we're going to put it in the root of idea Pro slash example so test dot PHP and so then we'll just go here to example test dot PHP all right so this is the page that we've created so now we're going to create a simple form so method is equal to post action and we're going to leave that blank for right now so if you leave that action blank it will actually submit to the same page that you're on now this is not recommended for production use because this is actual an HTML error so you want to have it submit to something and we can talk about that in a few minutes so here in the forum we're going to create an input field and we're going to do this as simple as possible so we're just going to say your name right and so let's create another one input type is equal to text name is equal to email all right and then here we need an input type is equal to submit name is equal to we're gonna say submit form and then the value is equal to whoops submit your information all right so this has our basic form so if we save this refresh there's no styling so it's very very simple we'll add a little bit of style to it let's say placeholder is equal to your name and then whoops placeholder is equal to your email address and we will just have a break to it actually I had too bright just to give it a little bit of spacing between each one all right now this is a really basic form your name email address and submit your information now you can hit submit it doesn't do anything I mean it refreshes the page basically is what it all it does so now we're actually going to do something with this so here whoops so here with PHP we can capture the post because we're doing a post here if this was an active this was get we we would use the get method so we're going to if array key exists and we're going to use this here submit form submit form in the post we're going to actually do something now the reason why we want to use array key exists is because if we just say if dollar sign underscore post form so if we do like this if we say if dollar sign underscore post and in the post array is submit form oops is equal to submit your I spelled it wrong submit your information this would do the same thing but this is actually we're saying that form definitely every time this page loads the post exists and submit form exists in it so we're not going to use that we're going to use if RA exists submit form so the irate key this key is submit form and it's in the post so if a reiki exists submit form in the post we're going to echo out the post and so what I did here is these are the pre tags and here in the middle is a print R which prints out the array so we're gonna save this now we're gonna go back here and we're gonna put in the name email address and submit information so now we've submitted the form and it gives us back your name email in submit form so now what we want to do is we want to actually do something with this information but we're not going to worry about that in this video this video is just to show you how to use the Google reCAPTCHA API okay so here on this page which is google.com slash reCAPTCHA and you can search for that in google you'll want to sign in with with a Google account that you have so we've not added anything to this account so we're going to actually register a new site so we're going to say idea pro example recapture version 2 and then down here we're just going to say idea procom that's really all we need to put in here for the domains and you need to use your domain so we accept the recapture Terms of Service send alerts to owners so you can leave that on so that you know how many people have submitted and how many successful or you know or unsuccessful and so then we're going to say register so now it's going to tell us here's our analytics request passed and failed sessions completed spam index you know this will be information that you'll use later on once that you've been using it for a while so here we've got keys we've got a site key and a secret key and I'll explain these in just a second client-side integration so this is what we'll be pasting into our form and I'll show you that in just second now right down here is the server-side integration and I'll explain this as as we go through so if ski settings if you come down here this is the key settings so we've got the label we can change the label we can add domains the owners are Joshua her person gmail.com that's my email address and I can add in owners on a different line that want notifications and then down here there's Advanced Settings and a lot of people miss this setting so what this is is you open up Advanced Settings and this is the security preference so there's easiest for users all the way to most secure so if you slide it all the way over here to most secure what's going to happen is is when someone goes to the site they click I'm not a robot it's actually going to show up like images where they have to say it says select the road signs and they have to pick all the pictures that have road signs in it I always start off with easiest for users if I see that of sites getting a lot of spam Eiling going back in here and increase this so that it limits the number of spams that we get so for especially for development I usually keep it on easiest for users and Save Changes all right so now we're gonna go back up here so we've got a site key and a secret key this site key is the public key that will be displayed to users so up here in PHP we're gonna say public key is equal to and we can pretty much do that and then we'll say private key is equal to and we'll go back here and we'll get this private key so we'll use that there so now we have the secret key and the private key here in our PHP so then we'll come down here and we'll grab this script tag so we'll go down here I'm gonna put it underneath the bottom and then this div here I usually put it right above the form submit button and so now this is the where the actual reCAPTCHA I'm not a robot information will show up now if you see data site key this is the key right here that's up here so we can take this out and replace it with the PHP variable we don't necessarily have to but if we ever change the key it keeps us from having to change it in the form we can just change it right up here now again I'm submitting this to the same page I recommend submitting it to a Thank You page or something like that you know thank you dot PHP and we create that page that says thank you for submitting the form but for this testing purpose and just to show you how this works I'm gonna leave it like this okay so now we're going to save this and now when we go back to our test dot PHP example now we have your name email address I'm not a robot and submit your information so if we submit this information without clicking I'm not a robot we get your name email recapture response submit form and so what this is is the GK recaps your response is what we're going to pass through to Google for them to validate the information if we click this that says I'm not a robot and we submit the information now we get this long response in the G capture response okay so from here we're gonna start using the information all right so we're gonna go back over to here and right down here it tells us the URL that we need to submit to so we're gonna copy this and I like putting everything into variables so we're going to put in a variable of URL and that's going to be a pretty simple variable so we've copied that we're going to put that variable in here okay so now it says secret response and remote IP now this is what we're going to pass through to the Google reCAPTCHA API so that we get a response from them so we're going to come down here and we're going to say dollar sign response is equal to file get contents now what that is is it's a function that's pre-built into PHP that basically sends out gets a response from the URL that we put in here and then it replies then we get the response back so the first thing we're going to do here is we're going to put in the URL and then I'm gonna make a couple of single quotes and then we're going to need the secret so oops so a questionmark secret is equal to dot and then we're going to put in private key dot and then and response equal to and that's this one here response response is equal to we're going to use the post that was submitted from reCAPTCHA so if we go back over here and we look at this recapture response this key here is going to go as the response key so here we can say response key is equal to dollar sign underscore post the reCAPTCHA response so response is equal to response key and then the last thing is the remote IP address that's the in user's IP address now that's not critical it's not required so this is just an option I always use it just to make sure and we'll pass through the remote IP equal to dot and then we're gonna use the server remote addr okay so now this file get contents response is going to submit to this URL which is the endpoint URL it's going to pass through the secret which is our private key it's going to pass through our response which is what came from the G reCAPTCHA little box here and then it's going to pass through a remote IP address and so then we're going to echo out the response okay so we're gonna go back over here and we're gonna say I'm not a robot and submit so now what we have is we've got our post up here that's this information that was passed through and then down here we actually have a JSON response and it says success is equal to true so now we can go in and we can tell it to do something with that response all right so the first thing we want to do is we're going to come up here and we're going to say response is equal to JSON decode response so now that we now what we've done is we've changed this from a JSON response to an array where it maybe have changed it to an object let's see so we're gonna go ahead and resubmit it submit okay so it saved it as an object okay so now what we're going to do is we're going to say yes whoops dollar sign response sports success is equal to 1 oops echo your information was valid we can actually do whatever we need to here to submit the form send it by email or whatever else you are oops you are a robot and we don't like robots okay we're actually going to turn off the echo up here and so now if we submit this without anything in it so let's go to let's put stuff in here and we're not gonna submit this we're gonna just hit submit you are a robot and we don't like robots so that says hey you didn't fill out what you're supposed to fill out so now we're gonna try it again now we're gonna say I'm not a robot submit the information and your information is valid so from there you can take this and you can add it to sending an email with the contents of what's going on you can do whatever needs to be done to finish out the form submission from there and we can show that in another video actually I want to build a plugin that is a form for your website using WordPress that way you can we'll walk through the process of building a simple form that's a plugin that you can use anywhere in your website and so whenever I build that hopefully will be pretty soon I'll link that video in the description and at the end of this video here so I hope that helps you build a use the reCAPTCHA api to help to secure your forms on your website be sure to hit the like button and subscribe to future videos and we'll see in the next one thanks

Channel: Joshua Herbison

Views: 32,763

Keywords: captcha code in php, captcha for php, captcha in php, captcha php, captcha php code, captcha php tutorial, contact form with captcha, easy captcha php, form captcha, free captcha, free captcha php, google recaptcha, php captcha, php captcha class, php captcha code, php captcha tutorial, php simple captcha, recaptcha, simple captcha code in php, simple captcha php, simple php captcha, wordpress captcha, recaptcha tutorial, recaptcha demo, recaptcha php, recaptcha example

Id: 2NfaBfu_ndc

Length: 18min 21sec (1101 seconds)

Published: Thu Aug 31 2017