reCAPTCHA with Laravel
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
In this course, we are going to be integrating reCAPTCHA
00:03
into a Laravel application, but we're going to do this in the Laravel way. Now, I'll show you what that looks like in just a second, but let's go ahead and head over to the docs just to see how easy this is to actually integrate. Okay, so if we scroll down here
00:18
what we're going to do is programmatically invoke the challenge. That's what we're going to be doing when we build this out. So all that involves is loading in the JavaScript API, going ahead and executing this when we
00:30
go ahead and perform some sort of action. So in our case that's going to be submitting a form, and then we just go ahead and send a request over to the Google reCAPTCHA API and we get back a token which we then submit to our server
00:45
to validate it on the back end, and then we get a response back and we can either redirect the user with an error message or obviously just let them in. So if we were applying this to a login form, that would then go ahead and let them log in. Now the way that we're going to be doing this, so let's just take a look
01:00
at how this looks first. We have this implemented on this login page. You can see the little pop out down here. I'm going to go ahead and just sign in here normally and you can see sure enough this lets me in. So let's go ahead and log out and head back over to
01:13
that page and I'm just going to show you what this is going to look like in practice once you finish building this and how this is going to work for every form or action you want to protect. So you can see here we've got a pretty standard form. We've got our
01:25
cross-site request forgery staff. We've got an email address and a password. There's no javascript dumped in here. We're going to keep this super clean. The only thing we are doing here is adding in a custom blade directive which will use alpine.js to
01:41
make this form an alpine component. What that means then is we can hook in to when this form gets submitted and we can go ahead and perform the actions we just saw over on the google documentation. So really this is all we need to do to
01:57
add the functionality to a form. Now it's going to be a little bit different if you're protecting other actions but you can very slightly tweak this if you need to. So how about the roots? Well look at our auth routes here. We have just got some middleware attached
02:10
to this with the name of the middleware of course and then we have the threshold which is really important. So this is the strength that you want the recapture to be and i've set that at 0.8 which is a fairly typical value
02:24
but let's just take a look if we bump this up to one. This runs zero to one and if we head over here and enter our details it's highly unlikely that this is going to pass for any user and you can see sure enough we get redirected back with a
02:38
recapture failed message. So i'm going to go ahead and switch that back over to 0.8 which is pretty sensible and to be honest that's pretty much it. So once you're done with the course every time you want to protect a root with a form apply the middleware go ahead and add in
02:54
this directive which we're going to build out and that's it your forms are protected. So now that we have seen what this looks like and what the end result is let's hop over and start building this out.

Episode summary

Welcome to the course! In this intro episode, we kick things off by going over what you'll be building: integrating reCAPTCHA into a Laravel application, but in a way that feels totally native to Laravel.

First, we take a quick tour of the Google reCAPTCHA docs to show you just how straightforward the process actually is. We discuss the steps needed: loading the JavaScript API, executing it when you want (like on form submission), getting back a token, sending that token to the server, and finally validating it to confirm if your user's a real human or not.

You get to see a live demo of how the login page looks with reCAPTCHA fully set up — nice and clean with no extra JavaScript cluttering the Blade templates. Instead, we introduce a custom Blade directive with a touch of Alpine.js to handle form submission and token generation, keeping things super tidy and reusable.

We also check out the middleware approach for protecting routes, including setting a threshold that controls how strict the bot detection is. You see what happens when this threshold is set really high (like 1) and why 0.8 is a more sensible default.

By the end of the episode, you’ll know exactly what you’re aiming to build: a reusable way to protect any route or form in Laravel with just a simple directive and some middleware. Ready to dive in? Let's do this!

Episode discussion

No comments, yet. Be the first!