A Guide on Adding Google reCAPTCHA v3 to your Laravel Website

In past I have published an article on adding Google reCAPTCHA to the Laravel forms. Google has then brought the next version v3 of reCAPTCHA. One of our readers asked how to integrate reCAPTCHA v3 in a Laravel application.

reCAPTCHA v3 has slightly different behavior. Unlike the older version of reCAPTCHA, you don’t require to put captcha inside your form. In this version, your visitors don’t need to solve a puzzle. Instead, you will see the reCAPTCHA icon in the bottom-right corner of your website. This v3 version of reCAPTCHA fights against the bots in the background. Most importantly, you don’t need to add captcha in every form. Just add it once and it will protect all forms of your website.

In this article, we study how a user can add reCAPTCHA v3 to their Laravel website. Adding reCAPTCHA protects your website from bots and spams.

Get Site Key and Secret Key of reCAPTCHA

For getting started, you first need to register your site with Google reCAPTCHA. Go to Google reCAPTCHA and click on the ‘+’ icon to register your site. On the next page, add the domain of your website, choose the ‘reCAPTCHA v3’ option. If you want to test it on a local server then to the domain field you should add ‘localhost’.

Register Site

Once you hit the submit button, you will get the site key and secret key. Copy these keys. They will require the next steps.

Site Secret Keys

Install and Configure Laravel reCAPTCHA library

Head over to you Laravel project and install the biscolab’s library which is built for integrating reCAPTCHA in Laravel. Open the terminal in your project root directory and run the command:

composer require biscolab/laravel-recaptcha

Upon installation of the library, publish the configuration file using the command below.

php artisan vendor:publish --provider="Biscolab\ReCaptcha\ReCaptchaServiceProvider"

Open the .env file in your editor and add your site and secret keys of reCAPTCHA as shown below.

RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY
RECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY

Make sure to replace the placeholders ‘ADD_YOUR_SITE_KEY’ and ‘ADD_YOUR_SECRET_KEY’ with the actual values. Next, open config/recaptcha.php and set version to v3.

return [
    ...
    'version' => 'v3',
    ...
];

After this clear the configuration cache using the command:

php artisan config:cache

Add Google reCAPTCHA v3 to your Laravel Website

We are done with all setup and all set to add reCAPTCHA on the website. For this you need to first add the HTML meta tag for csrf-token in the head section.

<meta name="csrf-token" content="{{ csrf_token() }}">

If your website already added this tag then just ignore the above step. Next, insert the htmlScriptTagJsApi() helper before closing the head tag.

<!DOCTYPE html>
<html>
    <head>
        ...
        ...
        {!! htmlScriptTagJsApi() !!}
    </head>

Now go to your website, reload it and you should see the reCAPTCHA icon in the bottom-right corner of a page. It means your website is now protected with Google reCAPTCHA.

You are done with adding Google reCAPTCHA on your Laravel website. For further curiosity, if you want to see the response of reCAPTCHA then you need to slightly modify the code in the head tag.

<head>
...
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript">
function callbackThen(response){
    // read HTTP status
    console.log(response.status);

    // read Promise object
    response.json().then(function(data){
        console.log(data);
    });
}
function callbackCatch(error){
    console.error('Error:', error)
}
</script>

{!! htmlScriptTagJsApi([
    'callback_then' => 'callbackThen',
    'callback_catch' => 'callbackCatch'
]) !!}
</head>

Reload the page and check in the browser console, you will see the response of the Google reCAPTCHA. In my case, it’s shown as a screenshot below.

recpatcha-response

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

10 thoughts on “A Guide on Adding Google reCAPTCHA v3 to your Laravel Website

  1. Kindly check after following this post spamming is stopped?
    I have implemented it successfully and spamming is not stoped so this is not the correct method of implementation.

  2. I ran
    composer require biscolab/laravel-recaptcha”
    and
    composer update

    And still havng issues with htmlScriptTagJsApiV3

  3. Hi,

    i follow your instructions but i’ve that error :
    Call to undefined function htmlScriptTagJsApiV3()

    so i can’t open homepage, how can i defined that function?

    Thanks

    1. htmlScriptTagJsApiV3() is already defined in biscolab/laravel-recaptcha library? Did you run all commands mentioned in the article?

    2. run “composer require biscolab/laravel-recaptcha” (without version number) or run “composer update”

Leave a Reply

Your email address will not be published. Required fields are marked *