Add ability to set the language of the ReCaptcha widget (#56)

* Detect locale and pass it to google

* Update documentation, and try a whole different approach.

* Remove unused import

* Adjust composer to allow builds to work.

* Adjust composer correctly to allow builds to work.

* fix tests


Co-authored-by: Marc Runkel <[email protected]>
Co-authored-by: karser <[email protected]>

Author: mrunkel

Form/Recaptcha3Type.php

@@ -33,6 +33,7 @@ public function buildView(FormView $view, FormInterface $form, array $options):
         $view->vars['enabled'] = $this->enabled;
         $view->vars['action_name'] = $options['action_name'];
         $view->vars['script_nonce_csp'] = $options['script_nonce_csp'] ?? '';
+        $view->vars['locale'] = $options['locale'] ?? 'en';
     }
 
     public function getParent(): string
@@ -52,6 +53,7 @@ public function configureOptions(OptionsResolver $resolver): void
             'site_key' => null,
             'host' => null,
             'action_name' => 'homepage',
+            'locale' => 'en',
             'script_nonce_csp' => '',
         ]);
     }

README.md

@@ -92,13 +92,15 @@ class TaskType extends AbstractType
             'constraints' => new Recaptcha3(),
             'action_name' => 'homepage',
             'script_nonce_csp' => $nonceCSP,
+            'locale' => 'de',
         ]);
     }
 }
 ```
 Notes:
 - The `action_name` parameter is [reCAPTCHA v3 action](https://developers.google.com/recaptcha/docs/v3#actions) which identifies the submission of this particular form in the Google reCAPTCHA dashboard, and confirming it is as expected in the backend is a recommended extra security step.
 - The `script_nonce_csp` parameter is optional. You must use the same nonce as in your Content-Security Policy header.
+- The `locale` parameter is optional. It defaults to English and controls the language on the reCaptcha widget.
 
 ### How to use reCAPTCHA globally (meaning even in China):
 
@@ -113,7 +115,10 @@ karser_recaptcha3:
 
 ### How can I set the captcha language for different locales?
 
-You should install the [Symfony Translation component](https://symfony.com/doc/current/translation.html).
+You can control the language in the small widget displayed by setting the locale in the options above.
+
+To change the error messages, you should install the [Symfony Translation component](https://symfony.com/doc/current/translation.html).
+
 Then replace the validation text with the translation keys for the message and messageMissingValue options:
 ```php
 $builder->add('captcha', Recaptcha3Type::class, [

Resources/views/Form/karser_recaptcha3_widget.html.twig

@@ -13,7 +13,7 @@
                     setTimeout(recaptchaCallback_{{ validJsId }}, 100000);
                 };
             </script>
-            <script type="text/javascript" src="https://{{ form.vars.host }}/recaptcha/api.js?render={{ form.vars.site_key }}&onload=recaptchaCallback_{{ validJsId }}" async defer{% if form.vars.script_nonce_csp is defined %} nonce="{{ form.vars.script_nonce_csp }}"{% endif %}></script>
+            <script type="text/javascript" src="https://{{ form.vars.host }}/recaptcha/api.js?render={{ form.vars.site_key }}&hl={{ form.vars.locale }}&onload=recaptchaCallback_{{ validJsId }}" async defer{% if form.vars.script_nonce_csp is defined %} nonce="{{ form.vars.script_nonce_csp }}"{% endif %}></script>
         {%- endif %}
     {% endapply %}
 {% endblock %}

Tests/FunctionalTest.php

@@ -38,7 +38,7 @@ public function testFormJavascriptPresent_ifEnabled()
 
         //THEN
         self::assertStringContainsString('<input type="hidden" id="form_captcha" name="form[captcha]" />', $view);
-        self::assertStringContainsString('<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=key&onload=recaptchaCallback_form_captcha" async defer nonce=""></script>', $view);
+        self::assertStringContainsString('<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=key&hl=en&onload=recaptchaCallback_form_captcha" async defer nonce=""></script>', $view);
         self::assertStringContainsString('var recaptchaCallback_form_captcha', $view);
         self::assertStringContainsString("document.getElementById('form_captcha').value = token;", $view);
     }
@@ -55,7 +55,7 @@ public function testHyphenConvertedToUnderscore()
 
         //THEN
         self::assertStringContainsString('<input type="hidden" id="form_capt-cha" name="form[capt-cha]" />', $view);
-        self::assertStringContainsString('<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=key&onload=recaptchaCallback_form_capt_cha" async defer nonce=""></script>', $view);
+        self::assertStringContainsString('<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=key&hl=en&onload=recaptchaCallback_form_capt_cha" async defer nonce=""></script>', $view);
         self::assertStringContainsString('var recaptchaCallback_form_capt_cha', $view);
         self::assertStringContainsString("document.getElementById('form_capt-cha').value = token;", $view);
     }
@@ -194,7 +194,7 @@ public function testFormJavascriptNoncePresent_ifSet()
         //THEN
         self::assertStringContainsString('<input type="hidden" id="form_captcha" name="form[captcha]" />', $view);
         self::assertStringContainsString('<script type="text/javascript" nonce="csp_nonce">', $view);
-        self::assertStringContainsString('<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=key&onload=recaptchaCallback_form_captcha" async defer nonce="csp_nonce"></script>', $view);
+        self::assertStringContainsString('<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=key&hl=en&onload=recaptchaCallback_form_captcha" async defer nonce="csp_nonce"></script>', $view);
         self::assertStringContainsString('var recaptchaCallback_form_captcha', $view);
         self::assertStringContainsString("document.getElementById('form_captcha').value = token;", $view);
     }
@@ -210,7 +210,7 @@ public function testFormJavascriptAltHostIsPreserved_ifSet()
         $view = $template->render(['form' => $form->createView()]);
 
         //THEN
-        self::assertStringContainsString('<script type="text/javascript" src="https://www.recaptcha.net/recaptcha/api.js?render=key&onload=recaptchaCallback_form_captcha" async defer nonce=""></script>', $view);
+        self::assertStringContainsString('<script type="text/javascript" src="https://www.recaptcha.net/recaptcha/api.js?render=key&hl=en&onload=recaptchaCallback_form_captcha" async defer nonce=""></script>', $view);
     }
 
     private function assertFormHasCaptchaError(FormInterface $form, string $expectedMessage)