How to add ReCaptcha to Flask App using Flask-reCaptcha
In this article we will learn to integrate Google ReCaptcha into flask web application using flask extension to prevent bots from submitting spam.
First install Flask-reCaptcha
pip install Flask-reCaptcha
https://pypi.org/project/Flask-reCaptcha/
Register Google ReCaptcha API
When you register for recaptcha it provides you two keys.
Site Key : For Client Side Integration
Secret Key : For Server Side Integration
Implementing ReCaptcha with python and flask
app.py
#app.py
from flask import Flask, render_template, request, flash, redirect, url_for
from flask_recaptcha import ReCaptcha
app = Flask(__name__)
recaptcha = ReCaptcha(app=app)
app.config.update(dict(
RECAPTCHA_ENABLED = True,
RECAPTCHA_SITE_KEY = "6LeKOaMZAAAAAI7L6TVsZa9A2t6-9LDVYSVqX9ZP",
RECAPTCHA_SECRET_KEY = "6LeKOaMZAAAAAKw9nhAjnpzrzrC3R0YYRf-kKDH1",
))
recaptcha = ReCaptcha()
recaptcha.init_app(app)
app.config['SECRET_KEY'] = 'cairocoders-ednalan'
@app.route('/register')
def register():
return render_template("form.html")
@app.route('/submit', methods=['POST'])
def submit():
if recaptcha.verify():
flash('New Device Added successfully')
return redirect(url_for('register'))
else:
flash('Error ReCaptcha')
return redirect(url_for('register'))
if __name__ == '__main__':
app.run(debug=True)
templates/form.html
//templates/form.html
<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<div class="container"> <center><h3>How to add ReCaptcha to Flask App using Flask-reCaptcha</h3></center>
<div class="row main" style="padding-top:50px;">
<div class="main-login main-center">
<h5>Sign up once and watch demos.</h5>
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-primary">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</p>
<form method="POST" action="{{ url_for('submit') }}">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Your Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
{{ recaptcha }} <br/>
<input type="submit" value="submit" class="btn btn-primary btn-lg btn-block login-button">
</form>
</div>
</div>
</div>
<style>
.form-group{
margin-bottom: 15px;
}
label{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #f5f5f5;
padding:50px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
span.input-group-addon i {
color: #009edf;
font-size: 17px;padding:10px;
}
.form-control {
height: auto!important;
padding: 8px 12px !important;
}
.input-group {
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 400px;
padding: 10px 40px;
text-shadow: none;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}
</style>
</body>
</html>
