24. 외부 라이브러리를 블로그에 활용(회원가입 & 로그인 기능 구현)

django-allauth 설치

  allauth는 구글, 카카오, 페이스북으로 로그인하는 기능 구현을 쉽게 해주는 라이브러리다.

 

settings.py 파일 수정

 새로 설치한 라이브러리를 적용하기 위해 INSTALLED_APP에 추가한다. 아래쪽은 인증관련 코드를 입력한다. 

 

django_blog_project/urls.py 파일 수정

  allauth가 사용할 수 있는 URL 경로를 추가한다.

 

DB에 반영

 

django-allauth 적용

 

구글 개발자 콘솔에서 새 프로젝트와 클라이언트 만들기

  구글에 개발자 콘솔(console.developers.google.com)에서 웹 사이트를 등록해야 구글 계정으로 등록할 수 있게 해준다. 

 

구글 계정을 가진 모든 이들이 사용할 수 있도록 User Type을 외부로 설정한다.

 

지금은 애플리케이션 이름만 입력해 준다

 

 

 

  웹 사이트이기 때문에 웹 애플리케이션을 선택한다. 이 글을 쓰고 있는 지금은 AWS, 도메인 없이 로컬을 쓰고있으므로 자바스크립트 출처로 http://127.0.0.1:8000을 입력한다. 승인된 리다이렉션 URL에는 http://127.0.0.1:8000/account/google/login/callback를 입력한다. 아래쪽의 만들기를 클릭하면 클라이언트 ID와 보안 비밀번호가 뜨는데 이것은 보안에 중요한 요소이므로 함부로 공개하는 일이 없도록 한다.

 

 

그 후 블로그의 관리자 페이지를 보면 여러가지가 추가된 것을 확인할 수 있다.

 

Sites로 들어간 후 로컬 서버 경로를 입력해준다. 

 

Log in with google 버튼 활성화

  이전에 추가한 Log In 버튼을 클릭하면 나오는 모달에 Log in with Google을 클릭하면 회원가입 혹은 로그인이 이루어지도록 할 것이다.

 

  blog/navbar.html 파일을 수정해 준다.

 

  SocialApp에 매칭되는 query가 없다고 한다. 관리자 페이지의 SOCIAL ACCOUNTS → Social applications에서 ADD SOCIAL APPLICATION 버튼을 클릭해 빈칸을 채워준다. 

  

이게 무슨 일이지... 

 

  오류와 관련된 구글 페이지를 보면 승인된 리디렉션 URI와 일치하지 않는다고 한다. 다시 한번 검토해 보면 리디렉션 URI에 / 하나를 빼먹어서 mismatch 가 일어난 것이였다. 

 

  제대로 작동하게 되었다. 

 

로그인 성공시 포스트 목록 페이지로 리다이렉트 하도록 설정

 로그인을 성공하였으나 accounts/profile/ 에 대한 템플릿과 뷰를 지정하지 않았기 때문에 404오류가 일어난다. 굳이 따로 만들 필요 없이 포스트 목록으로 리다이렉트 하도록 settings.py 파일을 수정한다.

 

로그인 상태에서 username과 Log out 버튼 활성화

  로그인을 했다면 당연히 로그아웃 기능을 제공해야 할 것이며 더 이상 Log In 버튼을 제공하면 안 된다. 따라서 로그인한 사용자의 이름과 Log out 버튼을 추가해 본다. 버튼 위치는 기존에 있던 dropdown link이 Logout 버튼 위쪽에 있고 Logout 버튼은 기존의 LogIn 버튼이 있는곳에 위치한다. Logout 버튼의 경로는 /accounts/logout 으로 한다.

 

blog/navbar.html 파일 수정

 

이메일 로그인과 회원가입 버튼 활성화

  django-allauth는 구글 뿐만 아니라 다른 포털의 이메일을 통한 회원가입, 로그인 기능을 제공한다. 로그인시 이메일이 아닌 username으로 로그인을 하므로 문구를 E-mail에서 Username으로 바꿔준다. 문구가 수정된 버튼을 클릭시 accounts/login/으로 회원가입 경로를 설정해 준다. 회원가입은 이메일로 하며 클릭시 경로는 /accounts/signup/이다.