[django 인스타그램] 로그인 API, 로그아웃 API ( jQuery, NonUserTemplateView, authenticate)

 

jiheestagram / urls.py

urlpatterns = [
    path('', TemplateView.as_view(template_name = 'home.html'), name = 'home'),
    path('login/', NonUserTemplateView.as_view(template_name = 'login.html'), name = "login"),
    path('logout/', UserLogoutView.as_view(), name = "logout"),
]

로그인 로그아웃 경로를 설정한다. 

로그아웃은 사용자 접근을 제한할 필요가 없으니 그냥 View로 연결한다.

홈화면은 임시로 현재 로그인한 유저 아이디를 출력하도록 한다.

 

templates / home.html

{{ request.user }}

 

 

 

 

 

templates / login.html

{% extends 'base.html' %}
{% block body %}
<div id = "login">
    <div class = "container">
        <br>
        <h2 class = "text-center text-success">LOGIN</h2>
        <hr>
        <div class = "form-group col-md-6">
            <label for = "username" class = "text-success">Username : </label><br>
            <input type = "text" name = "username" id = "username" class = "form-control">
        </div>
        <div class = "form-group col-md-6">
            <label for = "password" class = "text-success">password : </label><br>
            <input type = "password" name = "password" id = "password" class = "form-control">
        </div>
        <div class = "form-group col-md-6">
            <div class = "row">
                <input type = "submit" id = "loginButton" class = "form-control btn btn-success" value = "submit">
            </div>
        </div>
        <div class = "form-group col-md-6">
            <div class = "row">
                <a href = "{% url 'register' %}" class = "form-control btn btn-outline-success">Register Here</a>
            </div>
        </div>
    </div>
</div>

<script src = "https://code.jquery.com/jquery-3.4.1.in.js"
        integrity = "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin = "anonymous"></script>

<script>
    $(document).ready(function() {
        $('#loginButton').click(function() {
            $.post('/apis/user/login/', 
            {'username' : $('#username').val(), 'password' : $('#password').val()},
            function(){
                location.reload();
            }).fail(function(data){
                alert(data.responseJSON.message);
            });
        });
    });
</script>

{% endblock %}

로그인 url 을 입력하면 로그인 템플릿으로 넘어온다. 

사용자 정보를 입력하는 로그인 폼, 로그인 버튼, 회원가입 버튼 코드로 구성한다.

로그인 버튼을 누르면 실행되는 동작들을 jQuery 코드로 정의한다. 

val() 함수로 username, password 값을 가져와서 UserLoginView 와 연결되는 로그인 API 경로로 전달한다. 

데이터 전달에 성공하면 location.reload() 으로 페이지를 새로고침한다.

데이터 전달에 실패하면 해당하는 에러 메세지를 띄운다.

 

 

 

 

 

 

apis / urls.py

from django.urls import path
from apis.views import UserCreateView, UserLoginView, UserLogoutView


urlpatterns = [
    path('user/create/',UserCreateView.as_view(), name = "apis_user_create"),
    path('user/login/',UserLoginView.as_view(), name = "apis_user_login"),
    path('user/logout/',UserLogoutView.as_view(), name = "apis_user_logout"),
]

로그인 로그아웃 API 호출 경로를 설정한다.

 

 

 

 

 

apis / views.py / UserLoginView

from django.contrib.auth import authenticate, login, logout


class UserLoginView(BaseView):
    def post(self, request):
        username = request.POST.get('username', '')
        if not username:
            return self.response(message = "아이디를 입력하세요.", status = 400)
        password = request.POST.get('password', '')
        if not password:
            return self.response(message = "비밀번호를 입력하세요.", status = 400)
            
        user = authenticate(request, username = username, password = password)
        if user is None:
            return self.response(message = "입력정보를 확인하세요.", status = 400) 
            
        login(request, user)
        return self.response()

회원가입 뷰와 마찬가지로 login.html 에서 입력한 로그인 폼 정보를 전달받으면 각각의 값을 확인한다.

입력하지 않은 항목이 있으면 값에 맞게 에러메세지를 정의한다.

django 에서 제공하는 사용자 인증 모듈 authenticate, login기능을 사용하여 인증시스템을 처리한다.

username 과 password 가 올바르게 입력되었다면, authenticate 기능을 사용하여 존재하는 아이디인지, 비밀번호가 일치하는지 확인한다. 

사용자 입력정보가 올바르다면 login 기능을 사용하여 페이지에 로그인한다.

 

 

 

 

 

apis / views.py / UserLogoutView

class UserLogoutView(BaseView):
    def get(self, request):
        logout(request)
        return self.response()

로그아웃 기능 역시 장고에서 제공하는 logout 모듈을 사용한다.

 

 

 

 

 

 

실행결과

 

로그인에 성공하면 홈화면으로 넘어가서 현재 로그인되어있는 아이디 iamhungry를 출력한다.

이건 로그인된 사용자가 없는 상태에서 로그인페이지에 있으니까 NonUserTemplateView 에 의해서 홈화면으로 넘어간 것이다.

따라서 로그인 기능이 제대로 실행되는 것을 확인됐다.

 

 

 

 

이제 로그아웃을 실행하면 self.response로 넘어가서 아래와 같은 JSON 형식의 데이터를 출력하고 있다.

따라서 로그아웃도 제대로 작동하는 것을 확인했다.