[Django] 13. 소셜 로그인 구현( kakao,google, fackbook 등)

안녕하세요 강민성입니다.

이번 시간에는 소셜 로그인 기능을 구현해보도록 하겠습니다.

누구나 쉽게 이용가능, 소셜 로그인 기능

우리는 이미 한 번 로그인 기능을 구현한 적이 있습니다.

궁금하시다면 여기 를 클릭해주세요.

기존의 로그인 방식과 소셜 로그인 방식의 차이는 무엇일까요?

기존 로그인 방식은 회원가입을 하게 되면 유저의 정보가

다음과 같이 장고에서 기본으로 제공해주는 데이터베이스에 저장이 됩니다.

하지만 이 데이터베이스에는 이 뿐만 아니라 모델에서 나온 정보도 많이 저장이 되어있을 겁니다.

이렇게 한 군데에 여러 성격의 정보들을 저장하는 건 좋지 못한 방법입니다.

따라서,

소셜 로그인은 소셜 서버에 request를 보내고 token 을 주고 받으며 로그인 과정을 거치게 됩니다.

이를 한 번 구현해보도록 합시다.

login 이라는 새로운 프로젝트를 만들어서 진행하겠습니다.

이는 여기를 참고해주세요.

설명은 생략하도록 하겠습니다.

당연히 settings 에서 앱 등록, makemigration 및 migrate도 완료하였습니다.

소셜로그인을 구현하기 위해서는 pip 패키지를 설치해야합니다.

pip install django-allauth

settings.py

다음으로는 장고에게 소셜로그인을 하겠다는 것을 알리기위해 settings 를 건드려야 합니다.

먼저 INSTALL_APPS 부터 수정하겠습니다.

36번째 줄에 sites 를 추가해주고,

위에서 install 한 allauth 에 관한 내용들,

그리고 provider 라고 어느 소셜 서버와 소통할지 결정해줍니다.

뒤에 google이 아니라 facebook 으로만 바꿔주면 facebook 로그인이 가능합니다.

지금은 google 로그인을 알아보겠습니다.

이제 맨 아래로 내려가서 

urls.py

다음으로는 urls 로 넘어가겠습니다.

위에서 설치한 allauth에는 이미 url이 기본적으로 설정이 다 되어있습니다.

마치 각 앱 별로 urls 를 따로 만들어주고 include 해서 가져오던 것과 같이 말이죠.

그래서 이번에도 이와 같은 방식으로 url을 설정해줍니다.

이제 이 변경사항들을 적용시키기 위해 migrate 해주도록 하겠습니다.

python3 manage.py migrate

변경사항은 admin 페이지에서 바로 확인할 수 있습니다.

4번째 Sites로 들어가면 현재는 example.com 으로 되있을겁니다.

이는 소셜 로그인의 대상이 되는 주소이므로 

다음과 같이 변경해줍니다.

127.0.0.1:8000

이제는 구글 계정을 연동해주도록 하겠습니다.

그러기 위해서는 구글 계정과 social accounts 를 연동해주어야 합니다.

연동 하는 방법은 admin 페이지 제일 하단, social applications 에서 새로 항목을 추가해줍니다.

내용을 입력하다보면,

client id, secret key 등 알 수 없는 내용이 나옵니다.

이들을 알기 위해서는 google로 접속해야합니다.

http://console.developers.google.com

접속 후 새 프로젝트 생성,

프로젝트를 만들어주고

다 만들었으면 좌측 메뉴에 사용자 인증정보,

OAuth 클라이언트 ID 로

제품이름 설정이 필요하다고 하니 동의 화면 구성

웹 어플리케이션 선택, 우리의 서버 url 적어주고 

아래도 한 번 더 적어주고

id와 key 생성! 복사해서 admin 페이지에 복붙하면

마지막으로, sites 의 주소를 chosen sites 로 넘겨주면 설정 끝!

login.html

이제 마지막으로 html에 띄워주는 과정을 알아봅시다!

먼저 socialaccount 기능을 사용하기 위해서는 위에 load가 필요합니다.

회원가입과 로그아웃에 걸려있는 링크는 우리가 만든 적 없는 링크입니다.

include로 url을 받아왔을 때 그 안에 알아서 구현되어있는 url 들입니다.

아래 if 문으로 가서 is_authenticated 는 로그인 여부에 따라 boolean을 반환하게 됩니다.

보기에 이쁘지는 않지만 기능적으로 모두 구현해보았습니다.

현재 admin 을 통해 로그인이 되어있기에 로그인이 되어있다고 뜹니다.

로그아웃을 하고 다시 로그인을 했더니 다음과 같은 400 에러가 떴습니다.

본문 2번째 줄에 나와있는 url을 

웹 어플레이케이션 클라이언트 ID 만들 때의 redirect url 설정에 추가해주면

google login 을 할 수 있게 되었습니다..!

마무리

아마 과정을 따라오면서 에러도 많이 떴을 꺼라고 생각합니다.

뭔가 논리적으로 코드를 짜기 보다는 있는 코드를 따라치는 기분이 들 수 있겠지만,

그 역시 앞으로 나아가는데 밑거름이 되지않을까 싶습니다.

소셜 로그인을 사용하여 더 접근성 높은 웹을 만드시기를 빕니다 :)