In this episode, we're diving into how to grab a reCAPTCHA token from Google's API when a user submits a form. We start by wiring up our form with Alpine.js so that we can intercept the submit event using x-on:submit.prevent
. This allows us to run our custom logic when the form is submitted, instead of just letting the browser do its usual thing.
Next, we go over to the Google reCAPTCHA admin console and set up a new site, making sure to note the site (public) and secret keys — important for both the frontend and the backend parts of our app. We store these keys in our .env
file, and then move them into a dedicated Laravel config file for reCAPTCHA, making things more organized and secure.
With the key in place, we add Google's reCAPTCHA script to our Blade layout and pull in their recommended JavaScript snippet. We show how to trigger reCAPTCHA, get the token, and log it out so you can see it in action. There are a few hiccups along the way (like making sure the script is loaded on the correct layout), but we work through them so the token shows up in the console when the form is submitted.
At this point, we have a working flow where submitting the form fetches a reCAPTCHA token. We hint at the next step, which is attaching that token as a hidden input so it can be sent to the server for validation. We'll be covering how to do that (and clean up our code with short closures and possibly a directive) in the next episode.