[스타트업 백엔드 일기😕] 카카오 로그인 구현하기 (JS)

All We Need is Data, itself !·2025년 2월 28일
0

백엔드 여행

목록 보기
4/6

회사에서 카카오 로그인 구현할 일이 있어서...
카카오 로그인 구현에 대해 가볍게 한줄 남겨본다.


  • 준비되어 있어야 할 것 : 카카오 개발자 아이디와 활용신청 (biz의 경우 검수까지 며칠 걸림)

카카오 입장에서는 생판 모르는 사람에게 누군가의 정보를 줄 수는 없는 노릇이라,
나름 개인정보를 어디에 쓸건지? 너네 진짜 서비스하는 앱이 맞는지? 등을 확인하는 과정이 있다.
이 과정을 모두 거치고 kakao biz 딱지를 얻으면, 개발이 가능하게 된다.

만약 biz 딱지를 얻지 못했다면, 닉네임과 프로필 사진 정도 등의 정보에 대해서만 권한을 획득할 수 있다.
근데 어차피 카카오측에서 엄청 긴 string을 주는데 그게 nice의 개인식별코드..? 같은 느낌이다. 그래서 인간 구별은 가능함.
auth id만 얻어와서 그걸로 다시 우리측 앱이나 서비스에서 가입시키면 (이름과 번호를 받으면) 굳이 biz 딱지를 얻지 않아도 된다.
카카오로 다시 로그인할때 어떤 일이 생길지는.. 일단 지켜봐야한다.


1. Kakao Developers 앱설정에서 카카오 로그인 ON으로 변경하기

활성화 설정을 ON으로 바꾸고 Redirect URI 를 넣어준다.
말 그대로 카카오측에서 이 사람 얘야 라고 알려줄 URI를 뜻한다.
나의 경우 백단 처리가 필요해서 (db에 auth id 담아야하니까) PHP 파일로 리다이렉트 시켰다.

2. js 구현

이제 버튼을 누르면 진행될 함수를 넣어줄 것이다.
기본적인 모습은 아래와 같다

쉽게 말해, 먼저 카카오톡 실행이 되고, 알아서 하다가- 나한테 코드를 줄테니 토큰 발급을 1회 하고 너 하고싶은대로 하면돼 ~ 라는 의미


초기 코드를 아주 상세하게 설명해줘서 좋았다.
라고 하기엔 이거 찾을라고 난리를 침 ㅜㅜ 좀만 더 잘보이게 해줘요


저기 ${VERSION} 이랑 ${INTEGRITY_VALUE} 은 JavaScript 시작하기-다운로드 에서 찾을 수 있다.


남은 내용은 저기 있는 노란 하이라이트를 누르면 그냥 스크립트 코드 전체를 준다.
만약 그게 싫다면 VERSION을 직접 찾고, 해당 버전의 INTEGRITY_VALUE 값을 복사해서 넣어주자.
INTEGRITY_VALUE 값은 저 노란 버튼 말고 그 옆에거 누르면 던져준다.


그리고 저 초기화 코드를 이용해서 초기화를 해본다.


아, 저기 JAVASCRIPT_KEY는 API 활용 토큰 같은 거다.
내 애플리케이션 > 앱 키 > JavaScript 키 에서 찾을 수 있다.

True를 던져준다.


파라미터는 이렇게 던져줬다.

기본적으로 이렇게 하면 웬만하면 알아서 앱이 열리고 알아서 불러가지만, 앱이 없는 경우는 오류가 생긴다.
본부장님이 확인해주셨다ㅜㅜ

그래서, Docs를 샅샅이 뒤져보니 이런 말이 있었다. ( 는 무슨 바로 아래 있는데 안읽음 )


즉, error가 떨어질 수도 있다는 것.

그럼 Callback 측에서 이 내용에 대한 것들도 redirect로 보내줘야 한단 말씀

그럼 그냥 웹페이지로 가서 아이디랑 비밀번호 입력하게 만들면 된다.


여기를 참고하여 header에 Location을 잡아준다.

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

사실 너무 쉽게도, 예제가 있었고 여기 그대로 쓰면, 동작된다.

3. 토큰

JS로 구현할 거라면, 여길 참고하면 된다.

나의 경우 말했다시피 DB 적재도 있고 해서 그냥 php 파일로 만들었다.

php 파일은 REST API로 이용해야함.

파라미터는

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

이런식으로 만들어서 보내면 된다.

REST_API_KEY는 아까 그 앱 키를 넣으면 마무리-

끝!

profile
분명히 처음엔 데린이었는데,, 이제 개린이인가..

0개의 댓글

관련 채용 정보