In this tutorial we will learn the implementation of a simple login and register form using python flask step by step through the following procedure.
Step1 : Folder structure and all the import statements
1. Folder Structure :
a. All html files should be inside a templates subfolder
b. All css files should be inside static subfolder
2. Import statements:
a. Bcrypt - It is a flask extension that provides hashing functionality. Generally, it is a good practice to store the credentials of the user in hashed format.
b. SQLAlchemy - It is a flask extension to work with databases in python.
c. Flash - It is a flask extension to alert the user.
d. WTForms - It is a flask extension to work with forms in python.
Step2: Application Configuration Handling
1. Secret Key : is used for securely signing the session cookie and storing the authentication information.
app.config['SECRET_KEY'] = '966a98e7b6fd851217f6f90db9f0e1da'
There are two easy ways to generate secret key for your application :
a. Using os module : os.urandom(16)
b. Using secrets module : secrets.token_hex(16)
2. Database Location : “ sqlite:/// “ is a prepend string to the location of database. In the below string, the location of users.db is inside database folder.
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database/users.db'
Note: It’s a good practice to store the password in hashable format for security purposes. We will calculate the hash of passwords using Bcrypt module.
Step3: Defining major functionality using classes
1. Defining Database model to support our application:
The database defined in the below code stores username, email address and password for authentication purpose.
2. Defining Registration Class to add more users to the application: Three basic fields that are used are : StringField ( for username and email address ), PasswordField ( to store the password ), SubmitField ( for submit button ). Additionally, we also
validate the registered entries to match whether they are unique. ( As, if an email is already registered, login is required and not registration ) The function definition is important in this case to be picked up by validate_on_submit()
function . validate_on_submit() checks the user input against our validators. One such validator is for username to be between 2 and 26 characters.
3. Defining Login Class to allow user to login : We are validating user on two requirements : registered email and password.
Step 4: All routes and function description :
1. Home route : This is the route to which the user will be directed to when they first open up the website. We can add multiple routes to a function. In the below code, “/” and “/home” are two routes which if user enters, he will be directed to Home
page as explained by the parameter of “home.html” to render jinja template.
2. Register route: This route has the registration form. After validation, add the user to database using add(data) and commit() methods. After registration, user will be redirected to the Login Page.
3. Login route: After validation to login form (i.e. all entries are filled and in accordance to our validation rules ), we confirm whether the entered credentials matches with the registered one. So, we compare the entries to the entries in database.
1. Below image depicts the registration main image
2. Signup without filling detials gives validation error
3. On entering complete details
4. On entering the username which is already taken
5. On entering incorrrect email
6. On entering non-matching passsword & confirm password
1. On login with correct details
2. On verification after successful login
3. On login with wrong credentials
4. Validation on wrong credentials
We have successfully implemented the implementation of login and registration form in python flask.