Cannot succesfully validate reCAPTCHA via AJAX in Flask application

Question

I am making a Flask application and I am trying to use Google reCAPTCHA for making verfication before sending form.

However, I am constantly getting an error. Software is not recognizing that I pressed reCAPTCHA button and I don't know why. Before I put reCAPTCHA field, everything was working fine.

Below is the full code:

1) Flask:

from flask import Flask, render_template, request, jsonify
from flask_wtf.csrf import CSRFProtect
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import InputRequired
from flask_wtf.recaptcha import RecaptchaField


app = Flask(__name__)

app.config['SECRET_KEY'] = 'proba123Jakov'
app.config.update(
    RECAPTCHA_ENABLED = True,
    RECAPTCHA_PUBLIC_KEY = 'mypublickey',
    RECPATCHA_PRIVATE_KEY = 'myprivatekey',
)

csrf = CSRFProtect(app)
Bootstrap(app)

class MailForm(FlaskForm):
    firstname = StringField('Name *', _name='firstname', validators=[InputRequired()], render_kw={"placeholder": "Your name"}, id="firstnameInput")
    lastname = StringField('Surname *', _name='lastname', validators=[InputRequired()], render_kw={"placeholder": "Your surname"}, id="lastnameInput")
    recaptcha = RecaptchaField()

@app.route('/')
def contact():
    form = MailForm()
    return render_template('contactForm.html', form=form)

@app.route('/send', methods=['POST'])
def mailSend():
    global previousEmailMessage
    form = MailForm()

    if form.validate_on_submit():
        return jsonify({'firstname' : request.form.get('firstname'), 'lastname' : request.form.get('lastname')})
    return jsonify({'error' : 'You havent put all data or press recaptcha button'})

if __name__ == '__main__':
    app.run()

2) JS:

$(document).ready(function() {

    var csrftoken = $('meta[name=csrf-token]').attr('content');

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });

    $('#contact-form').on('submit', function(event) { // GET METHOD IS ACTIVATED SOMEHOW

        $.ajax({
            data : {
                firstname : $('#firstnameInput').val(),
                lastname : $('#lastnameInput').val(),
                message : $('#messageInput').val()
            },
            type : 'POST',
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate',
                'Pragma': 'no-cache',
                'Expires': '0'
            },
            url : '/send',
            dataType: "json"
        })
        .done(function(data) {

            if (data.error) {
                $('#successAlert').hide();
                $('#errorAlert').text(data.error).show();
            }
            else {
                $('#successAlert').text("Vaša poruka je uspješno poslana!").show();
                $('#errorAlert').hide();
            }
        });
        event.preventDefault();
    });

});

3) HTML:

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}
    {{ super() }}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="{{ url_for('static', filename='ajaxForm.js') }}" type="text/javascript"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}

{% block content %}

    <form id="contact-form">
        {{ wtf.form_field(form.firstname) }}
        {{ wtf.form_field(form.lastname) }}
        {{ wtf.form_field(form.recaptcha) }}
        <input type="submit" class="btn btn-lg btn-primary btn-block" value="SEND">
        <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
        <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
    </form>
{% endblock %}

This is what i get when I fill the form:

Please help.

CarlosV CarlosV · Accepted Answer · 2017-12-07T18:10:43

I managed to solve this problem. The problem was that I was not sending reCAPTCHA field in AJAX request.

I had to to change data of the AJAX request in order to send reCAPTCHA field.

data : {
        firstname : $('#firstnameInput').val(),
        lastname : $('#lastnameInput').val(),
        recaptcha : grecaptcha.getResponse()
            }

Afterwards, it was necessary to make different validation in Flask. If recaptcha is longer than 0, it means that reCAPTCHA checkbox was pressed.

if form.is_submitted():
    if request.form.get('recaptcha'):
        return jsonify({'firstname' : request.form.get('firstname')})
    return jsonify({'error' : 'reCAPTCHA button was not pressed'})

Now it is working.

Cannot succesfully validate reCAPTCHA via AJAX in Flask application

1 Answers