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
07. Refactoring to a Blade directive

Episodes

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

Transcript

00:00
If you've never created a blade directive before, do not worry.
00:02
I'm going to guide you through the process, and it is really not that difficult. Now, we're going to start out by just creating a really simple one, just so we can see how this works.
00:10
And then we're going to start to move all of this code over to that blade directive, so we can get that really nice result that we saw in the introduction. So let's start out by creating our service provider.
00:20
We could do this in our app service provider, but usually that's where we just dump everything, and we want to keep this nice and clean. So I'm going to go ahead and use Artisan, of course,
00:28
to make out a provider here. And we're going to call this RecaptureServiceProvider, and that's created. Then we're going to head over to Config and App
00:38
to register this provider. So let's scroll all the way down here to where our providers are stored, and we can just add this in here, RecaptureServiceProvider,
00:49
and we're done. So let's open up our RecaptureServiceProvider, which is under App and Providers. And in here, we can just do what we want.
00:58
So we are going to do this when we boot this rather than register, because we're not registering anything and attaching anything to any containers,
01:04
and we're going to create out a blade directive. So to do this, we're going to use the blade facade, and we are going to use the directive method. Now, we're going to give this a name.
01:16
Obviously, we're going to call this Recapture, but we can call this whatever we want. And then we have a closure in here, which goes ahead and registers this.
01:25
Now, we can take arguments into this. We're not going to do that just yet. We'll tidy that up a little bit later. But for now, let's just output a string on the page
01:33
just so we can get used to how this works. Now, when we're outputting not necessarily strings but HTML code, a really good practice to get into the habit of
01:41
is returning a new HTML string so everything can be escaped properly and all that kind of stuff. So in here, let's just go ahead and say,
01:50
hello from directive, and let's just try and use this directive on the page and just see what happens. So we're going to head over to our login page
01:58
and let's just go down here somewhere where we can actually see this and let's use the Recapture blade directive. Congratulations if you've never done that before.
02:08
You've just built your own blade directive that outputs some text. So there we go. It's on the page.
02:14
Perfect. So what we want to do here is not do this directly within here. We could do if we wanted to do something
02:21
to output the hidden input, but we kind of want all this functionality attached to our form itself. So if we look at the way that Alpine works,
02:29
you can see that these are all attributes. Everything that we do in Alpine within the component itself is an attribute or something that we attach to this
02:37
that kind of looks like an attribute. So we kind of want this on here. Now what we can do is basically just copy this X data and X on submit,
02:47
and we can move that over to the directive and then within our HTML code, all of them kind of attributes will be rendered out in place of that.
02:56
And we can actually tidy this up now and pull everything up since we are working a little bit neater. Okay, so let's move this code over.
03:04
I have that on my clipboard. So we're going to go over to our recapture service provider and this is where things start to get a little bit tricky. So we're going to go ahead
03:12
and come down a couple of lines because we kind of want to format this and see this as we would write it on the page. And I'm just going to paste this in.
03:19
So nothing is looking good at the moment. A lot of red in here. Let's go ahead and indent this first of all. And let's start to just tidy this up
03:30
and really think about how this HTML actually works. So I think we'll start with the config just here. This isn't going to work because this is a PHP function
03:40
that we can call from blade templates, but we can't put into a string. We need to go ahead and append this onto here instead. So I'm going to grab the config recapture key,
03:50
get rid of the blade outputs. And in here, I want to go ahead and append this on like we would normally do in a string. Now the important thing here
04:01
is we need to go ahead and escape the first backslash. So let's use a backslash, escape the first single quote with a backslash and escape the last single quote
04:12
with a backslash as well. Great. Now, again, with the action here, we're using single quotes inside of a single quote,
04:18
whether you use double or single quotes, you'll just need to change this around. So I'm going to go ahead and escape both of them as well. And to be honest, the rest of this should actually be good.
04:29
So we can try this out. Let's just see if this works, first of all. So let's go over and really importantly, bring up our console at this point,
04:36
because otherwise we're going to end up in a huge mess. We can go ahead and inspect this and see if this is added properly. And it looks, to be honest, like it has.
04:44
So I don't see any reason why this wouldn't work. Let's go and submit this through and check. And there we go. It looks like it's good.
04:52
Now, really importantly, that could have just submitted the form normally. So I'm going to go and head over to the verify recapture token middleware.
05:01
I'm going to switch this over to one, just so we can make sure that this is failing properly. And perfect, it is. Great.
05:09
So good. Successfully moved that over to a blade directive. But we've got an issue now in the fact that we've got this cool directive
05:18
that we can just attach to our forms, but we always need this hidden input because we're relying on that data that's being bound into there
05:25
to submit this through to our backend. So what we're going to do is scrap this hidden input and instead, using the code within the directive that we've just built, manually build up this input
05:37
and then add it to the form just before it gets submitted. So we're going to head back over to our recapture service provider, and we're going to change the way this works.
05:46
Now, we don't need to assign this anymore because we're not going to need it to reference directly within our form. So we can actually get rid of all of this data in here.
05:53
We still do want to submit the form once everything's done, but in here, this is where we want to manually build this up. So let's get started. We'll go ahead and create our variable called input,
06:02
and we'll go ahead and create an element on the page. And we just give the tag name. In this case, it's input. And once again, we need to be careful here
06:11
because we're writing code that we would normally just output to the browser inside of a PHP string. So we're going to go ahead
06:18
and escape both of them single quotes. And all we need to do now is set the attributes on this input and then attach it to the form. So what attributes do we need?
06:27
Well, we need the type of this. It needs to be hidden. We don't want the users to see this. So we're going to set an attribute on here
06:34
with a type set to hidden. And once again, make sure we escape all of these single quotes or just use double quotes.
06:42
It doesn't really matter. And we want to go ahead and set another attribute on here. And that's going to be the name of this. Of course, really important.
06:50
We need to know how to pick this up in the backend. And that's going to be recapture underscore token, exactly like we had before. And once again, escape all of these.
07:03
And we're good. And the last one and the most important is the value. So let's go ahead and set an attribute out in here. And this is going to be the value.
07:12
And that value is basically just going to be the literal token that we get through from this closure. So obviously we don't need to put that in single quotes. Let's escape these out and we're good.
07:21
So now we just need to attach as a child, this input that we have just built up. So again, we can reference L as the current form that we're working with.
07:31
And we can append a child onto here. And that child is that input that we have just built up. So rather than rely on that input being in the form all times, our code within that directive
07:44
is handling creating that input for us. So regardless of what form we attach this to, it is just going to work. Let's go and try this out.
07:53
I'm just going to make sure that this is set back to one so we can see this file and open up our console just in case. So let's go ahead and try and log in here. OK, so we get something went wrong.
08:06
So it looks like either our API request has failed, so we're not sending the actual token through properly, or, which I think is the problem, we haven't cleared our view cache.
08:17
Now, when you're working with blade directives, these are cached. You're going to have to clear out your cache when you make a change to them.
08:25
So any change you make to this. So a good idea to head over and use phpartisan view clear to clear out your views. And that should then bring this back in.
08:36
So what we did was we originally created this, which worked nicely. We know that this actually submitted through. And then we've added this part here,
08:44
which obviously, if we have the previous cache version, doesn't include the input that we're building up. And therefore, obviously, we can't go ahead and send that through properly, which is why we get the API error.
08:55
So let's try this again now that we have cleared our views. And we should get recapture failed. Great, that's just because we changed over the threshold down here.
09:05
So let's switch this back to 0.8. And we should now be able to successfully sign in with that in there. Perfect.
09:14
OK, so great. We have moved this over to a directive. We have changed this around slightly. So now, any time we want to add this to a form,
09:23
we can just go ahead and use the recapture directive really easily. We don't have to worry about adding any inputs down here within our form.
09:31
And of course, we know that we can just apply that middleware to pretty much anywhere. So this flow now is working really nicely. And more importantly, it's really easy to add to any form.
09:41
We're going to finish up with a couple of other options that we can pass through to this, just to make it a little bit flexible. So let's cover that in the next episode.

Episode summary

In this episode, we're diving into refactoring our reCAPTCHA implementation into its own custom Blade directive in Laravel. Don't worry if you've never created a Blade directive before—I'll walk you through it step by step.

We start by using Artisan to generate a new service provider specifically for our reCAPTCHA logic (keeping things organized instead of dumping everything in AppServiceProvider). After registering our new provider, we build out a super simple Blade directive just to get the hang of it. When we see our directive's output on the page, we know we're on the right track!

Next, we move our reCAPTCHA logic into the new directive. This involves a bit of refactoring, especially when it comes to outputting HTML from PHP, so we discuss escaping quotes and safely outputting code. We also adjust our logic so that, instead of relying on an existing hidden input in the form, we programmatically create and append it right before the form is submitted. This means our directive is super flexible—you can just add it to any form and it will "just work" without extra markup.

Along the way, we run into a common gotcha with Blade directive caching and show how to clear the view cache to make our changes take effect. By the end, we've got a slick, reusable Blade directive for reCAPTCHA. In the next episode, we'll take it even further by adding options to make our directive more flexible!

Episode discussion

No comments, yet. Be the first!