Functionality 

Only purpose is to render the reCAPTCHA and validate the response. But provide these to other extensions which consumes the service.

Also there are limited integrations into other extensions implemented. These act more as an living example and integrate only in extensions used by the author self.

Features 

As a very focused extension only the following features are integrated

• service for display and validation
• integration in form rendering of EXT:form
• integration of invisible captcha in EXT:form
• viewHelper for display in fluid templates
• validator for usage in extbase domain model validation
• adapter for in-/visible captcha in sf_register
• adapter for in-/visible captcha in typoscript

Usage in ext:form manager 

This extension doesn't come with a content element of any sort. As it is only a service the captcha can't be used on its own. But there is one part where editors are able to have the possibility to configure captcha related settings.

Add captcha to form 

In the form manager it's possible to add the captcha to a form by choosing it in the new field wizard.

Configure label 

After the selection the user is able to choose if the label should be rendered in frontend and if so what label text should be used.

Use invisible captcha 

To use the invisible reCAPTCHA it's necessary to add an captcha field. Once this is done the form needs to be configured via the settings button on top of the form editor. There the checkbox for "Use invisible recaptcha" needs to be checked.

Usage in ext:formhandler 

The invisible mode is only supported at the moment.

Marker for the hidden field:

###recaptcha_invisible###

Marker for the submit button:

###recaptcha_button_invisible###

Manual installations 

Download the extension recaptcha either with the browser from typo3.org_ or github and upload it into the installation in the admin tools extensions, or directly in the admin tools extensions with the integrated search.

Composer installations 

On the console in the folder where the project composer.json resides just type:

composer require evoweb/recaptcha ^8.2
composer update

Activation 

After the extension is installed by either way you always need to activate it. Normally this is done in the admin tools extensions. But its also possible to activate it via console:

$ ./bin/typo3 extensionmanager:extension:install recaptcha

Configuration 

If, the captcha should be usable in backend context or you like to have a default configuration without touching TypoScript, the extensions need to be configured in the admin tools extensions. Via the cog as shown on the screenshot.

13. August 2023 

Backend related 

If you like to use the recaptcha service in backend context, you have to make sure that the settings are set in the admin tools extensions.

Frontend related 

For all frontend usage of the recaptcha service the backend settings are taken and then overridden with TypoScript. But setting the backend portion is optional. If these are empty the TypoScript configuration is mandatory.

Reference 

Following parameter are available as constants. And with the same name also as setup parameter.

plugin.tx_recaptcha:

Reason 

Since TYPO3 12 handling of content security policies are introduced. If this feature is active, the recaptcha javascript can not be loaded without additional configuration.

CSP Configuration 

To get the recaptcha working with csp feature active, it's necessary to add an extending mutation to the site configuration in a csp.yaml named file.

inheritDefault: true
mutations:
  - mode: extend
    directive: 'frame-src'
    sources:
      - 'https://www.google.com/recaptcha/'
      - 'https://recaptcha.google.com/recaptcha/'

  - mode: extend
    directive: 'script-src'
    sources:
      - 'https://www.google.com/recaptcha/'
      - 'https://www.gstatic.com/recaptcha/'

Template modifications 

In previous releases some onclick javascript was used. While the CSP rules are in place, this should be omitted. Some code was moved to the Frontend/form.js. Other was replaced with hidden inputs.

If you override the Frontend/Partials/Form/Navigation.html please check if it's in line with the provided file.

Use in your extension 

To make use of this extension is quite easy as there is only one service needed. By instantiating the EvowebRecaptchaServicesCaptchaService it's possible to render and validate the captcha. Beside the service there are a ViewHelper and a Validator for use in extbase extensions.

Integration in your own code 

$captchaService = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\Evoweb\Recaptcha\Services\CaptchaService::class);
$output = $captchaService->getReCaptcha();

$captchaService = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\Evoweb\Recaptcha\Services\CaptchaService::class);
$configuration = $captchaService->getConfiguration();
$showCaptcha = $captchaService->getShowCaptcha();

$validCaptcha = false;

$captchaService = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\Evoweb\Recaptcha\Services\CaptchaService::class);
$captchaServiceValidation = $captchaService->validateReCaptcha();
if (isset($captchaServiceValidation['verified'])) {
	if ($captchaServiceValidation['verified'] === true) {
		$validCaptcha = true;
	}
}

Integration in extbase extension 

<r:form.recaptcha>
   <f:if condition="{showCaptcha}">
      <f:then>
         <f:form.hidden property="{name}" value="1" />
         <div class="g-recaptcha" data-sitekey="{configuration.public_key}"></div>
      </f:then>
      <f:else>
         <div class="recaptcha-development-mode">
            Development mode active. Do not expect the captcha to appear.
         </div>
      </f:else>
   </f:if>
</r:form.recaptcha>

/**
 * virtual not stored in database
 *
 * @var string
 * @validate \Evoweb\Recaptcha\Validation\RecaptchaValidator
 */
protected $captcha;

ViewHelper integration 

Using the ViewHelper has the benefit that it covers the hole configuration discovery with fallback. Inside the ViewHelper three variables are set.

<r:form.recaptcha>
   <f:if condition="{showCaptcha}">
      <f:then>
         <f:form.hidden property="{name}" value="1" />
         <div class="g-recaptcha" data-sitekey="{configuration.public_key}"></div>
      </f:then>
      <f:else>
         <div class="recaptcha-development-mode">
            Development mode active. Do not expect the captcha to appear.
         </div>
      </f:else>
   </f:if>
</r:form.recaptcha>

Integration in extension 

Here the extension delivers only limited settings. In TypoScript there is the public_key defined which can be rendered as stdWrap to resolve an div container with all needed information to output the captcha.

Use invisible recaptcha in EXT:form forms 

To use the invisible captcha in the form you need to add the advanced element "reCAPTCHA". This field has the validation automatically added. Next step is to open the "Settings" of the form and need to check the "Use invisible recaptcha".

At last you need to add the TypoScript constants. One is to enable to the inclusion of the invisible recaptcha callback and the other is to tell the callback which id the form to handle has.

plugin.tx\_recaptcha {
    include\_invisible\_recaptcha\_callback = 1
    invisible\_recaptcha\_formname = captchaForm-4
}