그저 카카오 로그인 api 하나 연결하고 싶다는 것이었는데...
너무 많은 에러를 마주했었다.
너무 많아서 기억도 잘 안나기 때문에 크롬 방문기록 보면서 적어야 됨


그럼에도 불구, 구글링 + 사람들의 작은 포스팅 + 팀원의 갓뇌 덕에 사흘 만에 빠져나올 수 있었기 때문에 이 감사한 마음을 (큰 도움이 되지 않을지라도) 나와 같은 문제를 겪고 있을 사람들을 위해 작은 포스팅을 올리는 것으로 갚고자 한다.

이 포스팅을 빌어...날 도와준 벨로거들, 스택오버플로우, 나의 팀원들에게 감사를 표합니다..정말 천재들이세요...
이분들 없이 개발 절대 못함;

집단지성 만세

본격 에러 마주하기 레고~!

에러의 뿌리는 팀원 중 한분이 네이버 로그인 api를 페이지에 붙인 후에,
내가 pull 해서 로컬로 돌려보면서 시작되었다.

팀원이 정보를 가져다줄 서버를 5000번 포트로 설정했는데, 진짜 놀랍게도 여기서부터 문제였다.
카카오도 아니고, 네이버꺼 돌려보려다 마주한...

0번째 에러) tcp 5000번 포트를 누가 쓰고있다는데요

events.js:167
  throw er; // Unhandled 'error' event
  ^
Error: listen EADDRINUSE :::5000

이런 에러였다.
(당시의 정확한 에러 메시지는 아님. 앞으로 나오는거 다 정확히 내 상황은 아님. 그러나 같은 문제로 생긴 같은 종류의 에러메시지를 소개할 예정이다. 참고바람)

날 도와준 티스토리...

https://wotres.tistory.com/entry/node-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EB%B2%95-Error-listen-EADDRINUSE-8000

음 5000번 포트를 쓰고 있다고...?

근데 나는 그 포트를 연 기억이 없고...

이럴때는 포트를 확인하고 죽이면 된다.

사용중인 포트 찾아서 Kill하기

// 해당 포트가 동작하고 있는지 조회

$ lsof -i :포트번호

// 포트 닫기

$ kill -9 PID

이렇게 원하는 포트 번호를 찾아서 Kill하면 된다.
그래서 Kill했다. 근데? 또 뜨는 것이다......이러면 죽는댔는데....
왜 안죽지 다들 죽는데 왜...

계속 이런 상태였다.
kill -9 ${PID} 을 해도 다시 살아났다. 팀원의 맥북은 이렇지 않았기 때문에 당시에는 무슨 문젠지는 모르겠지만 포트를 5001번으로 임시적으로 바꾸어 실행하는 방향을 택했었다.

삼일째 같은 코드보면서 5001번인지 3000번인지 5000번인지 redirect할 uri가 너무 헷갈려서 해결하기로 함.
폭풍 구글링 후 알게 된 충격적인 사실...

0번째 문제해결) mac북 운영체제 내 airplay 수신모드 문제였다.ㄴㅇㄱ

macOS Monterey에서 7000번 포트랑 같이 5000번 포트도 AirPlay를 위해 사용한다는 것...!!!!

시스템 환경설정에서 Airplay 수신모드 꺼주면 해결된다...!

애플 스택익스체인지 감사합니다.......
https://apple.stackexchange.com/questions/431154/controlcenter-app-listens-to-port-5000-tcp-on-monterey-os-is-that-normal-why-d

진짜 대박임.
airplay 니가 몬데~5000번을~맘대루 여니~

여기에서 저 airplay수신모드를 꺼주면
5000번 포트가 죽는다...

그럼 이제 5001번 말고 5000번으로 하면 됨

0번째 포트 문제 이렇게
해결완료.

드디어 kakao 로그인api 붙이기 시작...

1번째 문제) api 문서 읽을 줄 모름

ㅋ..개웃겨
그냥 네이버 api 붙여준 팀원이 "심심하면 카카오 한번 해보고~"라고 흘리듯 도전정신을 심어주고 가셔서
api에 대해서 아무것도 모르면서 무작정 시작..

일단 팀원이 적어둔 네이버 코드 복붙 가보자고~

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

"여윽시 공식문서 아니겠나~"
라고 오만방자하게 생각하면서 보기 시작...

이렇게나 잘 나와있다. 지금보니까 되게 친절하다.

약간 이해하고 보면 잘 보이는데 처음엔 이게 뭔소리일까 싶었다.

일단 팀원의 코드설명과 저 위 그림으로 이해한 플로우

1) 인가코드 받기

2) 인가코드 -> 토큰 받기

3) 토큰 -> 사용자 정보 받기

우리가 얻어야 할 것은

(1) 인가코드
(2) 액세스 토큰
(3) 사용자 정보

오케이 가보자.

(최적화된 코드라고 볼 순 없다는 점 양해 부탁드리며...-앞으로 더 수정할 코드들임)

1) 인가코드 받기

진짜 신기한게 얘는 그냥 문서에서 설명해주는대로 다 설정하고,
rest api key 랑 redirect_uri 만

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

여기에 넣어서 GET방식으로 보내주면 로그인 화면이 뜬다......개신기;
api만든 사람들 진짜 리스펙..세상을 이롭게 만들기 장인들

그치만 나는 없는 에러도 만들어내는 에러장인이니까
이와중에도 에러를 만났다.

2번 문제) 뭐가 문제길래 자꾸 사이트에서 연결할 수 없다고 뜸

Redirect Uri 알못 상태.....상당한 문제였다.

redirect uri란...카카오 서버가 정보를 처리한 후 전달해줄 곳을 의미한다.
우리팀은 http://localhost:5000/kakao/callback 에 가져다달라고 했다.

그러면 로그인창에서 받고 서버에서 처리한 정보를 카카오 서버가 위 uri로 보내준다.
(클라이언트(3000번)에서 인가코드를 요청하고 서버에서 토큰 - 사용자 정보 까지 받아오는 플로우)

그럼 redirect_url 뒤에 인가코드(code={여기있는거})가 붙어서 url로 날라온다.

근데 받을 준비를 안해주면

이런 페이지가 보란듯이 떠주신다.




나의 경우,

(1) 검은화면이 뜰 때는
redirect_url 뒤에 인가코드가 붙은 url을 받아 처리할 페이지와 함수를 정해주지 않았고

(2) 위 이미지처럼 사이트에 연결할 수 없다는 화면이 뜰 때는
서버 코드 안에 경고나 에러가 있는 경우

였다.

(1)의 경우

이런식으로 route.js에 /kakao/callback 으로 가면 어떤 행동을 취할지 정해줘야한다.

위 코드는

/kakao/callback 으로 가면 oauthController에 있는 getByKakao라는 함수를 실행해줘

라는 의미다.

그럼 getByKakao에서 (1)인가코드를 이용해 토큰을 받아오고 (2)토큰을 이용해 사용자 정보를 가져와서 보여준다.

(2)는 에러 원인이 되는 경우의 수가 꽤 많았다.

내가 이놈으로 인해 마주한 에러만 기억나는 것만 4개...
https://developers.kakao.com/docs/latest/ko/kakaologin/trouble-shooting

친절한 카카오..

내가 만났던 에러들을
인가 코드 관련 에러부터 하나씩 살펴보도록 하겠다.

KOE006 : Redirect URI 문제

인가코드를 보낼 때 설정해둔 uri와 같지 않으면

이렇게 에러가 뜬다.

이 문제가 떴을 때는 일단 [카카오 디벨로퍼스-내 어플리케이션-카카오 로그인] 에서 redirect uri를 잘 설정해두었는지를 확인하는 것이 먼저다.

그리고 인가코드 보낼 때 설정해둔 uri 거랑 같은지 맞춰보기.

나는 이미 설정한 것들 몇번이나 확인하고 다시 했는데도 계속 떴었다. redirect uri의 개념과 코드의 흐름을 이해하지 못해서 아무거나 막 넣어보고 그랬다;;;;;

http://localhost:3000/kakao/callback 같은 끔찍한 url을 설정해보기도 하고 별의 별짓을 다했음..
알고나서 다시 보니까 너무 말도 안되는 것이었다. 원인 분석 및 캡쳐를 위해 그때의 오류를 다시 만들려고 해보니까 그것도 쉽지가 않다.

여기부터는

2)인가코드 -> 토큰 받기

에서 발생한 오류다.

KOE010 : client secret 문제인 척 하는 코드 경고/에러 오류

이 놈..이놈 진짜 열받는다.
시크릿 없을 때도 뜨고, 시크릿 있을 때도 뜬다.
시크릿 활성화 해도 뜨고, 안해도 뜬다.
뭐야?왜 그러는데? 공식문서를 봐도 이해가 안됐다.

검색해보니 이런 내용이 있었다.

위의 경우 중 하나에 해당되어 도움이 되었다기 보다는,
문서에 나와있는 것과 전혀 다른 이유로도 Bad client credentials 에러가 날 수 있다는 것을 깨달았고, 다른 에러들도 그럴 수 있겠다는 생각이 들었다.

내 기억에 시크릿을 껐다 켰다 없앴다 만들었다 openID를 켰다껐다 하면서 어쩌다보니
320 에러로 넘어갔던거같아서 정확한 해결이 뭐였는지는 잘 모르겠다.

시원한 솔루션을 못 드리겠는 점 송구합니더...

KOE303 : 인가코드 redirect uri와 토큰 redirect uri가 다름

이것도 나를 한참 괴롭혔다.

팀원이 구현한 네이버 api 코드의 redirect uri는
인가코드를 요청해서 받아올 때 설정해 둔 것과(5000번 포트),
토큰을 요청해서 받을 때(3000번 포트) 설정해 둔 것이 달랐기 때문이다.
(복붙했으니까...난 될 줄 알았었다....)

중요한 사실 : 카카오는 인가코드 redirect uri와 토큰 redirect uri가 같아야 한다.

두 redirect uri 를 아예 같게 만드니까 이 에러는 해결되었다.

말로 하면 되게 금방 쉽게 푼거 같은데, 사실 이게 거의 이틀 걸렸다.

redirect uri의 개념이 무엇인지도 잘 모르는 상태에서
네이버 api와 똑같이 접근하려고 하니 당연히 문제가 있겠죠;;;

해당 문제가 계속 반복되면서 어렴풋이 생각했던 것 같다.

네이버랑 카카오 api의 request parameter나 response의 생김새가 굉장히 비슷해보이지만
방식은 조금 다를수도 있겠다

라는 생각에 복붙한 코드에서 벗어나 새로운 코드를 짜볼까 생각하게 되면서

혹시 내일 까먹을까봐 자기 전에 생각했던거 적어두고 취침했다.

일어나서 틈틈이 수업들으면서 다시 하나씩 도전해보았지만,
아직 api에 대한 이해가 부족한 나에게 0부터 시작하기란 많이 어려웠기도 했고

내가 네이버 api 코드까지 다 이해하고 전체를 리팩토링 할 수 있는게 아니라면 지금 팀원이 만들어둔 코드가 훨씬 확장성 면에서 유용하겠다는 생각이 들었다.

팀원의 코드를 최대한 활용하기로 마음먹고 git 변경 사항들 다 discard 하고나서 다시 0부터 시작했다.

3) 토큰 -> 사용자 정보 받기 외 기타(그냥오류)

KOE320 : 그냥 어디서 에러만 나면 그냥 다 ~ 320이래;

지겹도록 많이 만난 320...
내가 만났던 경우들 다 정리해보았다.

(1) url에 state=${state} 가 바디로 들어가는걸 토큰 요청에도 넣음(안됩니다.)

state가 local일 때와 배포되었을 때를 분기해서 redirect uri를 지정해주었던 기존의 로직이 있었다.
개발환경일 때와 배포되었을 때를 나누어서 지정해주겠다는 건데, 이건 인가코드를 요청하는 url에만 넣으면 되는거였다. 나는 토큰 요청에까지 넣어줘버림.

토큰 코드의 로직을 잘 이해하면 그러지 않았을 것이다.

잘 읽어보면 state는 redirectUrl을 분기하는 것으로서의 역할만 하기 위한 것이다.
토큰 받을 때는 필요가 없음!!!!!

(2) 필요한 코드가 없을 때

저렇게 authorization code를 찾을 수 없다고 뜨는데, 처음엔 code를 code로 인식을 못하나~했었으나, 그냥 필요한 코드를 잠깐 주석처리 해놨거나, 코드 안에서 오류가 있을 때 도 320 에러가 난다.

나의 경우,

ㄱ. 코드 마지막에 다음과 같이 redirect를 안해주는 경우에도,

ㄴ. 토큰 만료 코드(unlink) 또는 쿠키만료시간을 설정하는 코드가 없을 때도 320에러가 났었고,

ㄷ. 불러온 데이터 내에서 없는 것을 console.log 할 때도 났었다.

기존 코드가 아래와 같았었는데

출력해보면 출력이 안된다. 그래서 데이터를 받아오기는 하는지 확인하는 방법을 찾다가

https://injekim97.tistory.com/137

위 게시글을 발견했다.

이분이

포스트맨

으로 api 실습을 하셨더라고...?
그리고 사용법도 너무 쉬워서 덥썩. 나도 사용해야겠다 싶었다.

uri와 파라미터를 넣어주면 테스트 해볼 수 있다.

또 에러가 나오겠지 라는 마음 90퍼센트,
데이터가 나올지도 모른다는 믿음 10퍼센트로 도전..

엥??!?!?!?!받아진다잉 받아진다잉 이게 무슨일이야 받아진다

그럼 왜 받아온 데이터가 출력이 안됐던거지?
하고 자세히 보니

사용자 정보를 가져오는 response data 안에 response라는 놈이 없다.

뭔데?
그래서 그런거였어?
그럼 data만 받아오자고.

요렇게 하니까 해결완료.

포스트맨....좋으다.

기타 오류 ;

포스트맨으로 사용자 정보를 요청했을 때 콘솔창에
token이 존재하지 않다는 에러나,

target id가 supply되지 않았다는 에러가 떴었다.

이것은 토큰이 만료되었을 확률 또는 제대로 전달되지 않았다는 의미로 생각했다. 분명히 넣으라는거 다 넣었는데 왜 안되지 했다가 찾은 것이

Headers 옆에 Auth 였다.
Headers로 보내봤는데 되지 않는다면,
Auth에 토큰 타입을 설정하고 토큰을 입력하는 방법도 시도해보길 추천한다.

이렇게 길고 길었던 여정..끝
3일동안 열심히 봤던 코드들을 모두 빠짐없이 이해했다고 하기엔 무리가 있지만, 직접 써보고 또 유심히 보면서 생각해볼 수 있었다는 것만으로 충분히 의미가 있다고 생각한다.

넘 뿌듯해~!~!!~!~!

앞으로도 파이팅!!!!!!!