쇼핑몰을 개발해보면서 가장 대중화된 구글 로그인 외에 카카오로 로그인 할 수 있는 기능을 구현해보고자 합니다!!
이거 구현하면서 조금 많이 헤맸어서 도움이 되길 바라는 마음으로 작성해보아요 :)
우선 제일 처음으로는 라이브러리를 가져와야 합니다! Django에서는 로그인에 대한 기능도 모두 제공하고 있기 때문에 따로 구현할 필요가 없습니다 🥳 라이브러리를 우선 다운 받을게요!
pip install django-allauth
가장 먼저 settings.py에 allauth 라이브러리를 사용함을 알려야 합니다. 그와 동시에 소셜 로그인을 사용한다는 것도 같이 써줍니다.
providers로 어떤 소셜 계정을 연동시켜 사용할 것인지 작성합니다. 저는 카카오를 사용할 것이기 때문에 다음과 같이 작성해주었습니다.
이곳은 개발자들이 카카오와 관련된 기능을 가져가 개발하거나 관련된 제품을 개발하는 개발자들을 위한 곳입니다!
로그인 기능을 이용하기 위해서는 여기서 자신의 개발 제품을 등록해야 합니다.
저는 쇼핑몰이기 때문에 myshop이라는 이름으로 애플리케이션을 추가해주었습니다.
애플리케이션을 등록하고 나면 다음과 같이 여러가지 키값이 제공된 상태가 됩니다.
그 중에 저희는 REST API 키를 사용할 거에요!!
이제 앱 키 밑에 있는 플랫폼 칸에서 우리의 앱이 웹을 이용한 제품이라는 것을 알리기 위해 제가 사용하는 사이트 도메인을 등록해줍니다.
이렇게 해준 후에 반드시 카카오 로그인을 활성화해주어야 합니다 !! 안그러면 로그인이 정상적으로 켜지지 않아요. 활성화 하기 전에 동의항목에서 필수 정보를 등록해주셔야 활성화가 된다는 얘기가 있어서 닉네임만
내 애플리케이션 > 제품 설정 > 카카오로그인 으로 들어가면 활성화 버튼이 있는데 그것을 on으로 바꾸어 줍니다.
여기서부터 정말 중요합니다 !!
반드시 로그인이 된 후에 Redirect할 경로를 지정해주어야만 로그인이 완료됩니다!!!
방금 들어간 페이지의 가장 밑 부분에 URL을 지정하는 부분이 있는데 그곳에 어떤 링크로 Redirect할 것인지 지정해줍니다. 저희는 Django의 allauth를 사용하기 때문에 다음과 같이 경로를 지정해줍니다!
이제 카카오 안에서 해야할 것은 모두 마쳤으니 다시 파이참으로 돌아가겠습니다!
프로젝트의 제일 루트 폴더의 urls.py에서 다음과 같이 allauth 경로를 작성해줍니다.
path('accounts/', include('allauth.urls')),
카카오 로그인 페이지로 이동할 버튼을 이렇게 작성해주었습니다.
마이그레이션을 진행한 후 !! 서버를 작동시켜서 admin 페이지로 가면
이렇게 소셜 계정을 설정할 수 있는 칸이 새로 생깁니다!
'소셜 어플리케이션' 으로 들어가서 카카오 소셜 어플리케이션을 추가해줍니다. 파이참에서 카카오를 사용한다고 하였기 때문에 제공자에 카카오가 나타날 것입니다!!
여기서 클라이언트 아이디에 앞서 가져온 REST API를 넣어주면 됩니다. 카카오는 시크릿 키가 필요없기 때문에 none으로 작성해준 후 위와 같이 사이트까지 추가해주면 됩니다.
메인 페이지의 역할을 하는 링크와
-> 127.0.0.1:8000
리다이렉트 링크를 추가해주었습니다.
-> 127.0.0.1:8000/accounts/login/kakao/callback
카카오 로그인은 리다이렉트 전 링크를 전해주지 않으면 오류가 발생할 수 있다고 하기 때문에 모두 추가해준 것입니다!
여기까지 잘 하셨다면 정상적으로 카카오 로그인이 구현되어 사용이 가능해집니다 😆
정상적으로 카카오 로그인이 구현되었습니다!!!🥳