📍 카카오를 이용한 로그인 및 회원가입 기능을 구현해보고자한다.
웹에서 카카오를 통해 로그인 할 수 있는 방식은 다양하지만, 그 중 이번에 사용해볼 방식은 JavaScript를 이용한 방식!
이전에 REST API를 이용한 방법을 해봤어서 JavaScript를 이용해서 해보고싶었음! KAKAO-REST-API
REST-API를 통한 로그인방식은 브라우저,IOS,AOS 이슈가 일도 없이 너무 잘 굴러가서 JS SDK도 만만하게 생각했는데.. 안드로이드 이슈가 터져버렸다..
먼저 Kakao SDK for JavaScript를 사용한 로그인 구현 방법이다.
핸드폰에 카카오톡 앱이 설치되어있다면 바로 카카오톡 앱을 실행하여 로그인을 할 수 있도록 제공한다.(간편로그인) 만약 카카오톡 앱이 설치가 안되어있다면, Rest API 방식에서 본 로그인 페이지가 나타난다.
1. KAKAO JavaScript SDK를 적용하고자하는 프로젝트에 포함한다.
//index.html
//<script defer src="https://developers.kakao.com/sdk/js/kakao.js"></script> 이건 맨처음 삽입했던 스크립트
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.4.0/kakao.min.js"
integrity="sha384-mXVrIX2T/Kszp6Z0aEWaA8Nm7J6/ZeWXbL8UpGRjKwWe56Srd/iyNmWMBhcItAjH" crossorigin="anonymous"></script>2. JavaScript SDK 초기화 함수를 호출한다.
(JAVASCRIPT_KEY는 [내 애플리케이션] > [앱 키]에서 확인한 JavaScript 키를 할당해야한다.)
SDK를 계속 초기화하지 않고, 초기화 여부를 판단하여 false일 경우에만 초기화 시킨다.
//login.tsx
const { Kakao } = window;
useEffect(() => {
if (!Kakao.isInitialized()) { //SDK 초기화 여부 판단 함수
Kakao.init(process.env.REACT_APP_KAKAO_KEY); //SDK 초기화 함수
}
}, []);이제 실제 로그인 버튼 작동시 발생하는 플로우다.
3. 유저가 카카오 버튼을 누르면 Kakao.Auth.authorize()함수를 호출해 간편로그인을 요청한다.
이 함수에는 많은 파라미터를 담을 수 있는데, 나의 경우 redirectUri과 throughTalk만 사용했다.
파라미터 문서 참고
Kakao.Auth.authorize({
redirectUri: REDIRECT_URI,
throughTalk: Boolean(navigator.userAgent.match(/Android/i)) ? false : true,
});
//뒤에 설명할 안드로이드 이슈로 인해 throughTalk 값을 위와 같이 처리함!
//throughTalk는 간편 로그인 사용 여부에 대한 값이다. 디폴트는 true!4. Kakao.Auth.authorize()를 호출하면 JavaScript SDK가 카카오톡을 실행시킨다.
4-1. 카카오톡이 핸드폰 백그라운드에 설치되어있는지 확인한다.
4-2. 카카오톡이 설치되어있으면 카카오톡실행, 미설치 환경에선 카카오계정으로 로그인 시도. 이후 과정은 REST API와 동일하다.
(사용자는 카카오톡 동의화면에서 서비스 이용에 필요한 동의항목에 동의하고 로그인하거나 취소할 수 있음)
5. 사용자가 동의후 로그인을 계속 시도할 때 인가코드값을 담은 쿼리스트링을 redirectUri로 리다이렉팅한다.
(카카오톡 인증서버가 사용자의 선택에 따라 요청 처리 결과를 담은 인가코드값을 줌)
http://localhost:8000/sign-in?code="Blah blah_Blah blah"6. 리다이렉팅 한 컴포넌트에서 인가 코드값을 가지고 accessToken값을 발급받는다.
여기부터는 REST AI와 동일하다.
Rest API 방식과 차이점
SDK를 활용한 로그인 방식도 REST API와 같이 리다이렉트된 페이지에서 인가 코드를 받아서 처리하는 방식은 동일하다 ! 차이점은 앱을 먼저 구동시키냐 아니냐의 차이!
Rest API 방식은 카카오 쿠키가 존재하면 빠르게 로그인 페이지를 넘어가는데, SDK방식은 카카오 쿠키가 존재하더라도 무조건 카카오앱을 실행하여 로그인한다.
📌 헤매였던 포인트
JS SDK로그인 방식은 간편로그인 방식으로 디바이스 백그라운드에 카카오톡이 있는지 여부를 체크한다. (그래서 인지 대체로 앱 로그인에서 많이 쓰임)
모바일 웹으로 로그인을 할 경우에도 마찬가지로 동작한다.
하지만 Android 모바일 웹에서는 카카오톡이 있음에도 응답값을 발생하지 못하는 이슈가 생겼다.
JS SDK에서 authorize로 로그인 시, iOS와 달리 Android는 브라우저에서 응답을 받지못하기 때문에 Android에서만 throughTalk:false를 이용하여 카카오톡이 아닌 카카오 계정으로 로그인 처리를 해야했다.
카카오톡 안드로이드 SDK 로그인 이슈 미리보기
