flask-wtf recaptcha 通过 ajax 验证答案

【问题标题】：flask-wtf recaptcha validation through ajaxflask-wtf recaptcha 通过 ajax 验证
【发布时间】：2018-06-04 16:50:12
【问题描述】：

今天我正在解决如何使用来自flask-WTF 0.14.2 的recaptcha，它是通过ajax 在服务器上发布的形式。我无法找到如何使用 ajax 实现 recaptcha 并在服务器上成功验证它然后将答案发送回客户端的解决方案。尽管我正在从客户端向服务器发送所需的“响应参数”，但 Recaptcha 验证仍抱怨此错误：

'recaptcha': ['The response parameter is missing.']

我在 Stackoverflow 上的任何地方都无法找到答案，所以我在这里发布了我自己的工作代码。

【问题讨论】：

标签： python ajax flask recaptcha flask-wtforms

【解决方案1】：

这是我的 Flask 代码：

from flask_wtf import FlaskForm, RecaptchaField
from wtforms import StringField, TextAreaField
from wtforms.validators import InputRequired, Email, Length, Optional


#Google keys
app.config['RECAPTCHA_PUBLIC_KEY'] = 'my_public_key'
app.config['RECAPTCHA_PRIVATE_KEY'] = 'My_private_key'


# flask-WTF contact us form
class ContactUs(FlaskForm):
    name = StringField('name', validators=[InputRequired(), Length(max=50)])
    surname = StringField('surname', validators=[Optional(), Length(max=50)])
    email = StringField('email', validators=[InputRequired(), Length(max=100), Email(message='Invalid email')])
    message = TextAreaField('message', validators = [InputRequired(), Length(max=5000)])
    recaptcha = RecaptchaField()


@app.route ("/contact", methods=['GET','POST'])
def contact():
    form = ContactUs()
    if request.method =='POST':
        if form.validate_on_submit():
            #do something with validated data
            return jsonify(message = 'ok')            
        else:
            #send back form.errors to front-end            
            return jsonify(message = "error", data = form.errors)    

    return render_template("contact.html", form = form)

这里是简化的 html 模板：

<label class="control-label">First name*</label>
{{ form.name }}
<label class="control-label">Last name</label>
{{ form.surname }}
<label class="control-label">Email address*</label>
{{ form.email }}
<label class="control-label">Your message*</label>
{{ form.message }}
{{ form.recaptcha }}
<button type="button" class="btn btn-primary" onclick="SendMessage()">Send Message</button>

最后是 AJAX 部分：

function SendMessage(){
    var url = "{{url_for('contact')}}"
    var name = document.getElementById('name').value
    var surname = document.getElementById('surname').value
    var email = document.getElementById('email').value
    var message = document.getElementById('message').value

    var formData = new FormData()
    formData.append('name', name.value)
    formData.append('surname', surname.value)
    formData.append('email', email.value)
    formData.append('message', message.value)
    formData.append('g-recaptcha-response', grecaptcha.getResponse()) 
    //from flask-wtf library I learnt that recaptcha is awaiting 'g-recaptcha-response' in FormData

    $.ajax({
    type: 'POST',
    url: url,
    data: formData,
    processData: false,
    contentType: false,
    success: function(response){
            grecaptcha.reset() //recaptcha reset
            if(response.message == 'ok'){
                console.log('got ok')                   
            }
            if(response.message == 'error'){
                //handle flask-wtf errors here
            }}, 
    error: function(response){
            grecaptcha.reset() 
            console.log('got error')                
            }
    })}

我希望它可以帮助正在使用flask-wtf和ajax查找recaptcha验证的人。

【讨论】：