In the last tutorial, we went through installing Axios on VueJS and NuxtJS. We also made our first requests with each set up! However, there was one glaring difference between the VueJS and NuxtJS setups that will exponentially grow as you develop. That difference is the global access to Axios within NuxtJS compared to importing […]

Let’s start with the basics, making API requests with Axios from within VueJS. This will give us a solid foundation to work from as we get into more complex requests. If this is your first time working with an API, it can seem intimidating. However, once you learn the basics, APIs begin to make a […]

If you are looking for an alternative to Google’s Captcha form validation, check out hCaptcha. It’s a simple, privacy focused alternative that provides an excellent screening system for bots trying to fill out your form.

Integrating with with Laravel is a breeze. Especially with Laravel’s Custom Validations that you can create, you can implement this validation on any form! Let’s get started!

0. Sign Up for an hCaptcha Account

Before we even get started, you will need to sign up for an hCaptcha account. Doing this will give you the public and secret keys needed to ensure that you can start validating hCaptchas.

1. Frontend Setup

For this tutorial, we are assuming you have hCaptcha set up on the front end, utilizing the javascript library of your choice. If you are using any of the big 3 frameworks (VueJS, React, Angular), hCaptcha’s official repository provides components that you can easily implement.

Once you have that set up, we can move to the next step.

2. Create a Custom Laravel Validation Rule

Laravel seems to have a solution for everything, and this one that I’ve been utilizing lately. It’s the ability to create a custom form validation rule. If you check out the documentation you will see there are already a variety of useful rules you can use when validating one of your forms. However, there will be a time where you will need to make your own (I’ll be sharing a few more of these custom rules later on).

All you need to do is run the following artisan command:

php artisan make:rule ValidHCaptcha

This will create a new custom validation rule class in the App\Rules directory of your app. You can of course move this to where ever you want your rules to be stored, just make sure you update the namespace correctly.

3. Breaking Down the Custom Rule

Let’s take a look at the file that was just created:

<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class ValidHCaptcha implements Rule
{
    /**
     * Create a new rule instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        //
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'The validation error message.';
    }
}

The first method is the passes() method which accepts attribute and value as the parameters. The value is what we are most interested in because that’s what we will be validating. This method is the heart of what we will be implementing.

The second method, message() is the customizable error string that gets sent back to the user when the validation fails. Super handy for proper UX and telling the user exactly what went wrong when their form doesn’t validate correctly.

Okay, time to implement the hCaptcha validation.

In this section of the Gain Flexibility & Increase Privacy with WireGuard VPN mini-course, we are going to be configuring WireGuard VPN on an Android device.

This is what it looks like:

This is a coniutation of my free “mini-course” called Gain Flexibility & Increase Privacy with WireGuard VPN. Start there if you are new to WireGuard.

What you’ll achieve

• We will have our iPhone client connecting to our WireGuard VPN server

This is what it looks like: