다음 메일 → 카카오계정으로 통합하기
길을 나서지 않으면 그 길에서 만날 수 있는 사람을 만날 수 없습니다.. 모바일 앱안드로이드 일반적으로 만들어지는 로그인 디스플레이 예시 입니다. 이 화면에서는 기존과 같이 이메일과 비밀번호를 받아서 로그인하는 방법을 지원합니다. 사전에 등록을 해야 하기 때문에 등록하는 화면도 따로 구현이 되어야 합니다. 다음은 소셜 로그인을 지원해주는 버튼을 그려 보겠습니다. 아이콘은 여기 저기서 이미지는 구해지기는 하나 이걸 또 변환을 해서 사용해야 하기 때문에 android studio의 메뉴에서 File New Vector Asset에서 사용할 vector 이미지 소스 파일은 아래 붙여 두도록 하겠습니다.
해당 이미지 들은 구글링을 통해 얻어진 파일들 입니다. 여기저기서 구현 이미지 데이터를 svg로 변환해서 사용했습니다.
유저가 소셜 로그인에 성공했다면
여기서 한번 짚고 넘어가야할 점은 상단의 카카오 로그인 Flow의 5번 과정입니다. 5번 과정에서는 개발자 앱에 등록된 Redirect URI로 전달 해야만 되는 말이 있었으나 이게 개발자 페이지에서 어떠한 방식으로 설정했는지 확인할 필요가 있습니다. Nest.js에서는 kakao 로그인을 위한 엔드포인트 경로인 apiauthloginkakao를 Redirect URI에 그대로 적용하면 됩니다. 원래는 사용자에게 소셜 로그인을 요청하는 엔드포인트와, 사용자가 로그인에 성공하면 백엔드에게 인가 코드를 발급해 주게 되는데 하지만 이 인가 코드를 받을 엔드포인트 이렇게 두 개의 엔드포인트가 구성되어야 합니다.
하지만 우리의 kakao strategy는 이 모두를 처리할 수 있도록 구성되어 있다고 해서 요청도 인가 코드에 대한 처리도 모두 한 곳에서 가능합니다.
구글 로그인 살펴보기
구글 로그인도 카카오와 매우매우 흡사합니다. 카카오 로그인 Flow와 별 차이가 없으며 회사가 다르기 때문에 발생하는 차이? 정도만 수정해주면 됩니다. 그렇기 때문에 카카오와 다른 부분 위주로 코드를 보여주도록 하겠습니다.