카카오 로그인 시퀀스 다이어그램
카카오에서 제공하는 카카오 로그인 시퀀스 다이어그램은 다음과 같다. 나는 여기서 Step 1: 인가 코드 받기는 프론트엔드 단에서 처리하고, Step 2~Step 3는 백엔드단에서 처리하려고 한다. 사용자 정보를 조회한 후에는 백엔드에서 해당 사용자 정보를 기반으로 자체 JWT 토큰 및 DB에 사용자 정보 저장을 통해 로그인/회원가입을 처리할 것이다.
Kakao Developers에서 내 애플리케이션 만들기
먼저 Kakao Developers에 가입한 후, “내 애플리케이션”에서 애플리케이션 추가하기를 선택한다.
어플리케이션에 대한 정보를 입력한다.
Kakao Developers에서 카카오 로그인 활성화
애플리케이션을 만든 후에는, 왼쪽 탭에서 "카카오 로그인" 항목을 찾은 다음에, "활성화 설정"을 ON으로 만들어준다.
해당 화면에서 아래로 조금 내리면 Redirect URI를 설정하게 한다. 이 리디렉션은 프로덕션에서는 프론트엔드에 연결되게 할 거지만, 테스트하기 위해서 리디렉션 URI에 백엔드 서버 API 경로도 같이 설정해주었다.
Kakao Developers에서 동의항목 설정
왼쪽 메뉴를 보면, "동의 항목"이 있다. 여기서 개인정보 동의 여부를 설정해주어야 한다. 여기서는 소셜 로그인 후 프로필을 만들 것이므로, 닉네임, 프로필 사진의 "설정"을 클릭해서 필수 동의로 설정해준다.
나는 이 정보가 필수적으로 필요한 것들이라서, "필수 동의"로 설정하고 그 이유를 명시했다.
여기서 한 가지 문제가 생겼는데, 카카오 계정(이메일)을 필수적으로 받아야 하는데, 이는 "개인정보 동의항목 심사 신청"을 해야 했다.
"비즈 앱 전환"을 선택하면 사업자 정보 등록 또는 카카오 비즈니스 통합 서비스 약관 동의를 하라고 나오는데, 나는 사업자가 아니라 개인 개발자이므로 카카오 비즈니스 통합 서비스 약관 동의를 해주었다.
그러면 이렇게 2단계 인증을 하라고 나온다. 인증과정을 모두 거치면 된다.
그럼 이제 위의 화면이 이렇게 "개인 개발자 비즈 앱 전환"으로 나온다.
개인 개발자 비즈 앱으로 전환하는 목적을 "이메일 필수 동의"로 설정하고, 전환해주면 된다. 아마 나처럼 이메일 정보를 얻기 위해서 비즈 앱으로 전환하는 개발자들이 많은 것 같다.
다시 카카오 로그인의 "동의항목"으로 돌아와서, 카카오계정(이메일)의 설정을 필수 동의로 바꾸어주면 된다.
오른쪽 상단의 "동의 화면 미리보기"를 클릭하면 다음과 같이 이메일, 프로필 사진, 닉네임을 필수적으로 제공하는 동의 화면이 뜬다.
브라우저에서 확인
이제 브라우저에서 로그인이 가능한지 확인하려고 한다. 먼저 "앱 키" 항목으로 가서, REST API 키를 확인한다.
그 후 다음 경로로 브라우저에서 접근한다.
https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=[REST_API_KEY]&redirect_uri=[REDIRECT_URI]client_id에는 위에서 아까 확인한 REST API 키를 넣어주고, redirect_uri에는 아까 위에서 설정한 리다이렉트 URL을 넣어준다. 나는 백엔드 서버로 테스트할 것이므로, 파라미터 값으로 아까 설정한 http://localhost:8080/dev/login/oauth/kakao을 넣어줬다. 그럼 아래와 같이 내가 설정해준 앱 관련 정보와, 제공받아야 하는 항목이 잘 뜨는 것을 확인할 수 있다. 아직 백엔드 코드를 짜진 않아서 로그인했을 때 딱히 다른 화면이 뜨진 않는다.
추가: Kakao Developers에서 보안 설정
토큰 발급시의 보안을 좀 더 강화하기 위해서, "보안" 항목에서 Client Secret를 설정해준다. 코드 생성을 클릭하면 시크릿이 발급되는데, 이는 나중에 백엔드에서 활용할 예정이다.
