Firebase Authentication에서는 구글·페이스북 같은 글로벌 플랫폼 로그인은 기본 제공하지만, 카카오 로그인은 직접 구현해야 한다.
유료 옵션이나 서버 연동 방식도 있지만, 연습용/포트폴리오용 프로젝트라면 부담스러운 게 사실..
그래서 이번 글에서는 카카오 JavaScript SDK를 이용해 ‘가짜 로그인 흐름’을 만들어 본 과정을 기록해봤다.
카카오 '가짜'로그인 흐름 구현해보기
1. kakao-init.js 설정
시작은 카카오 데벨로퍼 페이지에서 친절하게 설명된 것 그대로 따라한 init.js 만들기!
그리고 login.html에 카카오 로그인 JavaScript SDK 파일을 포함시켰다.
${VERSION}은 v1으로 적용했다- 참고로 v2도 나왔다고 한다.
v1 vs v2: 카카오 SDK v2는 v1을 개선한 최신 버전으로, ES6+ 환경에 맞춰 코드 구조가 단순해졌다고 한다. (신규 프로젝트는 v2 권장)
integrity...?
브라우저가 리소스를 변조되지 않은 상태로 받았는지 확인하기 위한 SRI(Subresource Integrity) 값입니다. (보안 강화를 위해 제공됨)
crossorigin="anonymous":
다른 도메인에서 불러온 리소스라도 쿠키나 인증 정보를 포함하지 않고 가져오는 설정. (역시 보안 목적)
카카오 로그인 버튼 만들기
카카오 로그인 버튼 삽입하기~.~
카카오 데벨로퍼 사이트에서는 디자인 가이드도 제공하고 있다.
리소스도 다운로드 받을 수 있어서,
간단하게 png로 다운받았다.
버튼 높이값이 좀 아쉽긴 하지만 ㅠ 지금은 기능 구현이 우선이니까~~
콜백용 html 만들기
실제 서비스라면 받은 토큰을 서버에서 검증 → 세션/DB에 저장 → 사용자 인증 관리 단계까지 거쳐야 한다.
하지만 이번 연습에서는 단순히 로그인 성공! 메시지를 띄우는 정도로, 프론트엔드에서만 동작하는 가짜 로그인 흐름을 구현했다.
때문에,
로그인 토큰을 받을 서버가 없으니 callback용 html을 따로 만들어야 했다.
그리고 그 html에 진짜 서버 연동은 없지만 페이지에서는 로그인 된것처럼 처리할 수 있다.
- 카카오데벨로퍼 사이트에서 앱 키를 다운받아서 맞춰줘야 한다.
페이지가 여러개라 생각보다 이것저것 맞춰줘야 할 게 많았음.
카카오 데벨로퍼 사이트에서 사이트 도메인도 등록해줘야 하고, 리다이렉트 uri가 특히 헷갈리고 할 것들이 많았다.
✅ 리다이렉트 URI 설정 시 체크할 것
- 카카오 개발자 사이트 → 앱 설정에서 리다이렉트 URI 등록
- init.js →
redirectUri값 동일하게 지정 - callback.html → 해당 파일 경로가 일치해야 정상 작동
카카오 데벨로퍼 사이트에서도 맞춰주고~
이닛 파일에서도,
콜백화면에서도 맞춰줘야 함.
여차저차 맞춰주니까,
제대로 작동한다 ㅎㅎ
마무리로 깃허브 업데이트 푸시까지 완료!
👉정리
Firebase에서는 카카오 로그인을 기본 지원하지 않는다.
- JavaScript SDK를 이용하면 포폴용 가짜 로그인 흐름 정도는 구현할 수 있다.
- 리다이렉트 URI, 앱 키 설정 등 여러 곳을 꼼꼼히 맞추는 게 핵심 포인트다.
이후 실무 프로젝트에서는 서버 검증/토큰 관리까지 붙여야 하니, 이번 경험이 좋은 디딤돌이 될 듯하다.
오늘 하루 고생했습니다 나 자신~~~
