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
08. Passing reCAPTCHA options

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 make this a little bit more flexible by allowing a couple of options to be passed through, both to our directive and to our middleware, so we can adjust what we're doing,
00:09
depending on the kind of action we're taking. So we'll start out with the directive here, and we saw from the introduction that we can pass through the action that we want to send over to Google.
00:19
Most of the time, this will be submit, because you'll be attaching this to forms, but let's go ahead and instead of just using this directive, invoke it like a function,
00:28
and then pass through the action that we want to send over to Google. So we know that we can come over to our reCAPTCHA service provider,
00:35
and we can now accept this action through into this closure, and then we can just use it in our code, and we know that it needs to be replaced out just here. So we can go ahead and add in some single quotes,
00:46
and we will just add the action in there, and we should be good. So that should now attach that correct action when we submit this.
00:55
We can verify this by just heading over to our login page, and let's just check our console, make sure that this is all good. So yeah, already not working.
01:03
Let's just have a look at this. And yeah, we don't actually need to escape that because we are just outputting it in single quotes. So we can go ahead and get rid of that,
01:16
and we should be good. So we're just sending this as a string, which it comes through as, so we could even type in that just to make sure,
01:23
and we should get that output in there properly. So give that a refresh. And again, what we need to do here is make sure we just clear out our cache.
01:30
So view clear, give that a refresh, we're all good. Let's just inspect this just to make sure it's being put in there properly. And you can see here,
01:38
we have got action and submit in single quotes, great. So that should be working nicely. We'll just very quickly verify that, and we're in, great. So that is all looking good.
01:50
So the next thing to do, and probably the most useful is over in our middleware. So if we head over to our verify recapture token middleware, we want this to be customizable on a individual level.
02:04
So we basically want to, if we go over to our auth routes, be able to do this 0.8, and then change that for different routes in our application,
02:13
depending on what level of protection you need for each of them. So how do we do this? Well, into our middleware,
02:19
we can actually accept this directly into the handle method. So this needs to be an integer, and we're just going to call that threshold. And we'll set a default value here to null.
02:32
The reason that we're doing that is because we need to use our config as a default threshold. We don't need to, but it would be good to have a global config
02:41
with the overall threshold that you want to use. And then if you do pass a threshold into individual middleware, then it will override that.
02:48
So let's head over to our config and recapture, and let's add that sort of global threshold into here. And I'm going to set that to 0.8. Okay, so we can reference this in here now,
03:00
but what do we actually need to do? Well, we're just going to go ahead and grab the threshold from the middleware that we've passed in.
03:07
So up here, if that isn't available for any reason, we then want to fall back to our config recapture threshold, like so. So global threshold,
03:20
if it's not being passed into the middleware. Let's run this and see what we get. So if we head over and try this out, that works nicely. We've got that global 0.8.
03:34
However, if I wanted to change this over specifically for this route with an unrealistic value of one, then we should see this fail. Great.
03:46
So there we go. I'm going to switch that back to 0.8, because it makes sense. That is the entire flow.
03:53
Really, really easy to implement as we saw from the introduction. Step one, add that recapture directive to your form. Step two, add the middleware, and you're good to go.

Episode summary

In this episode, we make our reCAPTCHA implementation way more flexible by allowing options to be passed both to the directive and the middleware. The main focus is on letting you customize aspects like which action to send to Google and what threshold you want for passing the reCAPTCHA check.

We start out by updating the directive so you can specify the action (like 'submit', but this could be anything), and show how this gets passed from your Blade template all the way to Google's reCAPTCHA. We make sure this value is inserted correctly into the code and troubleshoot a bit—checking the output in the browser console to confirm it works as intended.

Next, we head over to the middleware and set it up so you can override the score threshold per individual route. This way, some routes can require stricter bot checks than others! We add a default threshold in the config file (set to 0.8), but if you pass a threshold directly into the middleware in your routes, that value will be used instead. We walk through how this works and show the logic for falling back to the global config if no specific value is set.

To wrap things up, we test everything to make sure it's working correctly, both when customizing parameters and when sticking with defaults. By the end, you've got a much more adaptable setup for reCAPTCHA in your Laravel app—just add the directive, add the middleware, configure as you see fit, and you're ready to go!

Episode discussion

No comments, yet. Be the first!