2013-07-23 3 views
1

Я пытаюсь настроить recaptcha внутри моей формы, но я получаю только ошибку javascript. Может ли это быть сделано, или мне нужно самостоятельно изменить код Flask-WTF?Как использовать пользовательскую тему recaptcha с Flask-WTF

+0

Как вы попробовали стильный recaptcha? Вы видели https://developers.google.com/recaptcha/docs/customization? – tbicr

+0

Да, я пытался это сделать, но вы не можете управлять кодом, введенным Flask-WTF, без слияния с ним. Я, наконец, использовал тему «белый», не идеально, но достаточно близко. – voodmania

+0

Вы пытались изменить recaptcha css с собственными стилями (с или без '! Important')? – tbicr

ответ

2

Пример из bbenne10 почти делает это за одной маленькой детали, за исключением: помимо сдачи theme: 'custom' в вашей конфигурации вы должны также указать custom_theme_widget: 'recaptcha_widget'. Или что-то будет идентификатором контейнера, где будет загружено фактическое изображение, и, конечно, контейнер должен присутствовать в вашем html.

Таким образом, окончательные конфигурации будут выглядеть следующим образом:

RECAPTCHA_PUBLIC_KEY = 'key' 
RECAPTCHA_PRIVATE_KEY = 'secret' 
RECAPTCHA_OPTIONS = dict(
    theme='custom', 
    custom_theme_widget='recaptcha_widget' 
) 

Это сказал, что есть a hardcoded template, что вы можете переопределить с незарегистрированной RECAPTCHA_TEMPLATE вариант. Поместите все, что вам нравится, и оно будет использоваться в качестве базы для всех поддерживаемых тем recaptcha.

Еще один вариант заключается в расширении от RecaptchaField и сделать его использовать пользовательские RecaptchaWidget таким образом, вы можете сказать ему, чтобы flask.render_template() с любым шаблоном вы хотите вместо жесткого кодирования HTML в конфигурацию.

0

Через пару часов, пытаясь получить индивидуальный дизайн, я не мог заставить его работать. Flask-WTF выводит весь код html и javascript для работы recaptcha. Вы не можете изменить свое поведение, не редактируя сам код расширения.

1

Теперь вы можете сделать это довольно легко, на самом деле. Сначала установите (или продолжите) RECAPTCHA_OPTIONS в словарь, содержащий {'theme': 'custom'} (и убедитесь, что вы делаете app.config.from_object(__name__) или тому подобное), а затем убедитесь, что ваш шаблон содержит все необходимые элементы DOM, указанные в разделе пользовательской темы, найденном here.

Пример из недавнего сайта:

# IN YOUR MAIN PYTHON FILE 
RECAPTCHA_OPTIONS = {'theme': 'custom'} 
RECAPTCHA_PRIVATE_KEY = 'private_key' 
RECAPTCHA_PUBLIC_KEY = 'public_key' 
app = Flask(__name__) 
app.config.from_object(__name) 


# IN THE TEMPLATE (THIS USES TWITTERBOOTSTRAP'S FORM FORMATTING) 
<div class='control-group' id='recaptcha_wrapper'> 
<label class='control-label'>Enter the words above:</label> 
<div class='controls'> 
    <input type='text' id='recaptcha_response_field'></input> 
    <a id="recaptcha_reload" class="btn" href="javascript:Recaptcha.reload()"><i class="icon-refresh"></i></a> 
    <a class="btn recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"> 
     <i title="Get an audio CAPTCHA" class="icon-headphones"></i></a> 
    <a class="btn recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"> 
     <i title="Get an image CAPTCHA" class="icon-picture"></i></a> 
    <a class="btn" href="javascript:Recaptcha.showhelp()"><i class="icon-question-sign"></i></a> 
    # This causes wtf-forms to drop in the js that populates the above elements 
    {{ form.recaptcha() }} 
</div> 
</div> 
Смежные вопросы