Question

我正在尝试自定义我的表单中的recaptcha，但我只收到一个javascript错误。它可以制作，还是我必须自己修改Flask-WTF代码？

Answer 1

bbenne10的示例几乎完成了除了一个小细节：除了将theme: 'custom'放入配置之外，还必须指定custom_theme_widget: 'recaptcha_widget'。或者任何将注入实际图像的容器id，当然容器必须存在于你的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硬编码到配置中。

Answer 2

实际上，你现在可以很容易地做到这一点。首先，将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>

Answer 3

在尝试定制设计工作几个小时后，我无法使其正常工作。 Flask-WTF输出所有html和javascript代码以便recaptcha工作。如果不编辑扩展代码本身，则无法更改其行为。

如何在Flask-WTF中使用recaptcha自定义主题

3 个答案: