reCAPTCHA v2 Client-Server Implementation With Node.js

[Music] hey what's going on guys so I've had a couple requests to do a video on Google's reCAPTCHA version two so what we're gonna do here is we're gonna implement a client-server implementation of reCAPTCHA okay we're gonna use nodejs for our server and we're just gonna have a form on the front end that enables the reCAPTCHA if you guys don't know what i'm talking about it's this where is it right here this I'm not a robot thing and sometimes you'll have the boxes where you have to choose like the street signs and stuff so I'm gonna show you how to implement that all right now the actual form isn't gonna do anything beyond that if we want to take what you learn in this video and apply it to my node mail or video where we create a contact form you can do that but I did want to just keep this separate from that so first thing you're gonna want to do is go to google.com slash reCAPTCHA and just click on this this button right here okay you're gonna need a site key and a server key so that's what we're signing up for right here so let's give this a label I'm just gonna call this localhost we're gonna choose reCAPTCHA version two and four domains I'm just gonna put in localhost okay if you're using this on a production server you want to make sure you put your domain name in there or it won't work so let's click register and now you'll see we get a site key and we get a secret key and we have some instructions down here now before we get to the form and the client side we're gonna go ahead and create our server so let's go ahead and minimize that and I'm in my Visual Studio code here I have an empty folder called reCAPTCHA node and just clear this out and we're gonna go ahead and run NPM init make sure you have no js' installed all right so let's go ahead and go through this name that's fine version we don't need a description the entry point I'm gonna call server dot J s and we'll just go through the rest all right so now we have our package dot jacent filed now there's a few modules that we're gonna need to install so let's say npm install - - save we're going to install Express to handle routes we're going to install something called requests because we need to once we get the CAPTCHA access token or whatever it is the big string that that it gives you we need to then send that to Google's verify URL okay and then we'll get the response back so we're using requests for that we also need body part sources so that we can get the form data all right make sure you do - - save what happen and then want that slash there all right so let's run that so now that we have that setup let's go ahead and create our server JS file server J s and we're gonna bring in Express so we're gonna say require Express I may do a PHP version on this - let's do body parser alright let's bring in request alright and I apologize if you hear any banging upstairs it is the weekend so my family's home and they're pretty freaking loud so now we need to initialize Express so we're gonna say Const app equals Express and in order to use body parser we need to add two lines of middleware so we're gonna say app dot use and let's pass in here body parser dot URL encoded if you use vs code you'll get these little pop ups and we're gonna put in here extended or yeah extended actually this needs to be an object so we need our curly braces and then extended and we're going to set that to false and then we need one more line which will be app dot use body parser dot jason okay so that's our body posture middleware now we're going to create a route that's going to load our client index file our index.html file so we'll say apt-get and it's gonna be the index route okay you can put a call back here I'm gonna use an arrow function and use es6 and here we need a request and response and then all we're gonna do here is load an index.html file so we can say res dot send file and we want the current directory so we'll say double underscore dur name and that we just want to concatenate slash index dot HTML all right so now when we go to our localhost it should load the the HTML file all right so now let's say app dot listen we want to listen on a port we'll say three thousand and then I'm just gonna put an arrow function as a second parameter and we'll say console dot log and it'll just say server started on port 3000 alright so now we should be able to run node server since we named it server j/s and it started up alright so now let's go ahead and snap this over here and we'll go to HTTP on just got a localhost 3000 ah no such file directory what I do here res dot send file to her name all adding creates and create the index.html so let's go ahead and do that and we'll just put some basic HTML tags in here using Emmet and let's say subscribe form and we'll just say hello let's save now we're gonna have to restart the server and reload and we get our index.html file alright so I actually I'm going to use node Mon which is a module that will watch our application so that we don't have to keep restarting it so I usually use it globally so if you want to do that you can say NPM install - G node Mon alright and then instead of running your you know node server we can just run node Mon and we won't have to keep restarting it all right so that's our HTML file now before we do the client form and all that stuff we're gonna finish this server so we're gonna want to make a post request and we're gonna we're gonna submit the form using the fetch API all right now you can use jQuery or you can use just you know Ajax xhr or Axios or anything like that we're gonna use the fetch API to actually make the request to the server but we're gonna make a request to slash subscribe so let's go ahead and add a route for that so this is gonna be a post request we're gonna make and it's gonna be to slash subscribe we'll say it's like an email subscribe form alright so let's put our arrow function and this will take in requests and response and what we're gonna do is we're going to check to see if the CAPTCHA is that if it's undefined or if it's just an empty string or if it's null okay if it's any of those things we want to return a success false error okay basically we're just returning JSON objects so let's say if and I'm going to put this on multiple lines because we're gonna check for a few things we're going to say if request body dot CAPTCHA is equal to undefined or request dot body dot captcha is equal to nothing or request body dot captcha is equal to null then what do we want to do we want to return res dot Jason and we're gonna pass in an object and you can return whatever you want we're going to return success which is going to be false okay and we'll also send the message with that so we'll put in will say msg and then our message will just say please select captcha okay so that takes care of that if it's actually if it's not checked then what we need to do is we need to define our secret key so under the if statement here put our secret key let's create a variable call it secret key and we're going to grab this from here okay so right here make sure it's a secret key not the site key the site key goes on the client so we'll paste that in I'm just gonna close this up all right so now we have that and we're also gonna need the Google's the verify URL that we need to make their request to so let's create a variable here called verify URL all right now this I'm going to set to a template string so I'm going to use back ticks instead of single quotes and this is going to be HTTP and it's going to be google.com slash reCAPTCHA / api / site verify and then we're going to put on some parameters so we want a question mark I'm going to say secret equals and then we're going to put in the variable here so we want to use this this is es6 syntax using a money sign and then the curly braces and then this is where we're going to put our secret key that we have right here all right so we're going to pop that in there so we have our secret key then we want another parameter so we're going to put an ampersand and this is gonna be the response we're gonna set this to a variable and it's going to be this it's gonna be the value of the captcha so it's gonna be request body dot captcha alright and then we're gonna add one more parameter so another ampersand we're gonna say remote IP equals and we can get this let's use a variable we can get this with a request dot connection dot remote address all right so that's our verify URL string now what we want to do now that we've constructed that is we want to make our request to it so say make request to verify URL and we're going to do that using that request module that we installed so we're going to say request we're going to pass in our verify URL and then that's going to give us back let's put an arrow function here get rid of that so that's gonna give us back error response and body okay and then what we're going to do is we're gonna take that body that it gives us and we're gonna just parse it as Jason I'm gonna say Jason dot parse and then pass in body all right so now what we want to do is check this body so we're gonna do an if statement what this will be if not successful oh all right so if not successful then we're going to basically return an object that says success Falls just like we did up here with a message so we'll say if body if body dot success is not equal to undefined and not body success alright so if this is true then it's not a successful CAPTCHA so we want to return actually we'll just copy what we did up here okay well so we'll paste that in and we'll paste the message here and we'll say failed CAPTCHA verification okay and then we're gonna go under that if statement and that means if that didn't if that didn't run then we're successful so we'll say if success or if successful then we want to also return an object but it we're going to say success true and then we'll set a message and we'll say CAPTCHA passed okay and that's it that should do it for our server so let's save that now I'm there may be some errors here I don't know we'll know when we actually do the testing so now we're going to go to our index.html and I'm gonna use bootstrap so let's go ahead and go to get bootstrap just to make this form look a little better we'll grab the CDN right here and just paste that in alright now we're also gonna need if we go back to our reCAPTCHA settings here I think I have to make this bigger so we're gonna need this script tag right here which points to google.com reCAPTCHA API dot j s that needs to go in the head so I'm going to put that right here and then this right here is the actual reCAPTCHA okay that's the actual checkbox thing we're gonna we're gonna put that in in a second but what I want to do is just paste in a form I don't want to waste time typing in a form you guys you know should know what a form is so let's go ahead and paste this in and basically we just have a container we're using bootstrap we have a form as an ID of subscribed form and then we have some fields just a name and an email the hell is that - doing there but the each field has a name and an ID okay and then we just have our submit so let's save that let's reload and there's our form now to add the CAPTCHA what we want to do is go back to here and we want to grab this okay we're gonna put this right above the input the submit button we're actually going to put it in a form group Dib div just to add that spacing okay your your site key will obviously be different and let's save it let's go back and there it is alright so we need to submit this form using Ajax or we're gonna use the fetch API so let's go down to the bottom here and put in some script tags okay and we're gonna have to add an event listener for this form submission so and you could use jQuery if you want but I'm gonna use vanilla JavaScript I've been trying to stay away from jQuery like most developers let me just fix this real quick just format that up alright so in here we're gonna say document dot get element by D the form has an ID of what was it subscribed form and we're gonna say dot add event listener and we want to listen for a submit event and then we're gonna call a function called submit form all right so let's go ahead and create that function submit form and since it's a submit event we need to pass in an event object and we need to say e dot prevent default and that'll prevent the actual submission to a file all right so let's just test this out real quick we'll say console.log one two three let's open up our client-side console and let's reload this and submit and we get one two three okay so let's go ahead and clear this out and what we want to do is catch the form fields we want the name the email and the CAPTCHA so we're going to say Const name equals document dot let's use query selector okay and it has an ID of name and we want the value all right now I'm just going to copy this and we want the email so that'll be the ID of email and then we want the CAPTCHA now this we're actually going to be using an ID of G - reCAPTCHA - response okay and notice that it that's not actually included in the div but this is just part of the API so this is what you need to use that actually got me stuck for a while trying to figure that out alright so now that we have these fields we want to use fetch so let's say fetch and here we want the route that we want to post to which is going to be slash subscribe on our server alright so we're also going to pass in an object and we want to specify that this is going to be a post request okay it's gonna be a post request and then we want headers that's going to be an object and we just want to specify headers acept and we're gonna set this to application slash jason and also we put a comma and then we'll say text slash plain another comma and we'll say asterisk slash asterisk alright and then after that quote single quote we're gonna put a comma and then we want to put the content type whoops should be single quotes or double quotes and we'll say content - type and we want to set this to application slash Jason all right so that's the headers and then we just want to put the body this is what's going to include the actual fields we're gonna say body and I'm gonna run this through Jason dot stringify we don't want that and then we're gonna pass in an object with the name which will equal the name the email which will have the email and the CAPTCHA which will have the CAPTCHA all right and all these variables are coming from these right here so we're just sending this stuff in the body with the request alright so the way that fetch works is it gives us a promise so we're gonna say dot let's go on the next line we're gonna say dot then and we have to take the response we have to take the response I'm gonna put another set of parentheses and say res and then we're gonna set that to res dot jason like that and then we need to do another dot then I know it's a little weird but that's that's what we need to do and here we're going to get the actual data so we'll put in parentheses data we'll use an arrow function and then you're gonna do whatever you want with the data so I just want to log it and that should do it so let's save this alright let's go ahead and let's just refresh this whole page and first thing I'm going to do is I'm just gonna put whatever in here and then not check it let's click Submit so we get back our response which which is success false message please select CAPTCHA all right and you can do whatever you want with this if you want to one thing you may want to do is maybe doing alerts and say let's see we could say data yeah say data dot message or data msg all right so if we go ahead and we submit and say please select CAPTCHA now that's not a very elegant way of doing it you may want to put in a div and have a nice little alert up here but you know I'm not gonna get into that so let's go ahead and try to actually submit it put in whatever it doesn't matter we'll check that off all right now sometimes it doesn't doesn't show these boxes I think the reason it's doing it for me is because I've during development I've submitted it so many times because the first few times that I did it it didn't actually show these boxes so I'm not exactly sure how that works but we're gonna go ahead and just do this click Next let's see once the vehicles looks like that's a vehicle I don't know is it vehicles up there some of these are pretty tough let's verify okay so we get the little check here and let's submit and we get failed CAPTCHA verification all right so that actually shouldn't have happened so what we're gonna do is we're gonna go where we make this request and we get the body back we're gonna console.log the body and see what that gives us so let's go ahead and reload this and we'll just check this off vehicles vehicles verify submit all right so failed CAPTCHA all right so over here the we're getting missing input response missing input response so let's see let's actually search for that so search for a missing input response and verifying the user response this page explains response so we sent the secret so if we look at the verify URL we have the secret response and always spelt response wrong there's no s that should be it that makes perfect sense it's not it didn't it's not getting the CAPTCHA to the verify URL all right so hopefully that fixes it so let's go ahead and reload that let's try it again so street signs whoops let's click next god she's allowed up there street signs so I guess we want those verify submit there we go CAPTCHA past's all right cool so I mean you can decide what you want to do when it passes you know we're just we're just alerting it and of course if you're doing something on the server side I mean you know if it's successful then you could move on to you know send the email I mean that's what you if you're gonna implement this with the node mail or tutorial I did you're gonna say if it's successful then send the email used node mailer or if you are entering something into a database you want to then do that here anything that you want when it's successful all right so hopefully this gives you guys a little bit of insight on how to use this on the client and the server side and that's it thanks for watching

Channel: Traversy Media

Views: 46,915

Keywords: recaptcha, recaptcha v2, recaptcha2, google recaptcha, node.js recaptcha

Id: UzCkSzmEq8E

Length: 25min 33sec (1533 seconds)

Published: Sat Sep 23 2017