我正在尝试在我的表单中自定义 recaptcha,但我只收到一个 javascript 错误。可以制作,还是我必须自己修改 Flask-WTF 代码?
3 回答
来自 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'
)
也就是说,有一个硬编码模板RECAPTCHA_TEMPLATE
,您可以使用未记录的选项覆盖该模板。把你喜欢的任何东西放在那里,它将用作所有recaptcha支持的主题的基础。
另一种选择是扩展RecaptchaField
并使其使用您的自定义RecaptchaWidget
方式,您可以flask.render_template()
使用您喜欢的任何模板告诉它,而不是将 html 硬编码到配置中。
实际上,您现在可以很容易地做到这一点。首先,设置(或扩展)RECAPTCHA_OPTIONS
包含{'theme': 'custom'}
(并确保您正在执行app.config.from_object(__name__)
或类似)的字典,然后确保您的模板包含在此处找到的自定义主题部分下指定的所有必需 DOM 元素。
来自最近网站的示例:
# 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>
经过几个小时试图让定制设计工作后,我无法让它工作。Flask-WTF 输出所有的 html 和 javascript 代码,以供 recaptcha 工作。如果不编辑扩展代码本身,您将无法更改其行为。