reCAPTCHA with Laravel
This episode is for members only

Sign up to access "reCAPTCHA with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
03. Getting the reCAPTCHA token

Episodes

0%
Your progress
  • Total: 49m
  • Played: 0m
  • Remaining: 49m
Join or sign in to track your progress

Transcript

00:00
OK. So let's hook into this form so when we submit it,
00:03
we perform an action. So we'll head straight over to the form here. And the convention when we're working with something like Alpine is just
00:10
to pull each attribute within this element down onto a new line, just so we can read what we're doing a little bit better. So we want to go ahead and initialize
00:18
this form as a component. We saw that in the last episode when we got set up and familiar with Alpine. We don't need to store any data in here.
00:26
So we can just leave that as x data. Now, we saw before we had this x in it, which will run a piece of code when this initializes. We don't actually need this.
00:34
But because this is a form, what we can do is hook into a JavaScript event using Alpine. Now, what is the event? Well, it's when the form gets submitted.
00:43
So let's go ahead and say x on submit. We're going to use the prevent modifier because when we submit this form, we do not want this to actually submit through
00:52
because we need to perform an action, which is sending a request to Google before we actually submit this form. The whole flow of this is to submit this form,
01:02
grab the token from Google, go ahead and attach it into the form as a hidden input, which we can then validate on the server side. So that's pretty much what we're going to be doing here.
01:12
So within here, we're going to pull this down just so we can write this code inside of here. And just for now, let's go ahead and console log something out. So let's just say submit.
01:21
Head over, and we're going to go ahead and submit this form. So keep an eye on the console. If we hit Log In, we can't do anything at the moment because these are required fields,
01:30
and it won't let us submit. But if I click this now, you can see the form itself does not submit, but we get this submit message just down here. Perfect.
01:40
So what we can do now is head over to the Google Docs and just start to pull this in. So we're going to go ahead and grab the script here. We do need to create a site for our recapture, which
01:50
will go over in just a second. Where are we going to put this global script? Well, this will probably be in our overall template file. If you're working with your own app and you have a layout file,
02:01
you're going to want to put that in there. And I'm just going to pop that down within the script section. Now, we do need the recapture site key to be put into this script when we use this method.
02:11
We'll grab that in just a bit. So this is where we need to implement this into what we have already. So we see we've got the prevent default.
02:21
This snippet here is assuming that we have a button that we want to click on, and we're attaching the onClick event to the button. We're not doing that.
02:29
We're attaching that to our form. So we can kind of ignore this onClick function. And really, the only lines of code we need are these ones just here.
02:37
So before we go ahead and try this out, I'm going to switch over to the account management section. And I'm going to show you how to set up a recapture app if you don't have one set up already.
02:47
OK, so I'm logged into my Google account now. And I'm going to head over to the recapture admin console. No surprise, I've already got one added here. But we're going to go ahead and add a new one in here.
02:57
So I'm just going to call this Laravel Recapture. We don't have to put a domain in there. That's just the label. And we want a score based, which is version 3 of this.
03:08
We can do version 2, but that requires slight changes to what we're doing. Now, the domains are really important. That's going to be whatever domain
03:16
you're working on locally. So I'm going to go ahead and grab laravelrecapture.test. And I'm going to go ahead and put that in there just without that HTTP.
03:23
So that's pretty much what we need to do. Let's go ahead and submit this. So we have this created. And that is it.
03:29
We now have our site key and our secret key. Now, these are really important. They're two completely different things. One can be public.
03:36
One cannot be public, or other people can send requests to the API on your behalf. So I'm going to go ahead and copy both of these. And let's just put them in a new file for now.
03:47
So the top one is the public. The bottom one is secret. We want these to be in configuration. So let's work on that first of all.
03:54
I'm going to head over to our EMV file within our project. And let's go ahead and create out two of these. So we're going to say recapture key. And we're going to say recapture secret.
04:05
So key is our public. Secret is our private. So let's go ahead and just copy these values over to our EMV file.
04:13
And then we can get rid of this file and start to create some config out, which is really important to do in Laravel. So let's close this off.
04:21
And let's get some config created so we can access these. It's not a good idea to access EMV files or EMV values directly within your app.
04:31
So creating config in Laravel is super simple. We're going to go up to our main app section. We're going to create out some config in here, give it a name that we want.
04:39
So in this case, it will be recapture. That makes sense. And just create out a PHP file that returns an array. So we're going to have our key in here.
04:49
And that's going to hold some EMV value and a secret and the same. So here we can use the EMV helper to reference the recapture key.
04:59
And we can do exactly the same thing here to reference the recapture secret. Great. So now we can access these anywhere in our app
05:09
using config, the name of the config file, which is recapture, and then either .key or .secret. So we can get started with that straight away now that we have our config in there.
05:20
And we can replace this out just in here. Because we're working within a blade file, we can do this directly in here within our template output. So we're going to go ahead and say config and recapture.key.
05:33
So remember, our public key goes in here. OK. So now that we've got this done, we can actually grab the code that Google
05:40
requires to get that token. And we can just put it straight into here. So if we head over to our documentation, we'll go ahead and grab this code snippet here.
05:49
And we'll just go ahead and paste this straight in. And let's just do a little bit of reformatting here just to make sure everything looks good. So you can see here there's a comment,
05:58
add the logic to submit to your back end server here. We're going to cover that in another episode because that requires using our middleware to intercept that. But let's go ahead and just take a look at what's going on here
06:08
just so there's no confusion. So this now is that global thing that Google has given us via that snippet we've just introduced in the header.
06:18
And when this is ready, so when it's ready to execute, we go ahead and execute this. We need to put our key back in here. So we can, again, do that really easily
06:26
because we're just working with a blade file here. And then we choose an action, which is just a action within reCAPTCHA that specifies what you're trying to do.
06:36
Now, most of the time, you're going to be protecting forms. So most of the time, this is going to be submit. But when we introduce that helper that we're going to add to any of our forms,
06:45
we're going to allow this to be changed. So I'd recommend you read the Google documentation to find out what you can do here. OK, so with our site key, we already
06:53
know that this comes from config. Make sure you keep these single quotes in here or this isn't going to work. And we're going to go ahead and say config reCAPTCHA and key.
07:03
OK, so let's go ahead and just console log out the token that we get back when we submit this. And this should just work. So when we submit the form, prevent the default behavior.
07:16
Instead, make a request to Google. Google will handle everything and give you back a token which you can use to grab the score. So let's just see what we get when we try and do this.
07:26
So let's go ahead and log in with the details that we registered earlier. And yeah, OK, can't find variable Google reCAPTCHA. And let's check out app.blade.php file.
07:38
That is definitely in there. I think it's because the login page uses a different layout. And yeah, I think it uses the guest layout. OK, so we've got two different layouts here.
07:47
That's not a problem. We can just include this on all of these. And navigation is just a partial, so we can kind of ignore that one.
07:54
OK, so we should have this available now. Let's just close these off. And let's try this again. So let's enter our credentials.
08:03
And there we go, perfect. So this is that token that Google has given us by making a request to its API in JavaScript, detecting what it needs to detect,
08:13
and giving us back this token which we can use to look up whether or not this should have passed. Basically, we're looking up the threshold. So we've got the token now, perfect.
08:23
OK, so I'm just going to tidy this up a little bit just to get rid of these function calls and instead use short functions. You don't have to do this.
08:33
It's just the way I prefer working. So we're going to go ahead and grab this in here. And we're going to create our short closure. And I'm going to swap that, put the token back in there.
08:43
And that is where we need to send that token through to our back end. So this is going to happen by creating out a hidden input within our form somewhere and assigning that value. So we're going to look at two different ways that we can do this.
08:59
And once we move this over to a directive, it's going to change very slightly. So we'll go ahead and do that in the next episode so we can actually send this through and see it working.

Episode summary

In this episode, we're diving into how to grab a reCAPTCHA token from Google's API when a user submits a form. We start by wiring up our form with Alpine.js so that we can intercept the submit event using x-on:submit.prevent. This allows us to run our custom logic when the form is submitted, instead of just letting the browser do its usual thing.

Next, we go over to the Google reCAPTCHA admin console and set up a new site, making sure to note the site (public) and secret keys — important for both the frontend and the backend parts of our app. We store these keys in our .env file, and then move them into a dedicated Laravel config file for reCAPTCHA, making things more organized and secure.

With the key in place, we add Google's reCAPTCHA script to our Blade layout and pull in their recommended JavaScript snippet. We show how to trigger reCAPTCHA, get the token, and log it out so you can see it in action. There are a few hiccups along the way (like making sure the script is loaded on the correct layout), but we work through them so the token shows up in the console when the form is submitted.

At this point, we have a working flow where submitting the form fetches a reCAPTCHA token. We hint at the next step, which is attaching that token as a hidden input so it can be sent to the server for validation. We'll be covering how to do that (and clean up our code with short closures and possibly a directive) in the next episode.

Episode discussion

No comments, yet. Be the first!