Bootstrap 4 Validation with Google Recaptcha v3

Integrate Bootstrap 4 Javascript validation with the new Google Recaptcha v3 - using the Invisible option for low user-friction and high levels of security and source validation.

Bootstrap 4 Validation with Google Recaptcha v3

Bootstrap, like WordPress, is a gift to the global development community – an excellent starting point to build a solid, modern and standards compliant WordPress application.

Bootstrap provides excellent UI features for form styling and additional javascript goodness via simple validation – but of course these are only some of the steps required to build a working and secure online form.

In this short article, we’ll share some of the techniques we used to integrate Bootstrap 4 Javascript validation with the new Google Recaptcha v3 – using the Invisible option for low user-friction and high levels of security and source validation.

This example comes from a custom built registration page on a WordPress application, using the new Recaptcha v3 invisible check – so you will need to get some of the data from different sources and validate the date in different ways, if you use-case is different.

The key points are:

  • include the recaptcha scripts, passing a valid secret key
  • build the form inputs correctly, so they trigger validation
  • add a hidden field with the action – for extra security and metrics
  • include a js validation script, which you add the grecaptcha.execute() to if the validation tests pass
  • pass field values from form to data processor
  • then post data to PHP to scrutinize – validate each required part is there and as expected
  • proceed or kick back depending on the results and level of security you want

In the PHP processing part, you can validate posted data based on 4 possible values:

  • success ~ generic pass value
  • action ~ simple comparison to check the 2 values match
  • score ~ recaptcha returns a float value score, you can accept values above a defined threshold
  • hostname ~ another check if they match, optional and perhaps prone to issues.

Pseudo code included below – note this will not copy paste and work, but highlights the key pain-points.

The end result is that forms are only submitted once validated – in cases where front-end validation fails ( most commonly due to Javascript being disabled on the client ) the data is posted and validated on the backend – this should always be the case, whether or not you are adding extra layers of security on the front-end.

The PHP registration process takes the data over many additional steps not highlighted in this article – those steps will vary depending on the use-case and requirements – time invested in good data validation reaps huge benefits, ensuring that your data is both valid and your systems secure.

Happy coding!

Gist List

Comments

No comments on this article yet.

Add a Comment

Your email address will not be published.

These HTML tags work: <a href=""> <code> <strong> <pre>


Connect:
OR

Our Services
Validate your ideas before diving in. Consultancy
Dig deep, audit your data, prepare for action Discovery
Get everything in shape to smooth the project path. Shaping
Let us help you realize your imagination Design
Rock-solid WordPress tools, built to last. Development
Without water, the garden will not grow. Support


Projects
Quinta de Sant’Ana, Portugal
Quinta de Sant’Ana, Portugal

Quinta de Sant'Ana overlooks the picturesque village of Gradil with its cobbled streets, white washed houses and hospitable inhabitants.


Projects: View All or
Releases
Willow
Willow

Willow is a Logic~less Template Engine built for WordPress. Willow plays nicely with ACF, is quick to learn and developer-focused.


Releases: View All or