Make social media applications with Flask #4: Login system and Use session to manage user data

duski.harahap (68)in #utopian-io • 6 years ago

Repository

https://github.com/python

What Will I Learn?

Login system
Use session to manage user data

Requirements

Basic Python
Install Python 3
Install Flask

Resources

Python - https://www.python.org/
Flask - http://flask.pocoo.org/
Peewee http://docs.peewee-orm.com/en/latest/
Sqlitebrowser https://sqlitebrowser.org/

Difficulty

Basic

Tutorial Content

Hi everyone, I will continue the tutorial series on creating social media applications using Flask. In the previous tutorial, I made a register and base layout feature for our application. in this tutorial, I will continue to make new features in this tutorial. I will make the login feature and page layout, as a reminder we have made us have a User, Message, and Relationship database.

Login feature

I will add a new feature, namely the login function in the application. for that, we need to create new pages in our application. In the previous tutorial we created a base layout for each of our pages.

Login layout

I will make the login feature for that I will make the page first, the page is not much different from the register page. for more details, we can see the code below:

login.html

{%extends "layout.html" %} // extend the base layout
{% block body %} // start of block base layout
<div class="jumbotron">
    <h1 class="display-4">Login Page</h1>
    <form action="{{url_for('loginPage')}}" method="POST" autocomplete="off"> // We will post data in function loginPage
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" name="username" aria-describedby="emailHelp" placeholder="Enter username">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
    </div>
{% endblock %} // end of block base layout

On the login page I will create a login form that will be directed to the action action="{{url_for('loginPage')}}". We haven't created the loginPage() function. The templating system in the flask is very tight. This page will also have an error function that has been used but has not been made, for that we just go to app.py to make routing.
Add login function in base layout

We will also use the loginPage() function on the base layout page. we have created the navbar now we need to direct the URL to the loginPage function.

app.py

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="{{url_for('showHomePage')}}">Home <span class="sr-only">(current)</span></a> // Home route
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('registerPage')}}">Register</a> // Register Route
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('loginPage')}}">Login</a> // Login route
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

In the previous tutorial, we have two routing, namely home url_for('showHomePage') and register url_for('registerPage'). Now we will add new routing, namely routing logins with the loginPage() function.

Create a login system

At the top, we have created a login page and in that page, we use the loginPage() function in this section we will create a login system, For more details, we can see the code below:

app.py

@app.route('/login', methods =['GET', 'POST']) // Define route and methods
def loginPage(): // the function that will be run is routing /login
    return render_template('login.html') // render template login.html

In the loginPage() function only to render the login page, I have not entered other functions. I will test whether the loginPage function is working properly. the following results:

to run the application we can run the flask run or for more details, we can see in the picture taken.

And the following is the result of the login page that we have created

ezgif.com-video-to-gif.gif

User Login

In this section I will create a login system in this application, what we have to pay attention to is in this login system I will use a session to detect the user who is logged in. to use the session function we need to import it first and use the secret key. For more details, we can see this code:

Import Session and Use secret key

import datetime
from flask import Flask, render_template, request, url_for, redirect, session // import session
from peewee import *
from hashlib import md5

app = Flask(__name__)
app.secret_key = 'so_secret_123456789' //  Create you own secret key

The app.secret_key that we create is a collection of random strings that are useful for session hashing systems.

Now we will start creating the login system. We will receive a post from the username and password and then hashing the password that the user typed. The following is the complete code:

app.py

@app.route('/login', methods =['GET', 'POST']) // Define routing and methods
def loginPage(): // the function that we will use in routing '/login'
    if request.method == 'POST' and request.form['username']:

        try:
            hashed_pass = md5(request.form['password'].encode('utf-8')).hexdigest()
            user = User.get(
                (User.username == request.form['username']) &
                (User.password == hashed_pass)
            )
        except User.DoesNotExist:
            return 'User doesnt Exist'
        else:
            auth_user(user)
            return redirect(url_for('showHomePage'))
    return render_template('login.html')

First, we have to filter whether the method used by the user is POST request.method == 'POST' and we will also see if the user enters the username request.form['username']. If it's true then we will enter the login process.
Hashing password: If you followed the previous tutorial then you would know below when registering in our application, we have to hash the user password, so likewise when we want to login we have to do the password typed by the user.
Try and Exception: I will use the try and exception functions to log in, in the try section we will check whether the user has registered or not. We have made an abstraction from our user model, so to get data in the user table we can use the get() function, but we need to pass two parameters to make sure the user is valid.

User.get(
                (User.username == request.form['username']) &
                (User.password == hashed_pass)
            )

If it turns out the user is invalid then we can get a response in the Exception section and return return 'User doesn't Exist'.

except User.DoesNotExist:
            return 'User doesnt Exist'

username and password are key columns that exist in the user table that we created in the previous tutorial. We can look back at the user of the model:

And if the user is valid then the next step is I will start the session, I will create a function auth_user(user) that sets the session using the function.
Create auth_user () function

Now we will create a function to handle the session when the user is logged in, This function I will pass the result parameter from User.get() so that we can get information about the user who is logged in.

app.py

def auth_user(user):
    session['logged_in'] = True
    session['user_id']   = user.id
    session['username']  = user.username

In this section I will define the variables of the session that we will save, I will save the session variable ['logged_in'] = True, So we can detect whether the user is logged_in with true value.
session['user_id'] = user.id and session['username'] = user.username I will save the user_id variable based on the user that we get in User.get().
Create get_current_user () function

Then I will create a function to detect and get the data of the user who is logged in.

def get_current_user():
    if session.get('logged_in'):
        return User.get(User.id ==  session['user_id'])

What I did for the first time in this function was to check whether the user was logged in, we could check it based on the variable that we saved in the session that is logged_in and if the results are correct we will take the user data again return User.get(User.id == session['user_id']).
Then we use the function after the auth_user():

    auth_user(user)
            current_user = get_current_user()
            return redirect(url_for('showHomePage', user = current_user.username))

And then we pass the username to the showHomePage function so we can print out the username on the homepage url_for('showHomePage', user = current_user.username).
Then because we will pass the username on showHomePage we need to change the showHomePage()function in order to accept the parameters, we will change it like this.

@app.route('/<user>')
def showHomePage(user):
    return render_template('index.html', user = user)

showHomePage() function will accept user parameters. we will also change our template to print out user data in the index.html.

index.html

{%extends "layout.html" %}
{% block body %}
<div class="jumbotron">
  <h1 class="display-4">Welcome to homepage {{user}}, I'm using base layout</h1> // Print out the username
  <p class="lead">Welcome to the social media application that uses flasks</p>
  <hr class="my-4">
  <p>For new users you are required to register to use this application. please click register</p>
  <a class="btn btn-primary btn-lg" href="{{url_for('registerPage')}}" role="button">Register</a>
</div>
{% endblock %}

If there is no error, I will demonstrate the results as follows:

ezgif.com-video-to-gif (1).gif

As we have seen in the picture above, we managed to create a login system using sessions on the flask and we also managed to retrieve user data and detect users who were logged in, just a few of my tutorials this time, hopefully, you will be useful.