Playing
02. Creating a Turnstile widget

Transcript

00:00
Before we integrate Turnstile into our application, we're going to need to create a widget over on Cloudflare. So head over to the Turnstile section and let's go through the process of creating a widget together.
00:09
Okay, so the first and most obvious is going to be the widget name. Let's just call this Turnstile Livewire just to keep things simple. And the second thing that we want to do here is hook this up to a domain. Now we don't need to do this for the local domain that we're running on.
00:24
So I'm just going to hook this up to the production code course dot com domain. Next is the widget mode. So I usually choose managed here. This will decide or Cloudflare will decide whether to show an interactive challenge or not. Non-interactive is just a purely non-interactive challenge, which means users will see the widget, but it will just do it for you.
00:45
And we also have an invisible widget, which obviously will just be hidden. For the purpose of this, just so we can see the widget in action, we're going to choose managed or non-interactive. And you can always come back and change these settings later. OK, so the last thing is, do we want to opt for a preclearance cookie?
01:01
I'm not going to choose that because this is going to require us that we actually set a cookie. And I don't want to have to go through the trouble of adding this to a cookie banner. OK, let's go ahead and create this out and let's just wait for this to finish. Once this is done, we will see our site key and our secret key.
01:19
So we're going to go ahead and take these, pull these into our application. So let's go over to EMV. Not sure where we're putting them just yet. So let's just add them in here anyway, just so we have them for later. And what this will mean is we can use these with the package that we're going to pull in.
01:34
So we've got our site key and our secret here ready to go. OK, so we've created a widget. We can go back and we can edit these and see stats about them as we go through. So we can always change the settings over and access the site key and the secret again if we need to. OK, let's go ahead and get the package installed that we're going to use to get this working.
6 episodes 18 mins

Overview

In this mini-course, we’ll walk through setting up and adding Cloudflare Turnstile to our Livewire forms.

Turnstile is a reCAPTCHA alternative, and thanks to a handy package, we’ll have it set up in no time, ready to apply to any form.

Once we’re done, we’ll take a look at configuring the widget and adding custom validation rules to display to the user if the verification fails.

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

Episode discussion

No comments, yet. Be the first!