In this post we see how to manually write the code for the user Registeration , Login and Logout.
firstly we have to start a project and than start an app:
django-admin startproject user-authentication
$ cd user-authentication
$ python manage.py startapp accounts
$ cd user-authentication
$ python manage.py startapp accounts
Once we have created an app we have to add this app in the INSTALLED_APPS in settings.py.
Than we have to add the path of the accounts app:
"main project urls.py"
from django.contrib import admin
from django.urls import path,include
from django.conf import settings
urlpatterns = [
path('accounts/',include('accounts.urls')),
path('admin/', admin.site.urls),
]
if settings.DEBUG:
urlpatterns=urlpatterns+static(settings.MEDIA_URL,document_root=
settings.MEDIA_ROOT)
Note that in the main urls we include the accounts app and than we have to include all our urls in the accounts urls.py file..For that we have to make an urls.py file in our accounts app.
and than include all these urls.
"accounts/urls.py"
from django.urls import path
from . import views
urlpatterns=[
path('register',views.register,name='register'),
path("login",views.login,name="login"),
path("logout",views.logout,name="logout")
]
Than we have to write the code in the accounts view.py file...
"accounts/views.py"
from django.shortcuts import render, redirect
from django.contrib import messages
from django.contrib.auth.models import User, auth
from django.urls import path, include
from django.contrib.sessions.models import Session
# Create your views here.
def register(request):
if request.method == 'POST':
first_name = request.POST['first_name']
last_name = request.POST['last_name']
username = request.POST['username']
password1 = request.POST['password1']
password2 = request.POST['password2']
email = request.POST['email']
if password1 == password2:
if User.objects.filter(username=username).exists():
messages.info(request, 'Username taken')
return redirect('register')
elif User.objects.filter(email=email).exists():
messages.info(request, 'Email taken')
return redirect('register')
else:
user = User.objects.create_user(
username=username, password=password1, email=email,
first_name=first_name, last_name=last_name)
user.save();
# print('user created')
return redirect('login')
else:
messages.info(request, 'password not matching..')
return redirect('register')
return redirect('/') #return you in the home page
else:
return render(request,'register.html')
def login(request):
if request.session.has_key('is_logged'):
return redirect("/")
if request.method == 'POST':
username = request.POST['username']
password = request.POST['password']
user = auth.authenticate(username=username, password=password)
if user is not None:
auth.login(request, user)
request.session['is_logged'] = True
return redirect("/")
else:
messages.info(request, 'invalid credentials')
return redirect('login')
else:
return render(request, 'login.html')
def logout(request):
if request.session.has_key('is_logged'):
del request.session['is_logged']
auth.logout(request)
return redirect('/')
In this view firstly we define a function based view name as register and pass the request.
If the request is POST than we have to check the condition such is username is available or already
taken password and confirm password is matching or not etc if any of the condition is failed than
an error message is printed.
After that we have to login the user and when the user is login we also create a session which has a key
("is_logged").if the session is present than the user do not have to give the credentials again.
in the login function there is also an auth.authenticate which authenticate the user name and the password.
Than in the logout function firstly we delete the session and than auth.logout request which logout the current user and return redirect('/')
will return to the home page..
In the register template we write the code :
"register.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
</head>
<style>@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
*:focus {
outline: none;
}
body {
margin: 0;
padding: 0;
background: #DDD;
font-size: 16px;
color: #222;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#login-box {
position: relative;
margin: 5% auto;
width: 600px;
height: 400px;
background: #FFF;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.left {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 40px;
width: 300px;
height: 400px;
}
h1 {
margin: 0 0 20px 0;
font-weight: 300;
font-size: 28px;
}
input[type="text"],
input[type="password"] {
display: block;
box-sizing: border-box;
margin-bottom: 20px;
padding: 4px;
width: 220px;
height: 32px;
border: none;
border-bottom: 1px solid #AAA;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 15px;
transition: 0.2s ease;
}
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 2px solid #16a085;
color: #16a085;
transition: 0.2s ease;
}
input[type="submit"] {
margin-top: 28px;
width: 120px;
height: 32px;
background: #16a085;
border: none;
border-radius: 2px;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 500;
text-transform: uppercase;
transition: 0.1s ease;
cursor: pointer;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
opacity: 0.8;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
transition: 0.1s ease;
}
input[type="submit"]:active {
opacity: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
transition: 0.1s ease;
}
.or {
position: absolute;
top: 180px;
left: 280px;
width: 40px;
height: 40px;
background: #DDD;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
line-height: 40px;
text-align: center;
}
.right {
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
padding: 40px;
width: 300px;
height: 400px;
background: url('https://goo.gl/YbktSj');
background-size: cover;
background-position: center;
border-radius: 0 2px 2px 0;
}
.right .loginwith {
display: block;
margin-bottom: 40px;
font-size: 28px;
color: #FFF;
text-align: center;
}
button.social-signin {
margin-bottom: 20px;
width: 220px;
height: 36px;
border: none;
border-radius: 2px;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 500;
transition: 0.2s ease;
cursor: pointer;
}
button.social-signin:hover,
button.social-signin:focus {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
transition: 0.2s ease;
}
button.social-signin:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
transition: 0.2s ease;
}
button.social-signin.facebook {
background: #32508E;
}
button.social-signin.twitter {
background: #55ACEE;
}
button.social-signin.google {
background: #DD4B39;
}</style>
<body>
<div id="login-box">
<div class="left">
<h1>Sign up</h1>
<form action="register" method="post">
{% csrf_token %}
<input type="text" name="first_name" placeholder="First Name" />
<input type="text" name="last_name" placeholder="Last Name" />
<input type="text" name="username" placeholder="User Name" />
<input type="text" name="email" placeholder="E-mail" />
<input type="password" name="password1" placeholder="Password" />
<input type="password" name="password2" placeholder="Retype password" />
<input type="submit" />
</form>
</div>
<div class="right">
<span class="loginwith">Sign in with<br />social network</span>
<button class="social-signin facebook">Log in with facebook</button>
<button class="social-signin twitter">Log in with Twitter</button>
<button class="social-signin google">Log in with Google+</button>
</div>
<div class="or">OR</div>
</div>
<div>
{% for message in messages %}
<h3> {{message}} </h3>
{% endfor %}
</div>
</body>
</html>
Don't confuse in this code we just copy-paste the already present free register template so that our User Interface looks cool..😃
Similarly in,"login.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:hidden; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background: #092756;
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
</style>
<body>
<div class="login">
<h1>Login</h1>
<form method="post">
{%csrf_token%}
<input type="text" name="username" placeholder="Username" required="required" />
<input type="password" name="password" placeholder="Password" required="required" />
<input type="submit" class="btn btn-primary btn-block btn-large">
</form>
</div>
<div>
{% for message in messages %}
<h3> {{message}} </h3>
{% endfor %}
</div>
</body>
</html>
Comments
Post a Comment