Integrating Google reCAPTCHA into Laravel Forms Without Package ,2024

Adding Google reCAPTCHA to your Laravel forms can significantly enhance the security and usability of your website. It helps protect your forms from spam and automated submissions, ensuring that only genuine users can interact with your site. In this guide, we will walk you through the process of implementing Google reCAPTCHA without relying on a package.

Step 1: Register Your Site with Google reCAPTCHA

Before you can integrate reCAPTCHA, you need to register your website with Google reCAPTCHA. Here’s how:

  1. Visit the Google reCAPTCHA website and sign in with your Google account.
  2. Click on “Admin Console” and then the “+ button” to create a new site.
  3. Select “reCAPTCHA V2” and then choose “I’m not a robot” Checkbox.
  4. In the “Domains” section, add your website domain (e.g., example.com).
  5. Accept the reCAPTCHA Terms of Service and click the “Submit” button.
  6. Google will generate a Site Key and a Secret Key for your site. Keep these keys handy as you will need them in the next steps.
Add Google reCAPTCHA to Laravel Form

Step 2: Add reCAPTCHA to Your Form

Add the Recaptcha script

<script async src="https://www.google.com/recaptcha/api.js">

To integrate reCAPTCHA into your Laravel form, follow these steps:

  1. Open the form view file where you want to add reCAPTCHA (e.g., resources/views/contact.blade.php).
  2. Locate the form element where you want to insert the reCAPTCHA. Usually, it’s within a <form> tag.
  3. Add the reCAPTCHA widget just above your submit button. You can do this by including the following HTML code:
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

Replace YOUR_SITE_KEY with the Site Key you obtained from Google reCAPTCHA

Your form should look something like this:

 <form id="msform" class="lead-form" method="post" action="{{ url('/register') }}">
                    @csrf
<div class="form-group" style="text-align: center;margin-top:11%;">
                            <div id="collapseOne" class="collapse"
                                style="margin-top: 5%;padding: 7%;background: #f1f3f6;">
                                <label>Sign up with Email</label>
                                <form class="user" method="post">

                                    <div class="form-group mb-3 mb-sm-0">

                                        <input type="text" class="form-control form-control-user"
                                            id="name" placeholder="Enter Name" name="name" required>
                                    </div>


                                    <div class="form-group mb-sm-0">
                                        <input type="email" class="form-control form-control-user"
                                            id="email" placeholder="Email Address" name="email"
                                            required>
                                    </div>
                                    <div class="form-group mb-sm-0">
                                        <input type="text" class="form-control form-control-user"
                                            id="phone" placeholder="Phone Number" name="phone"
                                            minlength="10" maxlength="10" pattern="^\d{10}$" required>
                                    </div>
                                    <div class="form-group mb-sm-0">

                                        <input type="password" class="form-control form-control-user"
                                            id="password" name="password" placeholder="Password"
                                            minlength="6" required>


                                    </div>
									
<div class="mb-3"> 
                        <!-- div to show reCAPTCHA -->
                        <div class="g-recaptcha" 
                             data-sitekey="6LcEK-soAAAAAL3kBsvXyQBnblOtgHxDziunSPN6"></div> 
                    </div> 
                                    <button class="btn btn-primary btn-user btn-block" 
                                        style="background:#213765;border-color:#213765;">
                                        Sign up with Email
                                    </button>

                                </form>
Integrating Google reCAPTCHA into Laravel Forms

Step 3: Verify reCAPTCHA on Form Submission In controller

Once you’ve added the reCAPTCHA widget to your form, you need to verify the reCAPTCHA response on form submission. This ensures that the user is not a bot.

  1. In your Laravel controller method responsible for processing the form submission, add the following code to verify reCAPTCHA:
$recaptcha_response = $request->input('g-recaptcha-response');
	 $url = "https://www.google.com/recaptcha/api/siteverify";

	$body = [
            'secret' => env('GOOGLE_RECAPTCHA_SEC_KEY'),
            'response' => $recaptcha_response,
            'remoteip' => IpUtils::anonymize($request->ip()) //anonymize the ip to be GDPR compliant. Otherwise just pass the default ip address
        ];
		
		
		 $response = Http::asForm()->post($url, $body);

        $result = json_decode($response);
if ($response->successful() && $result->success == true) {
            $request->authenticate();

            $request->session()->regenerate();

            return redirect('/dashboard')
        } else {
            return redirect()->back()->with('status', 'Please Complete the Recaptcha Again to proceed');
        }

Discover more from STRUGGLER KING.COM

Subscribe now to keep reading and get access to the full archive.

Continue Reading