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.
8 episodes• 49 mins

Overview

Adding Google reCAPTCHA to a Laravel form isn’t too much trouble, but what happens when we want to re-use it for other forms?

This course focuses on setting up reCAPTCHA using Alpine.js to fetch the token, and then middleware to verify the token based on a threshold in our config. We’ll add a Blade directive too, so we’re able to easily use reCAPTCHA for any forms in our Laravel apps — just by adding a couple of lines of code.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.