preprint 예약서비스 개발 기록일지 - 소셜(구글, 카카오) 로그인 & 회원가입 구현, db구조 변경 & 템플릿 수정

0718~0725 개발일지

글 작성 주기가 그렇게 좋진 못했는데, 소셜로그인 & 회원가입 부분에서 상당히 시간을 많이 빼앗겼기 때문이다.

원래는 따로 소셜 로그인 없이 그냥 id, pw기반 간단한 회원 관리를 하려고 하였으나...

실 결제 서비스를 도입해야 하기에 그냥 id, pw기반 관리는 불안하기도 했고

또 이전에 하려다가 실패했던 테스크가 바로 소셜로그인이라 바로 도전했다가 시간을 많이 쓰게 되었다.

 

그냥 만들어진 예제 코드대로 소셜로그인을 구현해도 되었으나... ㅎㅎ

그렇게 하려다가, 이게 무슨 구조로 이렇게 돌아가는 것인지, 구글과 카카오는 어떤 api기반으로 이렇게

인증 시스템을 구현해둔 것인지가 궁금해져서 직접 공식 문서들을 다 읽고, 각 호출 구조, api구조를 뜯어보고

분석해 보면서 & 수많은 블로그 글들을 참고하면서 소셜 기반 로그인, 회원가입 기능을 모두 구현했다.

 

추가로 서비스 진행에 필요하여 동의해야 하는 항목 데이터들과 각종 관련 데이터들을 추가로 작성할 수 있게

소셜 회원가입과 연계하여 추가 회원가입 폼을 만들어서 처음 로그인 시 회원가입에서 데이터 입력을 할 수 있도록

코드를 작성해두었다.

 

개발할 때 참고했던 블로그 및 구글, 카카오 공식문서

- 참고했던 블로그

https://medium.com/chanjongs-programming-diary/django-rest-framework로-소셜-로그인-api-구현해보기-google-kakao-github-2ccc4d49a781

Django-Rest-Framework(DRF)로 소셜 로그인 API 구현해보기(Google, KaKao, Github)

https://velog.io/@hnnynh/OAuth-2.0과-Django의-구글-소셜로그인

[Django] OAuth 2.0과 구글 소셜로그인 활용하기

 

- 공식문서

https://developers.google.com/identity/protocols/oauth2/web-server?hl=ko#httprest_1

웹 서버 애플리케이션용 OAuth 2.0 사용  |  Authorization  |  Google for Developers

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

 

 

간략하게 코드 설명

간략하게만 설명하지면...

Google 로그인을 위해 먼저 사용자가 Google 로그인 버튼을 클릭했을 때 Google의 인증 페이지로 리디렉션시키는 google_login 함수를 만들어 진행했다.

=> 바로 Google OAuth 2.0 인증을 위한 URL로 리디렉션한다.

사용자가 인증을 완료하게 되면 Google에서 제공한 코드를 사용하여 액세스 토큰을 얻기 위해 google_callback 함수를 사용한다.

이 함수는 액세스 토큰을 얻은 후 해당 토큰을 사용해 사용자 이메일 정보를 가져온다.

이메일 정보를 통해 사용자가 이미 등록된 유저인지 확인하고, 그렇지 않다면 소셜 회원가입 페이지로 리디렉션한다.

 

Kakao 로그인의 경우도 마찬가지이다. 사용자를 Kakao 인증 페이지로 리디렉션하고,, 인증이 완료되면 

kakao_callback 함수가 액세스 토큰을 요청하고 -> 사용자 정보를 받아온다.

받은 이메일 정보를 통해 사용자를 확인하고, 동일한 절차로 회원가입 또는 로그인을 진행한다.

 

=> 이 소셜로그인에 대해서는 차후에 따로 시간을 들여 제대로 된 정리를 해볼 예정이다.. 양이 너무 많기에

 

 

구현한 결과

해서, 구현한 소셜 로그인, 회원가입 기능을 간략하게 보자면 다음과 같다.

 

- 구글 소셜로그인

=> 아직 프론트처리를 하진 않았지만.. login with google 버튼을 클릭하면

=> 로그인 창으로 잘 넘어오고 -> 로그인을 진행하면

=> 첫 로그인이니까, 이렇게 처음에는 회원가입 진행을 할 수 있게 따로 폼을 만들어뒀다. 그리고 서비스 구현에 필요한 데이터들도 적게,,

=> 그럼 잘 로그인된 것을 확인할 수 있다.

 

- 카카오톡 소셜로그인

=> login with kakao를 누르면

=> 로그인 창이 잘 뜬다. -> 정보를 입력하고 로그인하면

=> 역시 잘 회원가입되는 것을 볼 수 있다.

=> 최종 db에는 이렇게 저장이 된다.