WTForms在同一页面上呈现两个带有Recaptcha字段的表单时，只显示一个表单

Question

我正在使用带有WTforms的Flask。我也使用WTFRecaptcha插件，以使用验证码字段。

原来我需要在同一个页面上使用两个表单。当我在每个表单上分配一个验证码字段时，其中一个验证码不会在.html页面上呈现。这是因为captcha总是以相同的ID创建:

验证码和表单声明在我的form .py文件:

from wtforms import PasswordField, StringField, validators, widgets, RadioField
from wtforms.form import Form
from wtfrecaptcha.fields import RecaptchaField
class FirstForm(Form):
    """First Form"""
    #Omitting fields here
    captcha_1 = RecaptchaField('Captcha', [], public_key='OMITTING_PUBLIC_KEY', private_key='OMITTING_PRIVATE_KEY', secure=True)
class Secondform(Form):
    """Second Form"""
    #Omitting fields here
    captcha_2 = RecaptchaField('Captcha', [], public_key='OMITTING_PUBLIC_KEY', private_key='OMITTING_PRIVATE_KEY', secure=True)

路由声明:

#!/usr/bin/env python
from flask import Flask, render_template, request
from flask.ext.assets import Environment
from forms import FirstForm, SecondForm
from flask import request
from flask import jsonify
@app.route('/test')
def test_form():
    """Test."""
    form_1 = FirstForm(request.form, captcha_1={'ip_address': request.remote_addr})
    form_2 = SecondForm(request.form, captcha_2={'ip_address': request.remote_addr})
    if request.method == 'POST' and (form_1.validate() or form_2.validate()) :
        return "Instructions have been sent to your e-mail"
     return render_template(
        'test-form.html',
        title='Get Started',
        form_1=form_1,
        form_2=form_2       
    )    

test-form.html

{% extends "base.html" %}
{% block content %}
    <div class="container block-form">
        <div class="row first">
            <div class="col-xs-12 col-md-7 border-right">
                <h1 class="title">{{ title }}</h1>
                <p>{{ description }}</p>
                <div class="form-area">
                    <form method="post">
                        {% for field in form_1 %}
                            <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") | safe }}
                                    </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-gradient">Submit</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="row second">
            <div class="col-xs-12 col-md-7 border-right">
                <h1 class="title">{{ title }}</h1>
                <p>{{ description }}</p>
                <div class="form-area">
                    <form method="post">
                        {% for field in form_2 %}
                            <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") | safe }}
                                    </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-gradient">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

form_1中captcha呈现的代码(直到div元素):

<script src="https://www.google.com/recaptcha/api/challenge?k=6LeCJvUSAAAAAAvqwJEueVdV0wyNLPtX6KWSTdXp" type="text/javascript">
//Other code here omitted
<script src="https://www.google.com/recaptcha/api/js/recaptcha.js" type="text/javascript">
//Other code here omitted
<div id="recaptcha_widget_div" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio">

为form_2中的captcha呈现的代码(直到div元素):

<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LeCJvUSAAAAAAvqwJEueVdV0wyNLPtX6KWSTdXp">
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha.js"/>
<div id="recaptcha_widget_div" style="display: none;"/>
<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>

结果:只显示一个验证码。

…因此，如果我有两个captcha字段(可能在两个不同的表单上)，一个将不会显示。

任何解决方案/建议吗?

Answer 1

这是验证码的限制

目前，谷歌验证码机制每页只提供一个验证码表单

我鼓励你重新考虑你组织网页的方式。HTML中的表单设计简单。围绕它们构建的大多数工具都假设页面只做一件事，并通过单个表单提交将结果提交给服务器。

免责声明:我真的对你的代码一无所知。继续不管:它闻起来像你的设计可能是一个太聪明。我的意思是，如果你没有在其他地方看到它，谷歌的工具不支持它，问题可能是你的方法。

如果您需要提交单个无状态事务的结果，那么<form>是合适的，WTForms是生成它的一个很好的工具。如果您需要更丰富的内容，您可以考虑以下内容:

• 将表单分成多个页面。一组简单的超链接可以提供易于导航的层次结构。
• 用javascript构建DOM并提交到RESTful端点(您甚至可以使用WTForms通过将请求体转换为MultiDict和Recaptcha支持AJAX来进行验证)
• 用javascript动态构建<form>并切换action以对应于服务器上正确的表单处理器。

Answer 2

使用reCAPTCHA是不可能的。

参见相关ASP。NET问题:在一个ASP中使用多个验证码。净页

对于可能的解决方案:我如何在一个页面上显示多个验证码?