카카오 소셜 로그인 - 프론트엔드와 연동 오류

동아리 프로젝트 백엔드 개발이 마무리되어 가고 프론트에서 API연결을 시작하고 일주일 쯤 되었을 때,
프론트 팀원으로부터 지금 디스코드로 들어와 줄 수 있는지 연락을 받았다. 

 

다름이 아니라 이때 로그인 연동이 안되서 담당 프론트, 백 팀원이 고생하고 있었는데 잘 해결이 안되서 

요청이 온 것 이었다.  (나도 로그인 경험이 있으나 기억이 가물가물한 상태..ㅎ)

 

우리는 카카오 소셜 로그인을 사용하기로 했는데 프론트에서 리다이렉트 페이지로 안넘어간다는 얘기를 들었다. 

나중에 돌아보니 이게 정말 큰 힌트이자 주요 원인이였는데 다들 정확한 문제 원인을 알지 못해 한참 헤맸었다. 

결론을 먼저 말하자면, application.yml 에 redirect uri를 변경하지 않아 생긴 문제였다.

 

이 경험을 토대로 카카오 소셜 로그인을 백에서 구현 후, 프론트와 연결할 때 꼭 해야하는 두가지 일을 기록하려 한다.
※ 이것만 하면 되는 것이 아닌 프론트 연결 할 때 '필수 과정 중 하나' 임에 주의하자
(즉, 혹시 비슷한 상황에서 헤매고 있다면 아래의 설정을 했는지 한 번 확인하길 바란다.)

---

 

1. 카카오디벨로퍼 사이트에서 redirect URL에 프론트 서버 주소를 등록

• https://developers.kakao.com/  > 내 애플리케이션 > 대시보드 > Redirect URI > 설정하기 클릭

• 기존에는 아마 파란색 박스와 같이 백엔드 로컬서버만 등록되어 있을 것이다. 
• 여기에 수정 버튼을 클릭하고 프론트 로컬서버도 추가해준다.

 

2. 배포된 application.yml 파일 수정

• 이 부분이 문제가 된 부분이었다. 해결되고 다들 얼마나 안도했는지..ㅎ
• 이제 application.yml 파일에서 redirect가 프론트의 주소로 가도록 redirect URL를 수정해야한다.
  (코드 마지막 줄 집중!)
  • 기존 ->  redirect-uri: http://localhost:8080/oauth2/authorize

spring:
  ... # 생략
  security:
    oauth2:
      client:
        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id
        registration:
          kakao:
            client-id: 44f4fe12a4e9a5418bfca8e217710552
            client-secret: q2Huqj9PgCCAe8CJdVVhv6O6XqFMXQgf
            client-authentication-method: client_secret_post
            redirect-uri: http://localhost:8080/oauth2/authorize
			... # 생략

 

• 수정 후 ->  redirect-uri: http://localhost:3000/oauth2/authorize

spring:
  ... # 생략
  security:
    oauth2:
      client:
        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id
        registration:
          kakao:
            client-id: 44f4fe12a4e9a5418bfca8e217710552
            client-secret: q2Huqj9PgCCAe8CJdVVhv6O6XqFMXQgf
            client-authentication-method: client_secret_post
            redirect-uri: http://localhost:3000/oauth2/authorize
			... # 생략

• 이렇게 프론트 주소로 변경!

---

느낀점

• 사실 프론트와 연결하면서 생기는 오류는 문제 원인을 찾기 어려운 것 같다. 
• 프론트의 문제인줄 알았던 것이 사실 백의 문제이거나 또는 그 반대의 경우인 경우가 종종 발생한다. (그만큼 많이 헤맬 수 있다는 것!)
• 이러한 상황을 겪으며 느낀 것은 '프론트에서 백에게 오류를 건의했을 때는 이미 프론트에서 많은 시도와 고민해봤지만 해결되지 않아 넘어온 것이라는 점을 기억하자' 였다.
  • 사실 나는 백엔드 개발자고  먼저 API를 구현하여 작동하는 것을 확인하고 넘겨주기에, 이 사실을 망각할 때가 있다.  이번 오류를 발견하고 해결해주면서 이 점을 다시 한번 생각하게 되었다.