如何使用EWZRecaptchaBundle在單個頁面上顯示多個recaptchas？

Question

我正在使用EWZRecaptchaBundle，這是一個爲Symfony提供reCAPTCHA表單字段的包。

當我嘗試渲染1 recaptcha它工作正常，但是當我嘗試2時，它只顯示第一個。

是否可以使用此捆綁包在單個頁面上顯示多個recaptchas？

我的代碼：

composer.json 

"require": { 
    ... 
    "excelwebzone/recaptcha-bundle": "~1.4.1", 
} 


AppKernel.php 

$bundles = array(
    // ... 
    new EWZ\Bundle\RecaptchaBundle\EWZRecaptchaBundle(), 
    // ... 
); 


# app/config/config.yml 

ewz_recaptcha: 
    public_key: here_is_your_public_key 
    private_key: here_is_your_private_key 
    locale_key: %kernel.default_locale% 


//form class 
<?php 

public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $builder 
     ->add('recaptcha', 'ewz_recaptcha', [ 
      'required' => true, 
      'constraints' => [ 
       new RecaptchaTrue() 
      ], 
      'mapped' => false, 
     ]) 


//twig template 
<div id="recaptcha_google_div" {% if not signupForm.recaptcha.vars.valid %}class="left"{% endif %}> 
    {{ form_widget(signupForm.recaptcha) }} 
    {{ form_errors(signupForm.recaptcha) }} 
</div> 

Answer 1

我擡起頭，這個問題對谷歌，但遺憾的是沒有找到答案。我設法找到一個解決辦法，所以這裏是我如何做它的工作：

首先，我做了一個自定義窗體主題：

{% block ewz_recaptcha_widget %} 
{% spaceless %} 
    {% if form.vars.ewz_recaptcha_enabled %} 
     {% if not form.vars.ewz_recaptcha_ajax %} 
      <script> 
       var captchaCallback = function() { 
        var captchas = document.getElementsByClassName('g-recaptcha'); 

        for (var i = 0; i < captchas.length; i++) { 
         grecaptcha.render(captchas[i], { 
          'sitekey': '{{ form.vars.public_key }}', 
          'theme': '{{ attr.options.theme }}' 
         }); 
        } 
       }; 
      </script> 
      <div class="g-recaptcha" data-theme="{{ attr.options.theme }}" data-size="{{ attr.options.size }}" data-type="{{ attr.options.type }}" data-sitekey="{{ form.vars.public_key }}" {% if attr.options.expiredCallback is defined %}data-expired-callback="{{ attr.options.expiredCallback }}"{% endif %}></div> 
      <noscript> 
       <div style="width: 302px; height: 352px;"> 
        <div style="width: 302px; height: 352px; position: relative;"> 
         <div style="width: 302px; height: 352px; position: absolute;"> 
          <iframe src="https://www.google.com/recaptcha/api/fallback?k={{ form.vars.public_key }}" 
            frameborder="0" scrolling="no" 
            style="width: 302px; height:352px; border-style: none;" 
          > 
          </iframe> 
         </div> 
         <div style="width: 250px; height: 80px; position: absolute; border-style: none; bottom: 21px; left: 25px; margin: 0; padding: 0; right: 25px;"> 
          <textarea id="g-recaptcha-response" name="g-recaptcha-response" 
             class="g-recaptcha-response" 
             style="width: 250px; height: 80px; border: 1px solid #c1c1c1; margin: 0; padding: 0; resize: none;" 
          > 
          </textarea> 
         </div> 
        </div> 
       </div> 
      </noscript> 
     {% else %} 
      <div id="ewz_recaptcha_div"></div> 

      <script type="text/javascript"> 
      (function() { 
       var script = document.createElement('script'); 
       script.type = 'text/javascript'; 
       script.onload = function() { 
        Recaptcha.create('{{ form.vars.public_key }}', 'ewz_recaptcha_div', {{ attr.options|default({})|json_encode|raw }}); 
       }; 
       script.src = '{{ form.vars.url_api }}'; 
       {% if attr.options.defer is defined and attr.options.defer %}script.defer = true;{% endif %} 
       {% if attr.options.async is defined and attr.options.async %}script.async = true;{% endif %} 
       document.getElementsByTagName('head')[0].appendChild(script); 
      })(); 
      </script> 
     {% endif %} 
    {% endif %} 
{% endspaceless %} 
{% endblock ewz_recaptcha_widget %} 

這幾乎是相同的形式主題爲默認的一個，但我改變兩件事情。我添加了一個回調函數和我刪除了谷歌的reCAPTCHA API腳本（以防止它調用回調函數兩次）。

然後，你將不得不手動加載的ReCaptcha API腳本在你的模板之一：

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl={{ app.request.locale }}&amp;onload=captchaCallback&amp;render=explicit" defer async></script> 

而且你需要加載您的自定義窗體的主題無論您的形式裝：

{% form_theme form 'form/captcha_layout.html.twig' %} 

這應該允許您在同一頁面上擁有多個驗證碼。