Web Development 701 ~ Authentication
In this blog post we are going to cover the implementation of user authentication. First thing to do is to create a new app via python3 manage.py startapp authentication. Next we need to run python3 manage.py migrate. Then we need to create a super user via python3 manage.py createsuperuser. Now we need to add authentication to the INSTALLED_APPS list in the settings.py file. Once that is done we can start to add the authentication functionality. Out of the box Django has the components for user authentication, so we are just going to build on that.
To start we are going to create a new file in out new app authentication called urls.py. Then we are going to add the following code to the file.
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
Next we need to create the view for index, so in the views.py file we are going to add the following.
from django.shortcuts import render
def index(request):
return render(request, 'authentication/index.html')
We don’t yet have authentication/index.html, so we need to make a new directory called templates then create another directory inside templates called authentication. Within authentication we create a new file called index.html. I use template inheritence which makes creating new templates super easy, so before I put anything in index.html I am going to make a skeleton.html file in the parent directory (templates). The skeleton.html file will look like the following.
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Nav bar -->
<div class="container" id="navbar">
<div class="header clearfix">
<div class="row">
<nav>
<ul class="nav nav-pills pull-right">
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>
</div>
</div>
<br>
<!-- Body section -->
<div class="container" text-align="center">
{% block body %}
{% endblock %}
</div>
<br>
<br>
<br>
<!-- Footer section -->
<footer class="footer">
<div class="container" text-align="center">
<p>
Powered by Django
</p>
</div>
</footer>
</div>
<br>
</body>
</html>
Now all we need to put in index.html is the following.
{% extends "skeleton.html" %}
{% block title %}Index{% endblock %}
{% block body %}
<h1>Index Page</h1>
{% endblock %}
There is one final thing we need to do before we can check to see if the index page is working, and that is to add the following to the urls.py file under our main app (web701).
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('authentication.urls')),
path('accounts/', include('django.contrib.auth.urls'))
]
If we start the application (via python3 manage.py runserver) we can see our index page, and if we go to the /accounts/login route we get a TemplateDoesNotExist error. This is good, that means all we need to do is create a login template. To do this in our authentication app, under templates, we need to create a new directory called registration and a new file called login.html. We will add the following to that file.
{% extends "skeleton.html" %}
{% block title %}Login{% endblock %}
{% block body %}
{% if form.errors %}
<p>Wrong username or password</p>
{% endif %}
{% if next %}
<p>Access denied</p>
{% endif %}
<form method="POST" action="{% url 'login' %}">
{% csrf_token %}
<p>Username: {{ form.username }}</p>
<p>Password: {{ form.password }}</p>
<p><input type="submit" value="login"></p>
<input type="hidden" name="next" value="{{ next }}">
</form>
{% endblock %}
Now if we go back to localhost:8000/accounts/login we can see that we get our login page! If we try to login using the wrong credentials, we get wrong username or password, which indicates that the form is working properly. Now if we try with our superuser credentials we get redirected to http://localhost:8000/accounts/profile/ which means it works! We can change the redirection to our index page by adding LOGIN_REDIRECT_URL = '/' to the settings.py file (I put it just above INSTALLED_APPS) in our main app (web701).
In the next blog I am going to implement the ability to register.