Django用Ajax登录?

时间:2014-11-14 12:22:03

标签: django authentication

我正在使用jquery函数发布带有ajax的登录表单。在ajax成功:如果成功登录,我想以不同的方式处理响应。

所以在Django中,我想知道我是否可以在现有的login-view上构建,添加一些成功/错误变量,以便与返回的页面一起发送回jquery函数。我的意思是保持视图默认工作,但也添加一个额外的“状态”变量。

这方面的一个小例子很棒!

3 个答案:

答案 0 :(得分:4)

您需要设置jquery Ajax调用以发布到django中的Login视图。

在视图中你需要做这样的事情......

import json
from django.http import HttpResponse

def login(request):                                                                                                                         
    if request.method == 'POST':                                                                                                                                                                                                           
        login_form = AuthenticationForm(request, request.POST)
        response_data = {}                                                                              
        if login_form.is_valid():                                                                                                           
            response_data['result'] = 'Success!'
            response_data['message'] = 'You"re logged in' 
        else:
            response_data['result'] = 'failed'
            response_data['message'] = 'You messed up'   

        return HttpResponse(json.dumps(response_data), content_type="application/json")  

我没有对此进行测试,但是你的ajax调用看起来应该是这样的。

<script> 
$.ajax({                                                                                                                           
    type:"POST",                                                                                                                    
    url: 'http://www.yousite.com/yourview/login/',                                                                                                   
    data: $('#login_form').serialize(),                                                                                  
    success: function(response){ 
        // do something with response
        response['result']; // equals 'Success or failed';
        response['message'] // equals 'you"re logged in or You messed up';                                                                                                     
     }                                                                                                                             
});
</script>  

答案 1 :(得分:2)

你的views.py

def logmein(request):
   username= request.GET.get('username')
   password = request.GET.get('pwd')
   stayloggedin = request.GET.get('stayloggedin')
   if stayloggedin == "true":
       pass
   else:
       request.session.set_expiry(0)
   user = authenticate(username=username, password=password)
   if user is not None:
       if user.is_active:
           login(request, user)
           return HttpResponse('fine')
       else:
           return HttpResponse('inactive')
   else:
       return HttpResponse('bad')

你的ajax

function logmein() {
    var username = $.trim($('#username').val());
    var pwd = $.trim($('#pwdlogin').val());
    var stayloggedin = document.getElementById('stayloggedin').checked;
    $.ajax({
        url : "/logmein/",
        type : "get",
        data : {
            username: username,
            pwd : pwd,
            stayloggedin : stayloggedin,
            next : next
        }
    }).done(function(data) {
        if (data == "fine") {
            window.location = window.location;
        } 
    });
}

答案 2 :(得分:0)

这是一个古老的问题,但是如果其他人遇到了这个问题,这就是我所做的。请注意:

  • 我扩展了默认的Django身份验证系统,以使用电子邮件地址代替用户名。 (即使您使用默认值,我的代码也应该可以正常工作)
  • 我还使用了Django Rest Framework状态代码(但这又是可选的)
  • 您将需要按此处设置默认的Django注册模板

在您的views.py:

from django.shortcuts import render
from django.http import JsonResponse
from rest_framework import status

# Show the login page
def showLoginPage(request):
    return render(request,'registration/login.html',{})

# Actual login logic using AJAX
def login_request(request):
    
    if request.is_ajax and request.method == "POST":
        context = {}
        email = request.POST['username']
        password = request.POST['password']
        
        account = authenticate(request,username=email, password=password)
        if account is None :
            context['message1'] = 'Invalid Login Details!'
            context['message2'] = 'Kindly Try Again With A Valid Email And Password'
            context['code']=status.HTTP_401_UNAUTHORIZED            
            return JsonResponse(context, status = 200)
        
        elif account is not None and not account.is_active:
            context['message1'] = 'Sorry, your account is in-Active'
            context['message2'] = 'Kindly Check Your Email For Activation Link Or Contact Support'
            context['status'] = 'Error!'  
            context['code']=status.HTTP_401_UNAUTHORIZED           
            return JsonResponse(context, status = 200)
        
        elif account :
              login(request, account)
              context['message'] = 'Successfully authenticated.'
              context['status'] = 'Success!'
              context['code']=status.HTTP_200_OK                                   
              return JsonResponse(context, status = 200) 

        else:           
            context['message'] = 'Invalid credentials'
            context['message2'] = 'Kindly Try Again With A Valid Email And Password'
            context['code']=status.HTTP_401_UNAUTHORIZED           
            return JsonResponse(context, status = 200)

    return JsonResponse({}, status = 200)

urls.py:

# default page = login page
path('', views.showLoginPage, name='login'),
# ajax login
path('post/ajax/loginUser', views.login_request, name='loginUser'),
# home page once logged in
path('home/', views.home, name='home'),

login.html:

<!-- this div displays our response from the ajax post -->
<div id="login_error_div" style="display: none;" class="alert alert-warning alert-dismissible fade show text-center" role="alert">
  <strong><span id="error1"></span></strong>
  <span id="error2"></span>
  <button id="hide_msg" type="button" class="close"  aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- a hidden url to re-direct to the home page if successful -->
<input type="hidden" id="Urlhome" data-url="{% url 'home' %}" />

<script src="/static/plugins/jquery/jquery.min.js"></script>

<script>
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }else{
              sign_in_User()
          }                
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

<script>
  const togglePassword = document.querySelector('#togglePassword');
  const password = document.querySelector('#id_password');
  togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-lock-open');
  });
</script>    

<script>    
  $("#hide_msg").click(function (){    
    $("#login_error_div").hide()
  });
</script>

<script>
  function sign_in_user() {
    var url = $("#Urlhome").attr("data-url");
    event.preventDefault();
    event.stopPropagation();  
    var username = ($('#id_username')).val();
    var password = ($('#id_password')).val();  
    $.ajax({
      url: "{% url 'loginUser' %}",  
      type: "POST", // or "get"
      headers: {'X-CSRFToken': '{{ csrf_token }}'}, // for csrf token
      data:{
        'username': username, 
        'password':password,
      },
      success: function loginResponse(response) {  
        if(response['code']=== 401){
          $('#login_error_div').show();
          $("#error1").text(response['message1']+' :')
          $("#error2").text(response['message2'])                      
        } else {
          location.href=url;
        }                                     
      }
    });   
  }    
</script>