[DJANGO 기초] 6. 세션, 로그인 페이지 구현

silversu 2021. 6. 19. 18:12

2021. 6. 19. 18:12

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/15

[DJANGO 기초] 5. Static 파일 관리, 부트스트랩 CSS 테마 적용

본 프로젝트는 패캠 강의를 참고 합니다. <이전 글> https://silvercoding.tistory.com/14 https://silvercoding.tistory.com/13 https://silvercoding.tistory.com/12 https://silvercoding.tistory.com/11 [D..

silvercoding.tistory.com

세션

클라이언트 <------------------> 서버

클라이언트 안에 쿠키가 들어있다. 여기서 쿠키는 저장소와 같다. 웹 브라우저 안에 쿠키라는 저장공간이 있는데 이 저장공간을 활용해서 데이터를 유지하는 것이다.

브라우저를 켜서 서버에 요청을하고, 응답을 받는다. 서버에서는 헤더에 쿠키 정보를 넣어서 클라이언트에게 전달한다. 클라이언트는 그 정보를 쿠키에 저장한다.

서버 안에서는 쿠키로 사용할 키를 만든다. 이걸 데이터베이스에 저장하고 클라이언트에 알려준다. 클라이언트는 자기 쿠키 저장소에 저장한다. 웹사이트 별로 나누어서 저장하게 된다.

총정리 ---> 1. (클라이언트) 사이트에 들어가면 서버에 요청

2. (서버) 서버 안에서는 새로운 키를 생성해서 데이터베이스에 넣은 후, 그 키를 클라이언트에 전달한다.

3. (클라이언트) 클라이언트는 각각의 웹사이트에 해당하는 키를 쿠키에 저장한다.

4. (클라이언트) 다음부터 웹사이트에 들어가면 클라이언트가 하는 모든 요청에 이 쿠키를 같이 보낸다.

5. (서버) 그럼 서버는 그 쿠키에 해당하는 데이터베이스를 꺼내와서 사용할 수 있게 되는 것이다.

어렵고 복잡해보인다. 하지만 장고에서 실제로 사용하는 것은 굉장히 쉬워보인다.

로그인 페이지 구현

1. Template 작성

templates ---> login.html 파일 생성

회원가입 페이지와 비슷한 구성이므로 register.html 을 복붙해와서 수정을 조금 해준다.

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row-mt5">
            <div class="col-12 text-center">
                <h1>로그인</h1>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-12">
                {{error}}
            </div>
        </div>
        <div class="row mt-5">
            <form method="POST" action=".">
                {% csrf_token %}
                <div class="form-group mb-3">
                    <label for="username" class="form-label">사용자 이름</label>
                    <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username">
                </div>
                <div class="form-group mb-3">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
                </div>
                <button type="submit" class="btn btn-primary">로그인</button>
            </form>
        </div>
    </div>

</body>

</html>

사용자 이름, 비밀번호만 남겨놓는다.

2. View 작성

community ---> user ---> views.py

def login(request):
    return render(request, 'login.html')

우선 login.html 과 연결해주었다.

3. Url 연결

community ---> user ---> urls.py

urlpatterns = [
	...
    path('login/', views.login),
]

어떤 주소를 연결했을 때 위에서 만든 view를 연결해 줄건지 작성하는 코드이다. 이렇게 작성하면 .../user/login/ 이라는 주소를 치면 로그인 페이지로 들어가게 된다.

우선 여기까지 해서 확인해보자.

해당 주소에 로그인 페이지가 생성되었다.

4. 로그인 기능 작성

--- check password

community ---> user ---> views.py

check_password import해서 비밀번호를 확인해준다.

def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    elif request.method == 'POST':
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)

        res_data = {}
        if not (username and password):
            res_data['error'] = "모든 값을 입력해주세요."
        else:
            fcuser = User.objects.get(username = username)
            if check_password(password, fcuser.password):
                pass
            
            else: 
                res_data['error'] = "비밀번호가 틀렸습니다."

        return render(request, 'login.html', res_data)

값을 모두 입력하지 않거나, 비밀번호를 틀리게 입력했을 경우 에러 메시지를 띄운다.

로그인에 성공했을 때는 우선 pass로 남겨놓고 확인을 해보자.

실험을 해보니 모두 잘 나오는 것을 볼 수 있다.

--- Session 활용하여 로그인

그다음 비밀번호 일치했을 때의 코드를 작성해준다. 여기서 세션을 활용한다.

community ---> user ---> views.py

 ...
 if check_password(password, fcuser.password):
                request.session['user'] = user.id 
                
                return redirect('/')
 ...

전 코드에서 pass부분만 고쳐준다. 비밀번호가 일치하면 로그인 처리를 해주는 코드이다. request.session은 딕셔너리 처럼 사용하면 된다. user라는 key에 user의 id 값을 넣어 주고, 페이지의 홈화면으로 가는 코드 redirect('/')를 작성해 주었다. 내부적으로 로그인이 되는 과정은 복잡해보였지만, 장고를 활용하면 이렇게 데이터 저장만 해주면 알아서 처리가 되기 때문에 편리하다.

community ---> user ---> views.py

home 함수를 작성해준다.

def home(request):
    user_id = request.session.get('user')
    if user_id:
        user = User.objects.get(pk=user_id)
        return HttpResponse(user.username + "님 환영합니다!")

    return HttpResponse("Home!")

session에서 저장해두었던 user key를 받아와 user_id에 저장해주고, 그에 해당하는 User모델 객체를 user에 저장한다. h로그인에 성공한다면 그 user의 username을 HttpResponse로 띄워주는 코드이다.

community ---> urls.py

이번엔 user안의 url이 아닌 community 안의 url 파일을 열어준다.

urlpatterns = [
   ...
    path('', home)
]

url에 아무것도 붙이지 않았을 때 home 뷰를 불러오는 코드까지 마쳤다. 확인해보자!

그냥 서버에 들어가면 Home!, 로그인을 하면 username이 잘 띄워진다.

*** 내부적으로는

개발자도구(F12) 를 키면 application 탭 ---> cookie ---> sessionid ---> 하나의 식별자 가 저장되어 있다.

웹페이지가 클라이언트를 식별하는 식별자인 것이다.

간단한 로그아웃 구현

community ---> user ---> view.py

logout 함수 작성

def logout(request):
    if request.session.get('user'):
        del (request.session['user'])

    return redirect('/')

간단하게 세션에 user 키값이 저장되어 있으면 그것을 지우는 코드이다.

user ---> urls.py

아직 화면을 구성하지 않았으므로 url에 logout 을 치면 로그아웃 되는 코드를 써준다.

urlpatterns = [
	...
    path('logout/', views.logout),
]

이제 .../user/logout 이라고 치면 로그아웃이 되고 홈화면으로 돌아가게 될 것이다.

결과

로그인이 된 채로 logout 주소를 쳤더니 성공했다!

'웹 > Django' 카테고리의 다른 글

[DJANGO 기초] 7. Template 확장, 상속 (0)	2021.06.19
[DJANGO 기초] 5. Static 파일 관리, 부트스트랩 CSS 테마 적용 (0)	2021.06.19
[DJANGO 기초] 4. 회원가입 페이지 만들기 (MTV 구조 - T, V 작성) (0)	2021.06.16
[DJANGO 기초] 3. Django admin, 개발 서버 활용 (0)	2021.06.14
[DJANGO 기초] 2. MTV의 Model 생성, sqlite db 기본적인 관리 (0)	2021.06.14

🤍

[DJANGO 기초] 6. 세션, 로그인 페이지 구현

'웹 > Django' 카테고리의 다른 글

+ Recent posts

티스토리툴바