는 성공적으로 플라스크 응용 프로그램

Question

나는 플라스크 응용 프로그램을 만드는 중이라서 내가 양식을 보내기 전에에서 인증 할 만들기 위해 구글에서 reCAPTCHA를 사용하려고에 reCAPTCHA를 필드의 유효성을 검사 할 수 없습니다.

그러나, 나는 끊임없이 오류를 얻고있다. 소프트웨어가 reCAPTCHA 버튼을 눌렀 음을 인식하지 못하고 이유를 모르겠습니다. reCAPTCHA 필드를 입력하기 전에 모든 것이 올바르게 작동하고있었습니다.

1) 플라스크 :

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 %} 

이 내가 양식을 작성 할 때 내가 무엇을 얻을 수 있습니다.

Answer 1

이 문제를 해결할 수있었습니다. 문제는 AJAX 요청에서 reCAPTCHA 필드를 보내지 않았다는 것입니다.

나는 reCAPTCHA를 필드를 전송하기 위해 AJAX 요청의 data을 변경했다.

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

그런 다음 Flask에서 다른 유효성 검사를 수행해야했습니다. recaptcha이 0보다 길면 reCAPTCHA 확인란을 눌렀 음을 의미합니다.

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

이제 작동 중입니다.