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!
No comments on this article yet.