Start the Captcha to Stop the Bot in Flask

Implementing reCaptcha in your form

Objective

We are going to learn How to add captcha field in your form to avoid the form being filled by bots.The example implementation is given in Flask.if you have some basic knowledge in python, more than enough to grasp the content.

Why do we need captcha? isn’t it making cumbersome or is it really matters?

Assume the situation, where you implemented some `contact us` form to be filled by customer(humans).The attackers can able to fill your form with their code.The code is called **bot**. The cause of bots will be more and more, sometimes it will make your app dead if they runs their bots against your application.

Refer more:

How can integrate captcha into our form?

We are using the library called reCaptcha which is provided by Google.This helps to solve our issue.

You have to install this python library called reCaptchaClient.Before that one more important thing we have to do.

Notice here:

we need to configure our domain into this reCaptcha service portal in order to get public and private keys for the security purpose. No need to sweat for this step because this just click and add step.

  1. click this link : https://www.google.com/recaptcha/admin
  2. If you are new just click signup or you can see the left sidebar My Account link.
  3. You can see Add New Site button.Just click and enter your site
  4. After you entered, you can see the public key and private key which is provided by reCaptcha service for your added site.

Admin Registration

That’s it. You are done on the configuration.Please do remember that you have the public key and private key for your site.

Let’s code now…

I assume, You have installed reCaptchaClient python package from one of the above links.

Just only 2 steps invloved here.

  1. Add a reCaptcha field in your html form, if you want to use wtforms, there is a ReCaptchaField is also there.But We are doing in plain way.

If you place this script inside the html form and below some other fields where you wanted this captcha field should be displayed.Just add it there.
Notice here, you have to pass your public key in the src url instead of ADD YOUR PUBLIC KEY.Don’t tell that i don’t know my public key.

    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=ADD YOUR PUBLIC KEY">script>
    <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=ADD YOUR PUBLIC KEY" 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>

2.Do your magic in views.py

  • receive the form field values entered by user.
  • validate the fields
  • raise field errors if any else process the values and return a successful message.

These are the steps wherever you go, so Flask is not an exceptional.

To receive the form field values from user by the object called request:

recaptcha_challenge_field = request.form.get('recaptcha_challenge_field')
recaptcha_response_field = request.form.get('recaptcha_response_field')
remote_ip = request.environ.get('REMOTE_ADDR')

recaptcha_challenge_field, recaptcha_response_field, are the field names of recaptcha which is added in html form.
you have to pass the REMOTE IP Address to the captcha client for value verification of captcha field.

3.Our implementation of captcha validation and raising the error to user.

 from recaptcha.client import captcha 
 recaptcha_response = captcha.submit(recaptcha_challenge_field, recaptcha_response_field, app.config['RECAPTCHA_PRIVATE_KEY'], remote_ip)
 #print "Captcha Response:",recaptcha_response.is_valid
 if recaptcha_response.is_valid:
     captcha_error = []
 else:
    #print "error",recaptcha_response.error_code
    error_code = recaptcha_response.error_code
    captcha_error = [error_code]
    flash('Fix the below errors in form')

We are passing the received values to the reCaptcha client library and just returns the boolean result.

if the captcha verification gets success, no error message(captcha_error = [])
else pass the error code (captcha_error = [error_code])

After this step, you could process your form validation of remaining fields like username, email address, etc..
Process the data and do the usual stuffs.

4.Just show the captcha error message to user, Add this code at the bottom part of captcha field in html.This is jinja2 template code to show the error message.

{% if captcha_error_list %}
        {% for error in captcha_error_list %}
                   <span class="help-inline" style="color:red"> * {{error}}</span><br>
        {% endfor %}
{% endif %}

I hope we have reached to test the feature!

enough, have you got it?

captcha output captcha4

I think you should also get these..

Big Thanks 🙂

 

Advertisements

About Navaneethan

mixed feelings...
This entry was posted in Flask, Python and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s