Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/etalab/tchatcha

Captchacha: solution de vérification de formulaire
https://github.com/etalab/tchatcha

Last synced: 16 days ago
JSON representation

Captchacha: solution de vérification de formulaire

Awesome Lists containing this project

README 

        
#+title: Tchatcha: solution de vérification de formulaire



** Présentation



Ce dépôt contient une solution de test (à la Captcha®) mettant l'accès

sur l'accessibilité.



Le code a été initialement développée par la société [[https://www.artifica.fr/][Artifica]], dans le

contexte de la validation de formulaires pour le système de gestion de

contenu [[https://typo3.org/][TYPO3]].



La solution est actuellement disponible en PHP pour la partie serveur

et en Javascript pour la partie client, mais d'autres implémentations

sont possibles.



Si vous souhaitez contribuer, n'hésitez pas à [[mailto:[email protected]][nous contacter]] ou à

[[https://github.com/etalab/etalabcha/issues][ouvrir une issue]].



** Prise en main



Cette solution a d'abord été conçue pour une intégration au système de

gestion de contenu [[https://sill.etalab.gouv.fr/fr/software?id=203][TYPO3]].  Il devrait néanmoins servir de base pour

une intégration ailleurs.  Ces éléments de documentation peuvent être

améliorés : si vous avez une question ou si un point n'est pas clair,

n'hésitez pas à [[https://github.com/etalab/tchatcha/issues/new][ouvrir une issue]].



*** Principe de fonctionnement



**** Côté frentend / Javascript



La partie JS est codée en natif.  Le code est totalement indépendant

de toute autre librairie Javascript.



Mettre l’appel du fichier dans le pied de page du site:



: 



Ajouter à la fin du formulaire une balise de réception.



: 



À la fin du chargement de la page, le code Javascript va initialiser

le test dans le formulaire.



La fonction =init()= est lancée sur les éléments =.tchatcha=.



On peut effectivement avoir plusieurs formulaires dans la même page

avec des résolutions de test différentes.



Chaque élément passe par la fonction =prepare()= qui transmet la demande

de création d’un test via la fonction =execute()= au PHP.



Le retour de réponse est traité par la fonction =render()= qui injecte

le code dans l’élément =.tchatcha=.



Pour lancer la vérification du test, ajouter un événement au =submit=

du formulaire.



Cette partie a été ajouté afin d’avoir la main mise sur le retour de

la validation du test et ainsi agir selon la réponse.



Cela permet en autre d’envoyer le formulaire si la réponse est

positive, ou de lancer d’autres tests.



: document.forms['myForm857'].onsubmit = function(event){

:     window.tchatcha.validation(this, function(response, error){

:         if(!response)

:         {

:             if(error == 'msgError1')

:             {

:                 alert('Merci de répondre au test');

:             }

: 

:             if(error == 'msgError2')

:             {

:                 alert('Erreur sur la réponse au test. Merci de recommencer');

:             }

:         }

:         else

:         {

:             alert('Le test est validé');

:         }

:     });

:     event.preventDefault();

: };



On peut enlever cette étape et l’inclure dans l’initialisation du

test et injecter le onsubmit, mais il faut se garder la possibilité

d’un callback ou promise.



**** Côté backend / PHP (ou tout autre langage de programmation)



La partie PHP est codée en natif. Le code est totalement indépendant

de toute autre librairie PHP.



Le programme réagit à deux sortes de demandes, on peut étoffer les

fonctionnalités selon les besoins :



- render : création d’un test

- validate : vérification du test



À l’appel de celui-ci le code crée une instance de la classe

=tx_tchatchaform_tchatcha()=.



*** Éléments d'accessibilité



Concernant l’accessibilité, le but recherché est d'avoir un test

textuel.  À l’origine ce test était un simple champ texte et

l’internaute devait rentrer la résolution du test.  Nous sommes

passé sur des boîte à cocher invisibles avec un affichage de carrés

afin de rendre le test plus convivial.  Le tout reste /responsive/.



Une évolution possible est d'ajouter un bouton son, pour une lecture

vocale.



*** Intégrer à TYPO3



La solution Tchatcha est complétement intégrable dans le système de

gestion de contenu TYPO3.



A l’inverse de la première méthode en javascript direct, la validation

se fait en soumettant le formulaire.



On peut faire un mélange des deux principes, clé et rendu en backend,

et test de la clé en ajax.



Mais la méthode est identique dans TYPO3 que dans une autre solution.



*** Intégrer ailleurs



Au chargement du formulaire (ou à la création), instanciez la class

=tx_tchatchaform_tchatcha=:



: $secure = new tx_tchatchaform_tchatcha();



Il est possible d’injecter les messages d’erreurs pour les inclures

dans le rendu.



: $secure->_errorArray = $this->_arrErrors;



Récupérez le rendu =html= du test:



: echo $secure->makeHtmlCode();



Récupérez la clé de chiffrement, une valeur unique qui permettra le

test.  Celle-ci peut être mise dans un champ =hidden= de votre formulaire :



: $arguments['checkKey'] =  $secure->getSecurCryptKey();



Enfin à la soumission du formulaire en =GET= ou en =POST=, on teste la

valeur envoyée par l’internaute et la clé de chiffrement dans votre

code de validation,



: $secure = new tx_tchatchaform_tchatcha();

: $response = $secure->validate($arguments['checkKey'], $arguments['test']);



Le retour de =validate= est un booléen.



** Contribution



Vos contributions sont les bienvenues ! Notamment:



- pour tester et améliorer la documentation ;

- pour moderniser l'écriture de la partie Javascript ;

- pour implémenter la partie backend dans d'autres langages.



Si besoin, n'hésitez pas à à [[https://github.com/etalab/etalabcha/issues][ouvrir une issue]].



** Licence



Le code source de ce dépôt est publié sous [[file:LICENSE][licence Apache 2.0]].



2020 DINUM, Etalab.