카카오API로그인(DB insert) springboot Mybatis

카카오API로그인(DB insert) + springboot+Mybatis

Spring Security소셜로그인 SpringBoot 카카오 OAuth0 JWT 시큐리티 구현 간결한 프로세스 소개 로그인 연관된 그 어떠한 지식도 없었기에 수 십 시간을 삽질했다. 그래서 더 가치가 있었던 구현. 우선, jwt가 어떠한 것인지 시큐리티가 어떠한 것인지 아는 정보 하나 없이 시작해야 했기에 인프런 강좌 최주호님의 스프링부트 시큐리티JWT강의를 먼저 수강하였습니다. 개발자 팀 구성 FE 안드로이드 BE 스프링 어플리케이션 개발 및 플레이 스토어 배포 카카오 애플리케이션 설정 1. 해당 사이트에 들어갑니다.

카카오톡 로그인 Firebase Authentication 연동

앞서 게시글 맨 처음에 카카오 로그인과 Firebase Authentication 연동을 위해서 다음과 같은 절차가 진행된다고 했다. 카카오톡 로그인 Firebase Authentication 이메일 비밀번호 방안으로 카카오 이메일 계정 등록 Firebase Authentication에 카카오 이메일 계정으로 로그인 따라서 이전 FirebaseAuthentication의 방법 중 이메일 / 비밀번호 방안으로 로그인하는 함수 emailAuthSignUp를 수정해줄 필요가 있습니다.

최초 로그인이라면 정상적으로 Auth.auth.createUser 함수가 실행되어 Firebase Authentication에 계정 등록이 되고 바로 completion의 emailAuthSignIn 함수가 실행될 것입니다.

3카카오 앱 동의항목 설정

이후 동의항목을 설정해 주어야 합니다. 이전에 개인정보동의사항 검토 신청을 첫번째 해주어야하는데요. 설명에는 사업자 정보를 등록하라고 되어있지만, 사업자 정보등록 안해도 됩니다 첫번째 아래 개인정보 동의항목 검토 신청을 클릭합니다. 이후 비즈앱 전환 rarr 앱 아이콘 등록 순으로 들어가서 대표 이미지를 아무거나 등록해줍시다. 저는 인터넷에 저화질 사진 하나를 받아서 등록했습니다. 등록을 하게 되면 개인 개발자 비즈 앱 전환 항목이 생성됩니다.

저는 인증 로그인 단계에서 이메일이 필요하기 때문에 이메일 필수 동의로 설정하신 후 전환 버튼을 눌러주시면 됩니다. 비즈앱으로 전환하기 과거에는 카카오 계정 부분은 권한 없음 이었지만 비즈앱으로 전환 하고 활성화 된 것을 확인하실 수 있습니다.

Kakao Developers 앱 등록

카카오 계정으로 로그인을 하고 상단 메뉴의 내 애플리케이션으로 이동합니다. 메인 화면에서 내 애플리케이션 추가하기를 누르고 애플리케이션 추가하기에 위와 같은 정보를 입력합니다. 사실 앱 아이콘은 추가해도 되고 안해도 됩니다. 앱 이름과 사업자명은 필수인데, 사실 일을 위한 앱이 아니라 연습용 앱이기 때문에 내 이름을 입력했다. 이후 저장을 누르시면 이제 메인 목록에 다음과 같이 나의 앱 플랫폼이 만드러진 것을 알 있습니다.

이제 플랫폼 목록에서 나의 앱을 누르시면 다음과 같은 정보를 확인할 있습니다. 이제 하단에 있는 플랫폼을 설정으로 들어가 내 Xcode 프로젝트와 연결하는 처리를 해야합니다.

카카오 제품설정 로그인

이제 플랫폼에 프로젝트와 연동까지 마쳤으면 다음은 카카오의 여러 상품 서비스 중 로그인 설정을 진행해야 합니다. 좌측 메뉴 하단에서 상품 설정 카카오 로그인을 클릭하여 카카오 로그인 활성화 상황을 ON으로 변경해주고 이어서 나타난 OpenID Connect도 활성화해줍니다. OpenID Connect는 로그인할 때 인증정보가 담긴 ID 토큰을 발급받고 토큰 유효 시간동안은 추가 로그인을 하지 않아도 로그인이 가능하고 보안 성능도 높다고 합니다.

그리고 바로 아래 메뉴에 있는 동의 항목 메뉴으로 이동해줍니다. 그러면 위와 같은 설정 화면을 볼 있습니다. 카카오 로그인을 할 때, 카카오 계정에서 여러가지 항목의 사용자 개인정보를 앱에서 활용할 있습니다. 물론, 이를 하기 위해서는 개인정보 보호법에 따라 사용자의 동의가 필수입니다.

Next.js에서 Firebase로 요청 보내기

Firebase의 회원가입에는 firebase/auth의 createUserWithEmailAndPassword 메서드를 이용합니다. 우선은 임시로 테스트 데이터를 넣어서 Firebase에 요청이 가는지만 확인해봅니다. Firebase와의 통신은 문제 없이 이루어졌습니다. 이제 테스트 데이터 대신 카카오 API에서 받은 값을 넘겨주면 되겠네요. 카카오 API의 응답을 받을 페이지에서 데이터를 가공하여 넘겨봅시다.

그 뒤, 구성한 파라미터 정보를 httpskapi.kakao.comv2userme에 함께 넘겨 필요한 데이터를 받아옵니다. 여기서는 kapiParams의 propertykey에 구성했던 유저의 이메일 정보가 되겠습니다. 주의유저의 정보를 받아오려면 해당 정보에 대한 유저의 동의가 필요합니다. 카카오 개발자 페이지에서 비즈 앱 등록을 마치면 동의를 받을 수 있습니다.

자주 묻는 질문