6.기능 구현(3) - 로그인(카카오 로그인 API)

🦮 스스로를 위한 프로젝트 일지 가이드

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

3️⃣ 프로젝트를 되짚어보며 개선할 점이 있는가

 

✅ 카카오 로그인 API

프로젝트에서 API를 사용할 계획이었는데, 그중 카카오 로그인 API를 사용하기로 하였다.

 

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

 

나도 웹 서비스를 이용해본 사용자로서 가장 귀찮은 부분이 사이트 회원가입이라고 생각한다.

그래서 SNS 로그인이 있는 사이트를 선호하기에 사용자 편의성을 위해 적용하기로 했다.

 

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

 

API를 가져오는 과정은 그렇게 어렵지 않았다.

js에서 카카오 로그인 API를 받아 띄우고 나서 문제는 로그인 기능을 내 사이트와 연결해서 구현해야 하는 거였다.

새로운 화면을 보이는 것보다 동적 웹페이지를 보내는 게 낫다고 판단하여 비동기로 구현하기로 했다.

그런데 기업이 아닌 이상 카카오 로그인 api로 비밀번호는 받을 수 없고 사용자의 카카오 id와 닉네임만 제공받을 수 있다.

즉, 이 정보로 DB에 등록을 해서 회원가입부터 먼저 해야 하는데 그러려면 비밀번호가 필요하지만 회원으로부터 비밀번호를 직접 입력받을 수는 없다.

 

그래서 생각한 방법은 카카오 회원의 비밀번호를 임의로 통일하는 거였고, 'sns'라고 설정했다.

카카오 회원의 아이디는 어차피 모두 다르기에 비밀번호가 같아도 회원 판별에는 상관이 없고,

기존 회원은 회원가입 시 유효성 체크를 거쳐 영문, 숫자 혼합의 아이디와 비밀번호를 설정하기에 기존 회원과 비밀번호가 겹칠 일은 없었다.

 

최종적으로 다음과 같이 구현했다.

카카오 로그인 버튼을 누르면 GET 메소드로 등록된 아이디인지 판별한다.

아이디가 있으면 👉 그대로 로그인 진행

아이디가 없으면 👉 POST 메소드로 넘어가 자동 회원가입 진행 후 다시 한번 로그인 버튼을 누르도록 안내

 

 

로그인 후 회원 이름 띄우는 부분 👉 카카오 닉네임으로 대체

연락처 👉 기존 회원은 회원가입 시 연락처를 입력 후 가입하지만 카카오 회원은 '연락처 미등록'으로 집어넣고 회원가입, 회원정보 수정에서 연락처를 수정할 수 있게 하고 비밀번호는 jsp c:choose로 '카카오 회원은 비밀번호 수정 불가'로 설정해 정보를 수정할 수 없게 했다.

3️⃣ 프로젝트를 되짚어보며 개선할 점이 있는가

 

API 키를 js에서 변수로 저장하고 썼는데, 원래는 보안상 이유로 properties로 관리한다고 한다.

이 부분을 적용하지 못했다.