[Django App 3-4] 인스타그램 클론 코딩_로그인 페이지

<Complete List>

1. 데이터베이스 및 UI 설계하기

• 인스타그램 UI 구성
• 데이터베이스 테이블 설계 및 구현

2. 앱 만들기

• instagram, accounts 앱 만들기
• views.py 분리하기

3. 회원가입 페이지

• url
• view
  • 비밀번호 암호화 함수 구현 - 해시 함수
• template

 

<To Do List>

4. 로그인 페이지

• url
• view
  • 세션에 사용자 ID 저장하기
• template

 

---

4. 로그인 페이지

• accounts 앱에서 작업
• 일단 Django의 인증 기능을 사용하지 않고 구현해보기

4.1 url

urlpatterns = [
    re_path(r'^register/$', PreRegisterAccountsView, name='pn_reg_accounts'),
    re_path(r'^login/$', PreLoginView, name='pn_login'),
]

 

4.2 PreLoginView

• splitviews 디렉토리에 PreLoginView.py 생성

• splitviews 의 __init.py__에 PreLoginView 를 import

 

• 로직(전체 코드 - github)

  1. request.method == GET
     : 로그인 페이지 rendering
  2. request.method == POST

     2.1 로그인 페이지에서 사용자가 입력한 form 데이터를 받아온다.

     2.2 사용자가 입력한 ID 값을 조건으로 하여 user 테이블에서 데이터를 SELECT

     2.3 User 테이블에서 가져온 데이터와 form 데이터를 비교한다.

     2.4 아이디가 틀린 경우: User 테이블에 입력한 ID의 데이터가 없다.

     ​                               "로그인 실패" 메시지와 함께 로그인 페이지로 redirect

     2.5 비밀번호가 틀린 경우: User 테이블에 입력한 ID의 데이터가 있으나 비밀번호 일치 X

     ​                                  "로그인 실패" 메시지와 함께 로그인 페이지로 redirect

     2.6 둘 다 맞는 경우: 로그인 성공

     ​                          세션에 로그인한 사용자의 ID값을 저장

     ​                          "로그인 성공" 메시지와 함께 메인 페이지로 redirect

 

사용자가 입력한 비밀번호와 User 테이블의 비밀번호를 비교하기 위해선 입력값도 다음과 같이 해시해서 비교해야한다.

• 사용자가 입력한 비밀번호와 사용자 ID의 row에서 가져온 salt를 합침
• 합친 문자열을 hash하여 DB의 user_pw와 비교

user_id = request.POST.get('user_id')
user_pw = request.POST.get('user_pw')

# ...User 테이블에서 데이터 가져오기 생략...

reg_id = datas[0][0]
reg_pw = datas[0][1]
salt = datas[0][2]

hash = pbkdf2(user_pw, salt, 10000, digest=hashlib.sha256)
hashed_pw = base64.b64encode(hash).decode('ascii').strip()

# 2.2 비밀번호가 틀린 경우: 로그인 실패
if str(hashed_pw) != reg_pw:
    messages.error(request, '아이디나 비밀번호가 일치하지 않습니다. 다시 입력해주세요.')
    return redirect('accounts:pn_login')

 

사용자가 로그인했는지 안 했는지, 로그인했다면 어떤 사용자인지 쉽게 알 수 있도록 세션에 사용자 ID 값을 저장한다.

 

저장한 후 메인페이지로 redirect

request.session['user_id'] = reg_id
return redirect('pystagram:pn_main')

 

4.3 login.html

• 전체코드 - github