WIP feat captchEtat V2 (#224)

Adil-SL · adil.slassi · erdnaxelaweb · web-flow · commit da0bb72e386d · 2025-02-14T09:52:54.000+01:00
* feat: upgrade to CaptchEtat V2

---------

Co-authored-by: adil.slassi &lt;adil.slassi@almaviacx.com&gt;
Co-authored-by: Florian ALEXANDRE &lt;f.alexandre@novactive.com&gt;
diff --git a/components/CaptchEtatBundle/src/bundle/Controller/CaptchEtatController.php b/components/CaptchEtatBundle/src/bundle/Controller/CaptchEtatController.php
@@ -5,22 +5,16 @@
 namespace AlmaviaCX\Bundle\CaptchEtatBundle\Controller;
 
 use AlmaviaCX\Bundle\CaptchEtat\Api\Gateway;
-use AlmaviaCX\Bundle\CaptchEtat\Challenge\ChallengeGenerator;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\ResponseHeaderBag;
 
 class CaptchEtatController
 {
-    protected Gateway $gateway;
-    protected ChallengeGenerator $challengeGenerator;
-
     public function __construct(
-        Gateway $gateway,
-        ChallengeGenerator $challengeGenerator
+        Gateway $gateway
     ) {
         $this->gateway = $gateway;
-        $this->challengeGenerator = $challengeGenerator;
     }
 
     /**
@@ -31,34 +25,20 @@ public function apiSimpleCaptchaEndpointAction(Request $request): Response
         $get = $request->get('get');
         $tech = $request->get('t');
         $type = $request->get('c');
-        $content = $this->gateway->getSimpleCaptchaEndpoint($get, null, $tech, $type);
+        $content = $this->gateway->getSimpleCaptchaEndpoint($get, $tech, $type);
         $response = new Response($content);
-        if ('script-include' === $get) {
-            $response->headers->set('Content-Type', 'text/javascript');
-        } elseif ('image' === $get) {
-            $response->headers->set('Content-Disposition', $response->headers->makeDisposition(
-                ResponseHeaderBag::DISPOSITION_INLINE,
-                'captcha.png'
-            ));
-            $response->headers->set('Content-Type', 'image/png');
-        } elseif ('sound' === $get) {
+
+        if ('sound' === $get) {
             $response->headers->set('Content-Disposition', $response->headers->makeDisposition(
                 ResponseHeaderBag::DISPOSITION_INLINE,
                 'captcha-sound.wave'
             ));
-            $response->headers->set('Content-Type', 'audio/wave');
+            $response->headers->set('Content-Type', 'audio/x-wav');
+        } else {
+            $response->headers->set('Content-Type', 'application/json');
         }
         $response->setPrivate();
 
         return $response;
     }
-
-    public function getCaptcha(): Response
-    {
-        $challenge = ($this->challengeGenerator)();
-        $response = new Response($challenge->captchaHtml);
-        $response->setPrivate();
-
-        return $response;
-    }
 }
diff --git a/components/CaptchEtatBundle/src/bundle/Resources/config/routes.yaml b/components/CaptchEtatBundle/src/bundle/Resources/config/routes.yaml
@@ -2,8 +2,3 @@ captchetat.endpoint:
     path: /api/simple-captcha-endpoint
     defaults:
         _controller: 'AlmaviaCX\Bundle\CaptchEtatBundle\Controller\CaptchEtatController::apiSimpleCaptchaEndpointAction'
-
-captchetat.html:
-    path: /api/simple-captcha
-    defaults:
-        _controller: 'AlmaviaCX\Bundle\CaptchEtatBundle\Controller\CaptchEtatController::getCaptcha'
diff --git a/components/CaptchEtatBundle/src/bundle/Resources/config/services.yaml b/components/CaptchEtatBundle/src/bundle/Resources/config/services.yaml
@@ -20,14 +20,6 @@ services:
             $url: '%captchetat_api_url%'
             $timeout: '%captchetat_timeout%'
 
-    AlmaviaCX\Bundle\CaptchEtat\Challenge\ChallengeGenerator:
-        arguments:
-            $configResolver: '@Ibexa\Contracts\Core\SiteAccess\ConfigResolverInterface'
-            $localeConverter: '@Ibexa\Core\MVC\Symfony\Locale\LocaleConverterInterface'
-            $gateway: '@AlmaviaCX\Bundle\CaptchEtat\Api\Gateway'
-            $translator: '@Symfony\Contracts\Translation\TranslatorInterface'
-            $logger: '@AlmaviaCX\Bundle\CaptchEtat\Logger\CaptchEtatLogger'
-
     AlmaviaCX\Bundle\CaptchEtat\Challenge\ChallengeValidator:
         arguments:
             $gateway: '@AlmaviaCX\Bundle\CaptchEtat\Api\Gateway'
@@ -47,10 +39,16 @@ services:
     AlmaviaCX\Bundle\CaptchEtatBundle\Controller\CaptchEtatController:
         arguments:
             $gateway: '@AlmaviaCX\Bundle\CaptchEtat\Api\Gateway'
-            $challengeGenerator: '@AlmaviaCX\Bundle\CaptchEtat\Challenge\ChallengeGenerator'
         tags:
             - controller.service_arguments
 
+    AlmaviaCX\Bundle\CaptchEtat\Twig\CaptchEtatExtension:
+        arguments:
+            $configResolver: '@Ibexa\Contracts\Core\SiteAccess\ConfigResolverInterface'
+            $localeConverter: '@Ibexa\Core\MVC\Symfony\Locale\LocaleConverterInterface'
+        tags:
+            - { name: twig.extension }
+
 #    AlmaviaCX\Bundle\CaptchEtat\FormBuilder\FieldType\Field\Mapper\ButtonFieldMapperDecorator:
 #        decorates: Ibexa\FormBuilder\FieldType\Field\Mapper\ButtonFieldMapper
 #        arguments:
diff --git a/components/CaptchEtatBundle/src/bundle/Resources/public/js/captchetat-widget.js b/components/CaptchEtatBundle/src/bundle/Resources/public/js/captchetat-widget.js
@@ -1,42 +1,6 @@
-
-/**
- * @param {HTMLElement} container
- */
-export const addScriptsToHead = container => {
-    const scriptEls = container.querySelectorAll('script');
-    /** @type {HTMLScriptElement} */
-    for (const scriptEl of scriptEls) {
-        if (
-            !document.head.querySelector('script[src="' + scriptEl.src + '"]')
-        ) {
-            /** @type {HTMLScriptElement} */
-            const el = document.createElement('script');
-            el.type = scriptEl.type;
-            el.src = scriptEl.src;
-            document.head.appendChild(el);
-        }
-        scriptEl.remove()
-    }
-};
-
-/**
- * @param {HTMLElement} container
- */
-export const addLinksToHead = container => {
-    const linkEls = container.querySelectorAll('link');
-    /** @type {HTMLLinkElement} */
-    for (const linkEl of linkEls) {
-        if (!document.head.querySelector('link[href="' + linkEl.href + '"]')) {
-            /** @type {HTMLLinkElement} */
-            const el = document.createElement('link');
-            el.type = linkEl.type;
-            el.rel = linkEl.rel;
-            el.href = linkEl.href;
-            document.head.appendChild(el);
-        }
-        linkEl.remove()
-    }
-};
+function getApiUrl(get, type) {
+    return "/api/simple-captcha-endpoint?get=" + get + "&c=" + type;
+}
 
 const captchaEtat = (function () {
     function _init(container = document) {
@@ -45,39 +9,98 @@ const captchaEtat = (function () {
         for (const widget of widgets) {
             const htmlContainer = widget.querySelector('.captcha-html-container');
             const idInput = widget.querySelector('.captcha-input [name*="[captcha_id]"]')
-            if(htmlContainer.querySelector('.captcha-html')) {
-                return
-            }
+            const captchaType = widget.dataset.type
+            fetch(
+                getApiUrl("image", captchaType),
+                {
+                    method: "GET",
+                    headers: {"Content-Type": "application/json"}
+                }
+            ).then((response => {
+                if (!response.ok) {
+                    throw new Error("La réponse n'est pas OK");
+                }
+                return response.json()
+            })).then((response => {
+                let uuid = response.uuid;
+
+                const captchaContainer = document.createElement("div");
+                captchaContainer.style.display = "flex";
+                captchaContainer.style.flexDirection = "row";
+                htmlContainer.prepend(captchaContainer);
+
+                const imageElement = document.createElement("img");
+                imageElement.src = `${response.imageb64}`;
+                imageElement.alt = "Rewrite the captcha code";
+                captchaContainer.appendChild(imageElement);
+
+                const refreshCaptcha = () => {
+                    fetch(
+                        getApiUrl("image", captchaType),
+                        {
+                            method: "GET",
+                            headers: {"Content-Type": "application/json"}
+                        }
+                    ).then((refreshResponse => {
+                        if (!refreshResponse.ok) throw new Error("La réponse n'est pas OK");
+                        return refreshResponse.json()
+                    })).then((refreshResponse => {
+                        imageElement.src = refreshResponse.imageb64;
+                        uuid = refreshResponse.uuid;
+                        idInput.setAttribute("value", uuid)
+                    })).catch((e => {
+                        console.error("Erreur lors de la récupération du captcha")
+                    }))
+                }
+
+                const logosElement = document.createElement("div");
+                logosElement.style.marginLeft = "10px";
+                logosElement.style.display = "flex";
+                logosElement.style.flexDirection = "column";
+                logosElement.style.justifyContent = "space-evenly";
+                captchaContainer.appendChild(logosElement);
 
-            fetch('/api/simple-captcha').then((response) => {
-                return response.text();
-            }).then((html) => {
-                const tmp = document.createElement('div');
-                tmp.innerHTML = html;
-                addLinksToHead(tmp);
-                addScriptsToHead(tmp);
-                const originalIdInput = tmp.querySelector('[name^="BDC_VCID"]')
-                idInput.value = originalIdInput.value;
+                const playButtonElement = document.createElement("button");
+                playButtonElement.type = "button";
+                playButtonElement.title = "Speak the captcha code";
+                playButtonElement.alt = "Speak the captcha code";
+                playButtonElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="25" height="25" viewBox="0 0 75 75"\nid="iconSound">\n<path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z"\n style="stroke:#111;stroke-width:5;stroke-linejoin:round;fill:#111;"/>\n<path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6"\n style="fill:none;stroke:#111;stroke-width:5;stroke-linecap:round"/>\n</svg>';
+                logosElement.appendChild(playButtonElement),
+                    playButtonElement.addEventListener("click", () => {
+                        try {
+                            new Audio(getApiUrl("sound", captchaType) + "&t=" + uuid).play()
+                        } catch (e) {
+                            console.error("Erreur lors de la récupération du son");
+                            refreshCaptcha()
+                        }
+                    });
 
-                const tmpRoot = tmp.children.item(0);
-                tmpRoot.removeAttribute('id')
-                tmpRoot.classList.add('captcha-html');
+                const refreshButtonElement = document.createElement("button");
+                refreshButtonElement.type = "button";
+                refreshButtonElement.title = "Generate a new captcha";
+                refreshButtonElement.alt = "Generate a new captcha";
+                refreshButtonElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 17 20" fill="none"\nid="iconReload">\n<path d="M9.00003 4.0001C11.1 4.0001 13.1 4.8001 14.6 6.3001C17.7 9.4001 17.7 14.5001 14.6 17.6001C12.8 19.5001 10.3 20.2001 7.90003 19.9001L8.40003 17.9001C10.1 18.1001 11.9 17.5001 13.2 16.2001C15.5 13.9001 15.5 10.1001 13.2 7.7001C12.1 6.6001 10.5 6.0001 9.00003 6.0001V10.6001L4.00003 5.6001L9.00003 0.600098V4.0001ZM3.30003 17.6001C0.700029 15.0001 0.300029 11.0001 2.10003 7.9001L3.60003 9.4001C2.50003 11.6001 2.90003 14.4001 4.80003 16.2001C5.30003 16.7001 5.90003 17.1001 6.60003 17.4001L6.00003 19.4001C5.00003 19.0001 4.10003 18.4001 3.30003 17.6001V17.6001Z"\n fill="black"/>\n</svg>';
+                logosElement.appendChild(refreshButtonElement);
+                refreshButtonElement.addEventListener("click", refreshCaptcha);
 
-                htmlContainer.prepend(tmpRoot);
+                idInput.setAttribute("value", uuid)
 
-                const soundLink = widget.querySelector('.BDC_SoundLink');
-                const answerInput = widget.querySelector('.captcha-input input[type="text"]');
-                soundLink.addEventListener('click', function (e) {
-                    if(answerInput) {
-                        answer.removeAttribute('disabled');
-                        answerInput.focus()
-                    }
-                })
-            })
+                if (captchaType.includes("FR")) {
+                    playButtonElement.setAttribute("title", "Énoncer le code du captcha")
+                    refreshButtonElement.setAttribute("title", "Générer un nouveau captcha")
+                    imageElement.alt = "Recopier le code de sécurité de cette image";
+                    playButtonElement.title = "Enoncer le code du captcha";
+                    playButtonElement.alt = "Enoncer le code du captcha";
+                    refreshButtonElement.title = "Générer un nouveau captcha";
+                    refreshButtonElement.alt = "Générer un nouveau captcha";
+                }
+            })).catch((e => {
+                console.error("Erreur lors de la récupération du captcha")
+            }))
         }
     }
 
-    return { init: _init };
+    return {init: _init};
 })();
 
 export default captchaEtat;
diff --git a/components/CaptchEtatBundle/src/bundle/Resources/templates/captchetat-fields.html.twig b/components/CaptchEtatBundle/src/bundle/Resources/templates/captchetat-fields.html.twig
@@ -9,7 +9,8 @@
 {% block captchetat_widget %}
     {% apply spaceless %}
         {%- set attr = attr|merge({
-            'class': 'widget-container row align-items-center js-captcha-widget'
+            'class': 'widget-container row align-items-center js-captcha-widget',
+            'data-type': captchetat_type()
         }) -%}
         <div {{ block('widget_container_attributes') }}>
             <div class="captcha captcha-html-container col-lg-4 col-md-6 d-flex align-items-center">
diff --git a/components/CaptchEtatBundle/src/lib/Api/Gateway.php b/components/CaptchEtatBundle/src/lib/Api/Gateway.php
@@ -34,45 +34,33 @@ public function __construct(
     }
 
     public function getSimpleCaptchaEndpoint(
-        string $captchaType = 'html',
-        ?string $mode = null,
+        string $captchaType,
         ?string $tech = null,
         string $type = 'numerique6_7CaptchaFR'
     ): string {
         $token = $this->oauthGateway->getOauth20Token();
-        $available = [
-            'html',
-            'layout-stylesheet',
-            'script-include',
+        $availableTypes = [
             'image',
-            'reload-icon',
-            'sound-icon',
-            'reload-disabled-icon',
-            'sound-disabled-icon',
             'sound',
-            'p',
         ];
 
-        if (!in_array($captchaType, $available)) {
+        if (!in_array($captchaType, $availableTypes)) {
             throw new RuntimeException(
                 sprintf(
                     'c value "%s" not alloweb. One of %s waiting',
                     $captchaType,
-                    implode(', ', $available)
+                    implode(', ', $availableTypes)
                 )
             );
         }
 
-        $service = '/piste/captcha/simple-captcha-endpoint';
+        $service = '/piste/captchetat/v2/simple-captcha-endpoint';
         $method = 'GET';
 
         $queryParams = [
             'get' => $captchaType,
             'c' => $type,
         ];
-        if ($mode) {
-            $queryParams['mode'] = $mode;
-        }
         if ($tech) {
             $queryParams['t'] = $tech;
         }
@@ -113,7 +101,7 @@ public function validateChallenge(
         string $answer
     ): bool {
         $token = $this->oauthGateway->getOauth20Token();
-        $service = '/piste/captcha/valider-captcha';
+        $service = '/piste/captchetat/v2/valider-captcha';
         $method = 'POST';
 
         $url = $this->url.$service;
@@ -125,7 +113,7 @@ public function validateChallenge(
             ],
             'timeout' => $this->timeout,
             'body' => json_encode([
-                                      'id' => $captchaId,
+                                      'uuid' => $captchaId,
                                       'code' => $answer,
                                   ]),
         ];
diff --git a/components/CaptchEtatBundle/src/lib/Api/OauthGateway.php b/components/CaptchEtatBundle/src/lib/Api/OauthGateway.php
@@ -52,7 +52,7 @@ public function getOauth20Token(): string
             'grant_type' => 'client_credentials',
             'client_id' => $this->clientId,
             'client_secret' => $this->clientSecret,
-            'scope' => ['resource.READ', 'piste.captchetat'],
+            'scope' => ['aife.captchetatv2', 'piste.captchetat'],
         ];
 
         $url = $this->url.$service;
diff --git a/components/CaptchEtatBundle/src/lib/Challenge/ChallengeGenerator.php b/components/CaptchEtatBundle/src/lib/Challenge/ChallengeGenerator.php
diff --git a/components/CaptchEtatBundle/src/lib/FormBuilder/FieldType/Field/Mapper/ButtonFieldMapperDecorator.php b/components/CaptchEtatBundle/src/lib/FormBuilder/FieldType/Field/Mapper/ButtonFieldMapperDecorator.php
diff --git a/components/CaptchEtatBundle/src/lib/Twig/CaptchEtatExtension.php b/components/CaptchEtatBundle/src/lib/Twig/CaptchEtatExtension.php
