Install Google reCAPTCHA v3

hey guys in this tutorial we will learn how to install the Google reCAPTCHA version 3 and you'll learn more about this recapture just go and google.com slash recapture and you'll be redirected to this page and east as you see on the right side they have it already installed here and it tells you that it's the page is protected by reCAPTCHA and the way it works this reCAPTCHA learns well it foul it follows all your users from your websites and it learns their behaviors and according to their behaviors it returns you a score now on the recap chip white here they have information and you can read more about this so interpreting interpreting the score it tells that recapture version 3 returns a score 1.0 is very likely a good interaction 0.0 is very likely a part based on this score you can take variable action in the context of your site every site is different but below are some examples of how sides used to score use the score as in the examples below take action behind the scenes instead of black and blocking traffic to better protect your site so here are the actions the examples there were 13 actions is the home page and this is what we will be using in this example they have also for the login the home page CEO handsome B of your traffic on the admin console while filtering scrape scrapers the logins with lost force and so on here below it something also important I wanted to mention that recaptured learns by seeing a real traffic on your site for this results course in a staging environment or soon after implementing may differ from production as recapture version 3 doesn't ever interrupt the user flow you can first run the recapture without taking action and then decide on thresholds by looking at your traffic in the admin console by default you can use at threshold of 0.5 so I have a quick demo here this is a form I have just one file index dot PHP and if I let me just refresh it and you see on the right side it does that it's protected by reCAPTCHA already install recapture this page now if I click on submit it tells me success I didn't even insert a name but it already is so that I'm not a robot so if I click Submit on more time it was me success but if i refresh this page because I have in the past met that are that the previous is the previous session and if i refresh it now click continue it tells me your robot you know if i refresh one more times keep in the output the same thing I have to click on more submit and these messages are being outputted here according according to the squirrel to this squirrel I'm using the 0.5 score here and this is what we will build in this video tutorial so to get started just go on google calm I have an over here go on google.com slash recapture and you will see this page is gonna redirect it this page now on the right side you have it there is a button my recapture button click on that button and here you want you register a new site I'm gonna use my local host and by the way let me actually delete everything I have here this is the index so they work I'll be working on the local host and your register a new site this is the label you wanna insert here anything it's just the name of your your project if we can say like that and I'm gonna put here pre-capture recapture version version 3 tutorial and here choose the recapture version 3 validate request with the score and then below here is I'm gonna use the local post and I'll insert here localhost if you use a domain or subdomain make sure you paste it there except the recaptured Terms of Service and send alerts and I don't want an alert click register and now you will get site key in the secret key and here are two steps you have to follow in order to install this air capture so let's go ahead and create our first file we will have just one file it's gonna be the index dot HP index dot PHP file and here we will start with an HTML page html5 and the title I'm gonna put reCAPTCHA version 3 and in the body section we will have a form form action it's gonna go on the same to the same file and then here we have the method post we close the form tag and here we will have a field input type text' name it's gonna be lame here we want to insert another input field it's gonna be input type text leave blank for the name and then another we are here and now here we'll have the input type submit and the veiling is gonna be submit let's save this one let's see what we have on localhost I'll refresh this one and now we see that we have a for perform with two fields okay now let's go back to our [Music] instructions there and it tells us that we have to paste this snippet before the closing head head tag on your HTML template so let's copy all this stuff it already has the I guess this is the side key yeah has the side key there before the head here let's paste it there and actually let's do something that's gonna make our job much easier here before our HTML tag we want we want to insert a PHP code and here we will define two variables for our side key and for the secret key so here we're gonna have side key and I'm gonna copy this one from here I'll paste it there and then we will have another variable which is gonna be the secret key there is the secret key here now we can move forward and here wherever we have the side key we can just delete that and insert the HP echo side key all right and let's go back to our instructions it also tells us to paste this snippet in the JavaScript callback or an action on your website so we will copy this JavaScript from here and we will paste it below our form and West we see already this is also this also has the side key and we will delete it side key this is less code usually do like that just because we don't have to have all these long lines and we go back a little bit there is the URL we have not where we have send the data so we send these data to Google the Google the text you know it detects the behavior it gets the behaviour of the user and then after that it returns a squirrel as you see here the secret key in the response so in our in our JavaScript in our JavaScript here by the way we have this input field here and that the name we want to insert this response name I'm gonna copy this and I'll paste it here the name and this is gonna be this is gonna have an ID as well and the idea is gonna be the same the same thing all right now here just to see verify the token to the server here we will have a console load to see what was the token to see if it works because this javascript is gonna is gonna output here and in our console log token and then using this token we will we will be able to detect if the user is a robot worried it's a human so I'm gonna save this file like that you go back and refresh and it looks like it already works here but for some reason I'll let me see let's check the console so we have this token in the console see if we get this token here now we want to insert this token in our field in this one in the second field from our form and to do that we shared will come in this console log and here we will insert document get element by ID and we will paste this ID from here like that and then we will have value it's equal to the token so we'll insert this token in this field now I'm gonna save this file and if I go back and refresh the page we see that it inserts that token in our field here now to make sure we can now detect if the user was it's a user or bad by submitting the form so after we submit before we will send some data in our throw the post method so here in our PHP tag we want to add some there's gonna be an if statement this one should be like that so we will have Eve if there is anything in our in the post method then we will have a variable which is in the post method actually here we want to create a function so we'll have a function get capture and here we will have the secret secret key okay and we will have a variable which is gonna be the response file get contents and here we will have the URL from if we click actually this this one from here this is the URL to where we will send all this data so Google will you know will process it and will return us as poor so we've got that URL and we will paste it here place it here like this and then now here we should insert the secret key so we will have secret and here we will have our PHP variable which is the secret secret key okay we will also have the response variable and this is gonna have the parameter which is the secret key all right and this one is to be like that okay now it's good now next here we will have to decode JSON because we will get a JSON response from Google now so we'll have another variable which is a return JSON decode and we will decode the response and then we will return the return variable now below this function we want we want the sign to assign this data we get from the JSON we want to assign it to another variable so we will have a variable outside of this function which is going to be returned and you will have get get capture and that's a parameter we will send host we will send this talking from here so using this name from the post method okay we assigned this one C so we get the session from our field from the second hill we get the token and after we submit it goes in into the post method and now we get it from the post method and call this function and we have this in this parameter as a parameter we have token and then we send you know all the stuff to to Google and then we get the response and we all all of this stuff we assign to the return and I will have another if here if return actually let's see we'll have a bar down here let's see what we have in our return variable let's save it let's see what we've got so refresh this page and if I click Submit contents and misspell this function it needs an underscore okay so now we see here we get the object that's the response from Google we have the success it's true challenged yes you know this is the date this is the hostname which is the localhost and then we've got the score which is 0.9 this is the core I was talking about the square I was talking about here see they say at one point zero is very likely a good interaction zero point zero is very likely a bot and then below here they say that the default by default we can use a threshold of 0.5 so we've got 0.9 now the action we didn't assert the action name and we should insert the homepage in our action main so let's open that soap on our file let's go back to our JavaScript here now javis came wherever we have action name we should pace the homepage and now we save it and then let's see let's go back and go back let's refresh this page so click Submit one more time and we see with we get the response from Google and then the action is home page and if i refresh now and continue the same thing you know we send the same session the same token as we had before but this token is changing every time we refresh the page so we sent an old token and we can see here the success we get false and then error codes you know totally false as timeout or duplicate so if we click Submit now one more time we send the current session and everything works well now this is just to show you what kind of response we get from Google and having this response and now we can manipulate with with it according with you the success status we can output message you know the form was submitted submitted were you are a robot so we have that if statement here and using the return now this return became an object so we have returned success sequel to true if the the return success success its equal to true and if the return score it's greater than 0.5 that means the user is a human so we can output echo success oops else we can output we can output your robot ok now we've got this in place let's save it let's go back to our page and let's refresh it and we get your robot because we I send an old session if I click submit now it tells me success you know think one more times in toast a success so the last step we should do now is just to hide just to hide this field so wherever we have the type text we make it hidden just refresh it on more time you know in certain anything here click Submit it tells us success if i refresh it with the same date i thoughts as your robot so we see it works and this is just one of the ways you can you can just attack the robots and from your website you can use it in the forms where you can use it everywhere your page and checking every time on everything checking this score by installing on this CAPTCHA on every page of your website which i think is if you could it would be a good technique and if there is anything you didn't understand guys just just feel free to leave a comment and i will do my best to help you out thank you very much for your attention let's see in the next tutorial

Channel: Vicode Media

Views: 133,536

Keywords: invisible recaptcha tutorial, recaptcha, captcha, tutorial, google recaptcha, integrate recaptcha, invisible recaptcha, recaptcha tutorial, install recaptcha, install invisible recaptcha, reCAPTCHA v3, JavaScript reCAPTCHA v3, JavaScript

Id: zGNH_lbpmm8

Length: 21min 48sec (1308 seconds)

Published: Tue Jan 01 2019