Skip to main content

WHAT IS DJANGO AUTHENTICATION?AND HOW TO MANUALLY WRITE THE CODE FOR THE SIGNUP, LOGIN AND LOGOUT?

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

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

Popular posts from this blog

How to upload a csv file in django?

csv file:--> It stands for comma separated value files.It is in the form of the tabular format and we can open it in Microsoft Excel. Now see how we can upload it in the django..first we create a project in django.to create a project the commands are as follows:           django-admin startproject csv      $ cd csv      $ python manage.py startapp csvfile Once we have created an app we have to add this app in the INSTALLED_APPS  in settings.py. In the models.py we have to created two class one is Bank and other is Branch. from  django.db  import  models class   Bank ( models . Model ):     name = models.CharField( max_length = 50 )      class   Meta :         ordering = ( 'name' ,)      def   __str__ ( self ):          return   " {} ...
Post a Comment
Read more

Django (web framework) Programming and Development

Introduction: Django is a Python-based free and open-source web system, which takes after the model-view-template (MVT) building design. It is kept up by the Django Computer program Establishment (DSF), an autonomous organization built up as a non-profit. Django's essential objective is to ease the creation of complex, database-driven websites. The system emphasizes reusability and "pluggability" of components, less code, coupling, quick advancement, and the guideline of do not rehash yourself. Python is utilized all through, indeed for settings records and information models. Django too gives an discretionary administrative create, examined, upgrade and erase interface that's produced powerfully through contemplation and designed through admin models. A few well-known destinations that utilize Django incorporate the Open Broadcasting Benefit, Instagram, Mozilla, The Washington Times, Disqus, Bitbucket, and Nextdoor. It was utilized on Pinterest, but afterward the loc...
Post a Comment
Read more

How to create user-register form,login,logout and also make a profile of each user register in Django?

Django provides a quite easy way to create a User-Registration as all are already presents in the Django we just know how to use this..Here, we will see how to easily implement this and create a profile of all users which are register.This article will be an interesting and important so please read out seriously. firstly we have to start a project and than start an app:     django-admin startproject user-authentication     $ cd user-authentication     $ python manage.py startapp users 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 from  django.conf.urls.static  import  static from  users  import  views  as  user_views from  ...
Post a Comment
Read more