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
04. Submitting the token to the server

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 look at one way that we can get this token into our form so we can submit it along with all of the other details and therefore check it on the back end.
00:11
Now, this way is not the way that we're going to end up with, but it's good to go through the steps that we could use to actually get to this point. So what I'm going to do is turn xdata, rather than just
00:21
an initializer, into something that holds data. And that is going to be, of course, the token that we get back from here. So this token here that we've already seen, console.log.dell.
00:31
So what we can do is assign the token that we get here. And we need to kind of give this a different name. So let's just call this recaptureToken. And we need to assign this the value of token just in there.
00:44
Now, when we spoke about Alpine, if you are new, we know that xdata we can access within our template just here within this component. We can do pretty much whatever we want with it.
00:52
So what we're going to do is down here just make sure this is coming through by creating out div with the text in here with the recaptureToken. That should show us the token when we submit the form.
01:03
And then we're going to look at binding this to a hidden input, which means that the user can't see it, but it gets submitted over to our server. So let's go ahead and just enter our details here.
01:13
And we should just see that token pop up within there. Obviously not great. That's not what we want to do. Instead, what we want is a hidden input in here.
01:22
So we're going to create out a input with a type of hidden. The name of this can be absolutely anything. It could be recaptureToken. And then in here, we need to bind that value in.
01:31
So we're going to use xbind within Alpine. We know that we want to bind in the value attribute. And that's going to be the recaptureToken. So this should then get filled with that recaptureToken.
01:43
So when we do submit this form, that will go through to our back end as well. Now, the problem we've got at the moment is we are preventing the default behavior of the form.
01:53
How do we submit this form once this token has been attached? Well, within Alpine, we can use the L magic element, which references the current element. That is the form itself.
02:06
And then we can just call any native function or property on that. So in this case, submit the form. That's pretty much what we're doing.
02:13
Now, of course, we need to verify that the token is actually being sent through to the back end. So I'm going to go over to the, I think it's called Authentication Controller, Authenticated
02:22
Session Controller just here. And we have this login method. I think it's store. Yeah.
02:29
So I'm just going to die dump here on the request. Well, these controllers are all part of Laravel Breeze. So obviously, if you're using your own controllers, then you'll be able to grab them values.
02:39
So I'm going to die dump on the recaptureToken that we hopefully get through via that hidden input. So let's head over and just try out this whole flow. Go ahead and enter our details.
02:49
Hit Submit. That token gets attached, and then we die dump on it. Now, it's not actually working at the moment. And the reason for that is when Alpine updates itself,
02:59
we need to wait for the next tick. And if you are familiar with Vue, you might be familiar with this. But basically, just wait until the next thing
03:08
has happened to go ahead and do something. So in here, we can go ahead and use nextTick. And then we can do something when this has been updated. So we basically wait for any updates like this.
03:21
Then we submit the form. So this should give us the correct token now, died and dumped out, ready to be validated on the back end. And sure enough, there it is.
03:32
So that is working nicely now, and we're actually getting that token through. Now, there's a couple of things here that we're not going to be doing.
03:39
We're not actually going to be at the end including this hidden input. The reason being is we want this solution to work on any form.
03:48
We don't want to have to manually add in a hidden input every single time we implement Google Recapture on a form. We want this kind of done automatically, and we can do that with JavaScript.
03:59
We can create in here an input and then attach it to our form as a child. We won't get to that just yet, but the other thing that we need to take care of
04:10
is over in our authenticated session controller, we don't really want to be making HTTP requests here to validate the token. We kind of want this at a level
04:20
where we can just easily add it to any of our routes. So we're going to be doing that using middleware. So in the next episode, let's go ahead and add in the middleware
04:28
that actually sends a request through to Google's API to actually validate this token that we're getting through. And then we can start to tidy everything up and get the solution that we saw in the introduction.
04:39
So let's go and head over to the next episode, get that middleware added, and this will pretty much wrap up the whole flow, and then we'll just tidy stuff up.

Episode summary

In this episode, we dive into how to actually get the reCAPTCHA token from the client side into your form so that it can be sent to your backend server when the user submits the form. To start, we explore the basics of using Alpine.js to store the token and show it in the template, just so we can see what's happening under the hood (even though exposing it like this isn't production-safe).

Next up, we add a hidden input field to the form and bind the value of the reCAPTCHA token using Alpine's binding techniques. This way, when the form gets submitted, the token is sent along with the rest of the form data without the user seeing it. You’ll also see how to actually trigger the form submission programmatically in Alpine after the token has been updated (using Alpine’s $nextTick), ensuring everything is synced up.

We then take a peek at the backend (using Laravel Breeze in this example) to confirm that the token is actually being received. This is where we dump the value on the server-side to check everything is wired up correctly.

But we don’t stop there! You'll learn why manually adding hidden fields isn’t flexible if you want to use reCAPTCHA on multiple forms and get a glimpse at how we’ll automate this with JavaScript soon. Finally, we wrap up by prepping for the next stage: adding middleware to handle token validation with Google’s API, which will really tidy up and finalize our implementation.

So, by the end of this episode, you’ll have a working flow that passes the reCAPTCHA token from your form to your backend. In the next episode, we’ll make this setup even cleaner and more reusable!

Episode discussion

No comments, yet. Be the first!