WTforms中的RECaptcha无法渲染

Question

我正在使用wtforms-recaptcha这个工具来显示Recaptcha。

pip install wtforms-recaptcha

我参考了这个网站来进行安装：

https://pypi.python.org/pypi/wtforms-recaptcha

问题是，Recaptcha的代码直接显示在表单上。也就是说，我在表单上看到的是Recaptcha的代码，而不是实际的Recaptcha：

 <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LeCJvUSAAAAAAvqwJEueVdV0wyNLPtX6KWSTdXp"> </script> <noscript> <iframe src="https://www.google.com/recaptcha/api/noscript?k=6LeCJvUSAAAAAAvqwJEueVdV0wyNLPtX6KWSTdXp" 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>

表单代码在form.py文件中：

from wtforms import PasswordField, StringField, validators, widgets
from wtforms.form import Form
from wtfrecaptcha.fields import RecaptchaField

class ContactForm(Form):
"""Enables the user to provide feedback."""

first_name = StringField('First Name', [
    validators.DataRequired()
])
last_name = StringField('Last Name', [
    validators.DataRequired()
])
captcha = RecaptchaField('Captcha', [], public_key='6LeCJvUSAAAAAAvqwJEueVdV0wyNLPtX6KWSTdXp', private_key='6LeCJvUSAAAAADcUvYyLv8kt9ARiTAluDGqHBumY', secure=True)

在HTML中调用表单的代码：

                <form method="post">
                {% for field in form %}
                    <div class="form-group{% if field.errors %} has-error has-feedback{% endif %}">
                        <div class="row">
                            <div class="col-xs-12 col-md-4">
                                {{ field.label(class="control-label") }}
                            </div>

                            <div class="col-xs-12 col-md-8">
                                {{ field(class="form-control") }}
                            </div>
                        </div>
                        {% if field.errors %}
                            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                        {% endif %}
                        {% for error in field.errors %}
                            <p class="help-block text-danger">
                                <span class="glyphicon glyphicon-remove"></span>
                                {{ error }}
                            </p>
                        {% endfor %}
                    </div>
                {% endfor %}
                <br>
                <button type="submit" class="btn btn-primary">{{ title }}</button>
            </form>

路由调用的代码：

@app.route('/contact', methods=['GET', 'POST'])
def contact():
"""Display the contact page."""
form = ContactForm(request.form, captcha={'ip_address': request.remote_addr})
if request.method == 'POST' and form.validate():
    return "Thank you for contacting us."
return render_template(
    ...
)

Answer 1

问题在于，WTForms-RECAPTCHA 并不会返回一个 safe 字符串，而是返回一个 Unicode 字符串。这个底层的问题需要在 这里 修复（通过返回一个 wtforms.widgets.core.HTMLString 的实例，或者其他提供 __html__ 方法的东西）。

为了暂时解决这个问题，你可以在模板中简单地将字段标记为 safe：

<div class="col-xs-12 col-md-8">
    {{ field(class="form-control") | safe }}
</div>

或者，另外只将 re-captcha 字段标记为安全：

<div class="col-xs-12 col-md-8">
    {% if field.short_name == "captcha" %}
        {{ field(class="form-control") | safe }}
    {% else %}
        {{ field(class="form-control") }}
    {% endif %}
</div>

关于这个问题，有 一个 PR，并且在版本 0.3.2 中已经修复了这个问题。