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 :)

 

Tagged with: , ,
Posted in Flask, Python

Ajax search predictor in Angularjs

Dynamic question predictor in AngularJs

Objective

We are using Flask framework for our dynamic question predictor when the user starts typing question in html text field, we have to kick one ajax event to fetch the relevant responses to be displayed.

So, our initial setup is on creating a webservice in Flask.In your views.py you have to create a webservice like the below one.

views.py in Flask application

@app.route('/s/', methods=('GET',))
def search_query():
    qs = request.args.get('query',None)  
    print "Args",qs
    return jsonify({'data':range(5)})

so, if you visit the url \s\?query=example you should get the json response

json response in browser

{'data':
       [0,1,2,3,4],
}

It is Reponse which is emitted from search_query view function. Here we know how to create a simple webservice in Python Flask.

Now, these webservice kicking process has to be started from angular side. Find some knowledge about AngularJs if you would like to have before proceeding.

$scope is the angular environment which contains all objects and it’s properties inside this $scope

function Search($scope, $http) {

       $scope.doAutoSearch = function() {

           if($scope.query)
               $http.get("/s/?query=" + escape($scope.query = $scope.query.toLowerCase())).then(function(r) {

                        alert(r.data.data+typeof r);

            }

        }

This Search function does visit the url(http://localhost:5001/s/?query=python) and the response will be alerted.

Here directly, I started defining the angularjs function without explaining about ng-app, ng-model, ng-controller, ng-change, ng-repeat.

<div ng-app="myApp">
    <input ng-change="doAutoSearch()" ng-model="query" autocomplete="off" placeholder="eg: Why do I need a Khatha?" type="text" value="">

</div>

This is my angularjs template.

query is the name that binds the user input text field value into angular scope attribute named query. So, if you type any text in the input field.

when you run this current setup,you should get the result in javascript alert box, otherwise, you are making some fundamental issue in either pythonnic side or javascript side.

After, you got the result in alert box,

Polishing the methodology

We shall polish this process further.

Angular template area:

<div ng-app="myApp">

         <div class="control-group{% if form.errors.title %} error{% endif %}" ng-controller="Search">
                <label class="control-label" for="title">Title: *</label>

                <input class="form-control" id="title" name="title" ng-change="doAutoSearch()" ng-model="query" autocomplete="off" placeholder="eg: Why do I need a Khatha?" size="50" type="text" value="">
                <li ng-repeat="result in results" style="list-style-type: none;">
                   {#% raw %#}
                   <p ng-bind-html-unsafe="result"></p>

                    {#% endraw %#}
                </li>

                {% for error in form.errors.title %}
                    <span class="help-inline">[{{error}}]</span><br>
                {% endfor %}

        </div>

        </div>

Modified template by adding the ng-bind-html-unsafe(to render the html tags in result) for appending the results to be displayed as list(li tag).
we are using one more directive ng-repeat.

Angularjs function:

function Search($scope, $http) {

            $scope.doAutoSearch = function() {
                if($scope.query)
                    $http.get("/s/?query=" + escape($scope.query = $scope.query.toLowerCase())).then(function(r) {

                        $scope.results = []
                        for(i=0;i<r.data.data.length;i++){
                            link = "<a href='/faq#"+r.data.ids[i]+"'>"+r.data.data[i]+"</a>";
                            $scope.results.push(link.replace(RegExp($scope.query, 'gi'), '<b>$&</b>'));
                        }
                    });
                else
                    $scope.results = [];
            }

        }; //function ends;

This is my polished working search function which does some href linking operation after it fetched results from ajax event.

One additional think i have done here if you scrutinize well.Since, I am using jinja2 template engine, I should change angularjs interpolation symbols to avoid the conflict between jinja2({{, }}) interpolation and angular interpolation

This following snippet does what we need.

Avoid interpolation conflict with jinja2:

angular.module('myApp', [], function ($interpolateProvider) {
            $interpolateProvider.startSymbol('{[');
            $interpolateProvider.endSymbol(']}');

        });

In views.py make sure you change the logic to return the list in proper order by querying from the database you are using.

return jsonify({'data':[str(i.question)for i in faqs], 'ids':[str(i.id)for i in faqs]})

All are set.Just the flow.

Result

I got this output.

angular js search predictor

Thanks

If you have any feedback on narration, technical thoughts, please do share me and help me to improve. my humble thanks
Tagged with: , , , ,
Posted in Ubuntu, Python, Flask, angularjs

An Introduction to Inside the RegEx box

I happened to watch this below video which was explained with awesomeness.It is around an hour playing video. This guy has some magic really.

When you are start playing this video,

you will get started to hear surprises!!

Q1. What is regular expression?

Here I think you will get out :-( i was also

Regex is not a descriptive language of what we think..I don't what to think..anyway my perception went wrong.

So, Regex is just a code and blocks which has it's own dialect to execute the code/block/functions.This dialect is playing the role of virtual machine.The regex dialect has control flows, commands, exception handling.

Q2.What are the rules of regex engine?

Rules means the working mechanism what is follows. we have to understand it's rule.So, that will be helpful when spitting some matched result, you can wipe it without any whip.

The engine does when applying the pattern to the input string

  • The earliest possible substring is first than the Best possible string.
  • The pattern is always given preference to the leftmost/uppermost pattern among the others.

Q3. What regex dialect are we using generally?

PCRE (perl 5)

It is time to enter into the main picture.

The very very important things are coverd here is,

How is this engine works?

import re
re.findall('abc','abcdef')

They are introducing a concept called ‘BackTracking’ which is nothing but, if there is an exception or unmatched for first character of the string, the loop will be started again from the next character.The control will be started from initally for each character untill it found the match.

He is talking about execution model also.
* It will give you some amount of wonder if you listen carefully.
* Graph traversal is being done here.
* Also, NFA, DFA algorithms also used and explained with order of complexity.
* How minimal matching and Greed matching works?

Alert, Greed is always bad!! everywhere even in regex too. :)

(if you are doing greedy regexing(+, *) for 2gig file, your machine knows the pain)

backtracking raises, system falls

Unfortunately, I could not cover everything in detail here.I am sharing the video link.Hope you will enjoy and share the enjoyment :)

Click this:

hey, I am RegEx!!

Tagged with: , ,
Posted in Academic, Python

Introspection of one simple github project

I had today few free hours..Are you free now?

Recently I came across this project called sachintweets in github. I wanted to introspect the code to learn something from it.So, just a post like bookkeeping.

Things I learned from github project sachintweets

source repo

This project fetches you the tweets of Sachin Tendulkar in various categories like top retweeted tweets, recent tweets.

It is implemented in Flask and the backend was used mongodb. It is a very minimal flask application. It does crud operations with mongodb.If you want to learn read and write in mongodb this helps for you.

The backend and frontend is simple tricks.

To pull the realtime tweets and store it into db, The developer used ZMQ as intermediate service as extra level. This part, just using twitter library to pull the tweets from this webservice. Once it is pulled, tweets are published into ZMQ channel.After that, from ZMQ subscribers are fetching the pushed tweets and inserting into mongodb.

The storage part was done. Now to display, just a read from db and render the template.

May be you got some oppurtunity to learn few libraries here:

  • logbook
  • fabric
  • zmq simple publisher and subscriber model
  • storing and retrieving from pymongo minimally
  • In the template the tweets are retrieved frequently with javascript trick(ajax + setTimeout function).
  • disqus comment framework also embedded

finally,

overall, it was a complete project which is useful to derive some content if you have few free hours.Kudos to the developer for making it public.

Tagged with: , ,
Posted in Flask, General, Python

How to implement forgot password feature in Flask?

I am using Python, Flask, SqlAlchemy for my project which is being developed in Ubuntu 14.04.

So, I am assuming you have the model called User which contains at least email address, password fields.

So, it looks like,

models.py

class User(db.Model, UserMixin):
  __tablename__ = 'myusers'

  id = db.Column(db.Integer, primary_key=True)
  first_name = db.Column(db.String(100))
  last_name = db.Column(db.String(100))
  active = db.Column(db.Boolean())
  email = db.Column(db.String(120), unique=True)
  password = db.Column(db.String(120))

We are going to create the password reset feature by generating the temporary access token which will expire within some duration.That token will be sent to your email to set the new password.

Timed and Signed Token Generator Algorithm

So, we have the library called itsdangerous and the method TimedJSONWebSignatureSerializer. Have a look on these beautiful libraries to proceed further.

Our inital version of forgot_password function goes in the following way:

Before that we need two forms.

  • User email id field form(This helps to get the email id from user to be sent reset url) (ResetPassword)
  • New password form (To enter new password by the user) (ResetPasswordSubmit)

So, I am using

forms.py

class ExistingUser(object):
    def __init__(self, message="Email doesn't exists"):
        self.message = message

    def __call__(self, form, field):
        if not User.query.filter_by(email=field.data).first():
            raise ValidationError(self.message)

reset_rules = [validators.Required(),
          validators.Email(),
          ExistingUser(message='Email address is not available')
         ]

class ResetPassword(Form):
    email = TextField('Email', validators=reset_rules)

class ResetPasswordSubmit(Form):
    password = PasswordField('Password', validators=custom_validators['edit_password'], )
    confirm = PasswordField('Confirm Password')

This above code contains two forms along with some validation rules.If you are aware of forms usage in Flask the above snippet can be swallowed easily.

views.py

Inital look

@mod.route('/reset-password', methods=('GET', 'POST',))
def forgot_password():
    token = request.args.get('token',None)
    form = ResetPassword(request.form) #form
    if form.validate_on_submit():
        email = form.email.data
        user = User.query.filter_by(email=email).first()
        if user:
            token = user.get_token()
            print token
    return render_template('users/reset.html', form=form)

We are asking user to enter his email id to forward reset token url to that mail account.

So, Now we are going to see how to implement generating access token and verification

Generating access token

from itsdangerous import TimedJSONWebSignatureSerializer as Serializer

def get_token(self, expiration=100):
        s = Serializer(current_app.config['SECRET_KEY'], expiration)
        return s.dumps({'user': self.id}).decode('utf-8')

The get_token class method helps to generate the token for it’s object.

verify the token

This is a static method, since this method is not bound to the object.Once it gets token from the user, it has to predict the object by it’s unique id.So, it is static method.

@staticmethod
def verify_token(token):
    s = Serializer(current_app.config['SECRET_KEY'])
    try:
        data = s.loads(token)
    except:
        return None
    id = data.get('user')
    if id:
        return User.query.get(id)
    return None

So, my User model should have the above two methods as it’s property.

class User(db.Model, UserMixin):
   #fields

    def get_token(self, expiration=1800):
        s = Serializer(current_app.config['SECRET_KEY'], expiration)
        return s.dumps({'user': self.id}).decode('utf-8')

    @staticmethod
    def verify_token(token):
        s = Serializer(current_app.config['SECRET_KEY'])
        try:
            data = s.loads(token)
        except:
            return None
        id = data.get('user')
        if id:
            return User.query.get(id)
        return None

Test these above methods in python shell

To test this static method, we can generate a rough token for the sample registered user and we can verify via terminal

To test this static method, we can generate a rough token for the sample registered user and we can verify via terminal

In [1]: t = "eyJhbGciOiJIUzI1NiIsImV4cCI6MTQwMzY4NDkyNywiaWF0IjoxNDAzNjgzMTI3fQ.eyJ1c2VyIjo3fQ.wTxkmuAvRG6bTbFWNXo97H3LbYvbcTPrMtp4hk_BDjs"
In [2]: from flask.ext.login import current_user,current_app
In [3]: from itsdangerous import TimedJSONWebSignatureSerializer as Serializer
In [6]: with app.app_context():
    s = Serializer(current_app.config['SECRET_KEY'])
    data = s.loads(t)
    print data
   ...:     
{'user': 7}

success !! The verify_token function works as expected.

Now we have to build the layout for these entire process, if verification success, you have to give the platform to set new password by the user.

I did the layout design in the following way

if token and verified_result:
    is_verified_token = True
    password_submit_form = ResetPasswordSubmit(request.form)
    if password_submit_form.validate_on_submit():
        verified_result.password = generate_password_hash(password_submit_form.password.data)
        verified_result.is_active = True
        db.session.add(verified_result)
        db.session.commit()
        #return "password updated successfully"
        flash("password updated successfully")
        return redirect(url_for('users.login_view'))

This above lines are doing the following job:

  • Verifying the user entered token right or wrong?
  • if the token is valid then it askes the user to enter new password by generating ResetPasswordSubmit form
  • It submits the data to db.

Here you can contruct the code to send the url email once the email is submitted. like 127.0.0.1:5001/reset-password?token=123454ertrt

When the user visits the url you can verify the validity, then process next above lines.

I am here attached my screenshot.

reset_email1

Reset Email Message

new_password

New Password Form

Hope this article will be helpful and give you some idea.Finally, we would thank this guy  who contributes heavily for Python-Flask.

Thanks,

Navaneethan
 
Tagged with: , ,
Posted in Flask, General_Tech, Problems, Python, Ubuntu

Override save_model in Flask-Superadmin

Why we are here?

This article covers how to excrypt the plaintext password when you create a user via Flask-Superadmin

Flask admin or Django admin?

As an introductory Flask-Admin is not a Django admin to be clear on what it does. Because, Django admin’s crisp user,auth,group tables puts itself in upfront place. No issues, if you are not worrying for admin in your application infact if you are stick with Flask.I am also in the same situation where I like to use Flask, SqlAlchemy, jinja2 for my project with some admin tricks. Recently, I came to the situation where i need to setup the admin which could be accessed by few special users. I was hanging around with Flask-Admin which seems covering up almost many things.But, I was struck to limitize(authorize) the users for the admin url. It can be done and i was facing other Relationship constraint issues(instead of generating FK field in admin, It takes M2M field for the self-referential field in sqlalchemy table)I spent little time on that. Finally, even anonymous user can access it’s admin url.So, I just starter looking Flask_Superadmin. It fixes the issue what i was seeing in Flask-Admin.

How to override admin to manipulate the model field?

My requirement is that i can create the user account via Flask-Superadmin. But, I had no way to encrypt the plain text password when you create a new user profile.If it is Django simply I can override save method in the model class to manipulate the fields, this will do the job completely for saving via orm, saving via admin. In Flask, if you create via sqlalchemy orm, the concept varies while doing through admin.

So, How to do it in Flask-SuperAdmin?

Simply, you have to override the save_model to manipulate the object if it is being saved via flask-admin.This save_model has no business with sqlalchemy-orm due to session based db commit. if you want to manipulate the object in admin, you can do it by overriding the save_model. I am showing the example when you enter the plain text password, it is going to be encrypted before the db commit.

Class User(db.Model):
   #field1
   #field2
   #field3
   #class method
   def set_password(self, password):
       self.password = generate_password_hash(password)

The set_password class method will encrypt the given plain text password

class UserModel(model.ModelAdmin):
    #other customizations
    def save_model(self, instance, form, adding=False):
        form.populate_obj(instance)
        instance.set_password(instance.password)
        #play here
        if adding:
            self.session.add(instance)
        self.session.commit()
        return instance
admin.register(User, UserModel)

If you are looking for this exact trick, This post is reached lucky level :)

Thanks.

Tagged with: , ,
Posted in Flask, General_Tech, Python, Ubuntu

Disrespect is t…

Disrespect is the greatest relationship destroyer.
Disrespect is never forgotten and not easily forgiven.
The easiest way to destroy a relationship is to show disrespect to someone.One act of disrespect is sufficient for a relationship to break forever.We don’t have a mechanism to handle disrespect.
Depending on the situation and the power of the other person we either fight back or withdraw or avoid.
Disrespect is an act of violence.

Important Passage from “frozen thoughts” magazine

 

Tagged with: ,
Posted in General

If not python, then what?

Visitors
  • 26,470 hits
Follow

Get every new post delivered to your Inbox.

Join 205 other followers