ReCaptcha CSS не применяется в Meteor

Я пытаюсь вставить reCaptcha в шаблон метеора.

ReCaptcha работает, но не имеет стилей CSS и ключи конфигурации не применяются.

Я добавил скрипт конфигурации перед формой:

<script type="text/javascript">
 var RecaptchaOptions = {
     theme : 'white',
     lang : 'en'
 };
</script>

и внутри формы я добавил:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU">
</script>
<noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU"
                height="300" width="500" frameborder="0"></iframe><br>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40">
        </textarea>
        <input type="hidden" name="recaptcha_response_field"
               value="manual_challenge">
</noscript>

1 ответ

Решение

Я наконец-то сделал показ recaptcha с помощью CSS с помощью API recaptcha AJAX. В шаблоне HTML я добавил следующий код в форму:

<div class="captcha-container">
    <div id="rendered-captcha-container"></div>
</div>

В файле client.js я загрузил скрипт после рендеринга шаблона. Дождался загрузки скрипта, затем создал recaptcha:

Template.myTemplate.rendered = function() {
     $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js', function() {

        Recaptcha.create('add_your_public_key_here', 'rendered-captcha-container', {
            theme: 'red',
            callback: Recaptcha.focus_response_field
        });

    });    
}
Другие вопросы по тегам