Django 이메일 인증 비밀번호 변경 | 프로젝트 UI 설계

Django에서 이메일을 보내는 것부터 시작해서 1주일 정도가 지났다. 비밀번호 초기화 이메일을 보내고 이메일 내용에 첨부된 URL로 들어가서 비밀번호를 다시 설정해주면 비밀번호가 다시 설정되는 원리였다. 평소에 웹을 이용하면서  자주사용하던 기능이라 사용해보고 싶었고 나중에 사용할 일이 있을 것 같아서 의욕이 넘쳤다. 하지만 여러개의 오류와 코드를 보는눈이 부족해서 시간이 엄청 오래 걸렸다.

처음엔 블로그나 장고 홈페이지를 보면서 진행했는데 막상 해보니 어떤 의미인지 모르는게 많았다. 그리고 블로그의 글들이 불친절하다고 느끼면서도 각자 만드는 방식이 달라서 이것저것 만져보다가 시간이 지나버렸다. 그러면서 나는 최대한 이해를 하고 간단하게 만들어보고 싶었다.

우선 html이 4개나 필요했다

위에서 부터 차례로 reset_done은 비밀번호 변경을 마쳤을때, reset_form은 이메일 url을 눌렀을때 보이는 html, reset_sent는 이메일을 입력후 이메일을 보냈을때의 html, reset은 이메일을 적는데 사용되었다.

여기서 오늘 하루종일 고민했던 reset_form 이였다. 나는 이용자에게 보기좋은 ui를 제공하고 싶었다. 이메일로 온 url을 클릭했는데 이상한 화면으로 납치되는건 싫었다. 그래서 이 html은 내가 커스텀한 화면으로 나타낼때 가장 중요한 화면이였는데 장고에서 제공하는 html을 찾지못했고, 어떻게 내가만든 html에서 POST를 해야 인식하는지 전혀 알지 못했다. 그러다 갑자기 생각난게 url로 접속했을때 화면을 우클릭 검사로 보면되지 않을까? 라는 생각을 했고 우클릭을 했을때 토큰과 장고에서 기본적으로 사용하는 html을 볼 수 있었다. 요즘 조금 익숙해지면서 print와 shell 콘솔창 등을 활용하는데 결국 혼자 생각해낸게 어느정도 위로가 됐다.... 그렇게 html 완성이후 urls를 연결했다.

path('reset_password/', auth_views.PasswordResetView.as_view(template_name="user/password_reset.html"), name="reset_password"),
path('reset_password_sent/', auth_views.PasswordResetDoneView.as_view(template_name="user/password_reset_sent.html"), name="password_reset_done"),
path('reset/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name="user/password_reset_form.html"), name="password_reset_confirm"),
path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(template_name="user/password_reset_done.html"), name= "password_reset_complete"),
path('reset_password_done/', auth_views.PasswordResetCompleteView.as_view(template_name="user/password_reset_done.html"), name= "password_reset_done"),

auth_views.PasswordReset 를 들고와서 커스텀을 해서 사용해도된다. 나는 as_view에 내가만든 html만 적용해주었다.

 

html을 커스텀 한 후 중요한 입력내용만 맞게해주면 비밀번호가 변경이 된다

        <form method="POST">
          {% csrf_token %} 
          <form method="POST">
          <input type="password" name="new_password1" autocomplete="new-password" required id="id_new_password1" placeholder="비밀번호">
          <input type="password" name="new_password2" autocomplete="new-password" required id="id_new_password2" placeholder="비밀번호 확인">
          <input type="submit" value="비밀번호 변경"/ class="btn">
        </form>