Le CMS Sulu propose une extension permettant de gérer des formulaires dynamiques, dont le code source est consultable ici : https://github.com/sulu/SuluFormBundle.
Ce module intègre des mécanismes de protection contre les bots et les spammeurs, notamment :
- La technique du Honeypot (pot de miel)
- La mise en place de Google reCaptcha
Dans cet article, nous allons explorer comment ajouter une nouvelle protection avec le CAPTCHA de Cloudflare : Turnstile.
Rappelons que Sulu est un CMS basé sur l'écosystème du framework Symfony.
Le module de gestion des formulaires de Sulu permet d'ajouter de nouveaux champs en s'appuyant sur les 'formtypes' du bundle Form de Symfony.
Pour ce tutoriel, nous utiliserons notre bundle Symfony qui permet d'intégrer Turnstile dans vos formulaires Symfony.
1. Installation du bundle Turnstile pour votre projet sur Sulu 2.5 et plus
Le code source du bundle qui s'est enrichi grâce à la communauté est disponible à cette adresse : https://github.com/Pixel-Open/cloudflare-turnstile-bundle
Sulu gère ses dépendances avec Composer. Pour installer le bundle, il vous suffit d'exécuter la commande suivante :
composer require pixelopen/cloudflare-turnstile-bundle
Le bundle s'appuie sur Symfony Flex, qui automatisera l'installation du bundle dans votre projet Sulu.
2. Ajout du champ Turnstile pour le module Formulaire de Sulu
Pour que Sulu prenne connaissance du nouveau type de champ de formulaire, nous devons créer une nouvelle classe qui implémente l'interface `Sulu\Bundle\FormBundle\Dynamic\FormFieldTypeInterface :`
Créer un fichier TurnstileType.php dans l'arboresence de votre projet : src/Form/Dynamic/Types/ avec le code suivant :
<?php
namespace App\Form\Dynamic\Types;
use PixelOpen\CloudflareTurnstileBundle\Validator\CloudflareTurnstile;
use Sulu\Bundle\FormBundle\Dynamic\FormFieldTypeConfiguration;
use Sulu\Bundle\FormBundle\Dynamic\FormFieldTypeInterface;
use Sulu\Bundle\FormBundle\Entity\FormField;
use Symfony\Component\Form\FormBuilderInterface;
class TurnstileType implements FormFieldTypeInterface
{
public function getConfiguration(): FormFieldTypeConfiguration
{
return new FormFieldTypeConfiguration(
'app.form.dynamic.type_turnstile',
__DIR__ . '/../../../../config/form-fields/field_turnstile.xml',
'special',
);
}
public function build(FormBuilderInterface $builder, FormField $field, string $locale, array $options): void
{
$options['mapped'] = false;
$options['constraints'] = new CloudflareTurnstile();
$builder->add($field->getKey(), \PixelOpen\CloudflareTurnstileBundle\Type\TurnstileType::class, $options);
}
public function getDefaultValue(FormField $field, string $locale)
{
return null;
}
}
Comme vous pouvez le voir, la méthode getConfiguration() fait référence à un fichier XML qui contient toutes les propriétés supplémentaires que l'éditeur de contenu doit configurer lorsque le nouveau champ est sélectionné.
Il faut créer le fichier field_turnstile.xml dans /config/form-fields/ avec le code suivant :
<?xml version="1.0" ?>
<properties xmlns="http://schemas.sulu.io/template/template"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xi="http://www.w3.org/2001/XInclude"
xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/properties-1.0.xsd">
<xi:include
href="../../vendor/sulu/form-bundle/Resources/config/form-fields/header.xml"
xpointer="xmlns(sulu=http://schemas.sulu.io/template/template)xpointer(//sulu:property)"
/>
<property name="title" type="text_editor" mandatory="true">
<meta> <title>sulu_form.title</title>
</meta> </property>
<property name="shortTitle" type="text_line">
<meta> <title>sulu_form.short_title</title>
<info_text>sulu_form.short_title_description</info_text>
</meta> </property></properties>
Sulu doit être informé de l'existence du nouveau type de formulaire. Cela se fait en étiquetant le service avec l'étiquette `sulu_form.dynamic.type` dans le fichier services.yaml
App\Form\Dynamic\Types\TurnstileType:
tags:
- { name: 'sulu_form.dynamic.type', alias: 'turnstile' }
Nous allons rajouter la traduction de ce nouveau champ en créant / modifiant le fichier translations/admin.fr.json :
{
"app.form.dynamic.type_turnstile": "CloudFlare Turnstile"
}
Côté backend
N'oubliez pas de vider le cache de Sulu et de rafraîchir l'interface d'administration du CMS.
Vous devriez alors voir le nouveau champ créé dans la gestion de vos formulaires comme sur l'image.
Côté frontend
Et au niveau du frontend, vous pourrez également voir le captcha de Cloudflare.