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
});
});
}