🌕 카카오 소셜로그인 - KOE303 에러?

0. 현재 진행 상황

• springboot와 docker, docker-compose, github actions를 통한 서버 배포가 완료된 상태입니다.
  📍 🐳 SpringBoot + Docker + DockerCompose를 이용한 AWS EC2 배포하기

1. 문제 상황

• 인가 코드가 필요하지 않은 api의 접근은 정상적으로 가능한 상태입니다.
  
  
  

• 그러나 사용자 정보가 필요해 인가 코드를 받아와야 하는 모든 api는 접근 불가인 상태입니다😅

• 웹브라우저 접근 시 500 Error 발생

  • 카카오 소셜로그인이 제대로 작동되지 않는 것 -> jwtfilter를 통과하지 못하는 문제로 전이된 것으로 파악하고 있습니다.
    

  • AWS ec2 서버 내 에러(카카오 소셜 로그인 시도 시)
    

2. KOE303 에러가 뭘까?

KOE란?

• kakao 측에서 개발자에게 보여주는 에러 로그의 헤더 형식
• 뒤에 붙는 번호에 따라 에러 원인을 확인할 수 있는 형태
• kakao develops 공식 사이트에서 문제 해결에 관한 자료를 올려두었으니 해당 자료를 참고해 에러의 원인을 파악하면 됩니다!
  📍 Kakao Delelopers/trouble-shooting

• KOE303 에러
  
• 카카오 소셜로그인은 인가 코드 요청과 액세스 토큰 요청시 사용하는 redirest URI가 반드시 동일한 형태여야 한다고 하네요!

3. KOE303 Trouble Shooting

1️⃣ 현재 프로젝트에서 사용중인 redirect URI 설정을 모두 ec2 서버에 해당하는 IP와 포트번호로 변경하는 작업을 진행했습니다.
localhost:8080 ➡️ 3.34.236.224:3000

🚀 application.yml 일부

  security:
    oauth2:
      client:
        registration:
          kakao:
            client-id: {RestapiKey 값을 작성}
            client-secret: {카카오 디벨로퍼에서 발급}
            client-name: Kakao
            redirect-uri: http://3.34.236.224:3000/oauth/kakao/login
            scope: profile_nickname, profile_image, account_email
            authorization-grant-type: authorization_code
            client-authentication-method: POST
        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

🚀 OauthController 일부

    @GetMapping("/kakao/login")
    public void redirectToKakaoLogin(HttpServletResponse response) throws IOException {
        response.sendRedirect("https://kauth.kakao.com/oauth/authorize?client_id=[실제 restapikey 값을 그대로 넣어줌]&redirect_uri=http://3.34.236.224:3000/oauth/kakao/login&response_type=code");
    }

    //카카오 소셜 로그인 구현
    @GetMapping("/oauth/kakao/login")
    public void kakaoLogin(@RequestParam("code") String authCode, HttpServletResponse response)
            throws IOException {

        LoginResultDto loginResult = kakaoLoginService.handleKakaoLogin(authCode);
        boolean isNewUser = loginResult.isNewUser();

        Cookie authorization = new Cookie("Authorization", loginResult.getToken());
        authorization.setSecure(true);
        authorization.setHttpOnly(true);
        authorization.setPath("/");
        authorization.setMaxAge(3600);
        response.addCookie(authorization);

        String redirectUrl = "/api/v1/parking/read/detail/1";
        response.sendRedirect(redirectUrl);
    }

• 모두 진행했으나, 변화가 없었습니다.
  더이상 코드 부분에서 바꿀 수 있는 부분이 없어, kakao Devtalk에 글을 올려 해결해보기로 했습니다🧐
  
  

2️⃣ Kakao Devtalk 사이트에 KOE303 에러 질문

• KOE320에러와 함께 KOE303에러가 발생하여 질문을 올렸습니다.
  앞서 공식 사이트에서 확인했듯, 현재의 배포된 프로젝트에서 redirect URI가 다르다는 답변을 받았습니다.
  

• 하지만 현재 배포된 프로젝트에서의 코드 문제가 아닌 것으로 판단하여, 웹브라우저에서 확인 가능한 에러를 첨부해 다시 질문을 올렸습니다.
  
  -> 변경을 했음에도 여전히 kakao 측에서는 리다이렉팅 URI가 일치하지 않는 것으로 보여 더 자세한 질문을 올린 뒤, 우선 프로젝트 코드를 다시 분석해보기로 했습니다.

• 다시한번 분석해보니, 현재 카카오 로그인의 인가 코드까지는 발급이 되지만, jwtfilter까지 도달하지 못하며 500 에러가 발생한 것 같아 코드에 대한 질문을 드렸습니다.
  

• 코드 상의 큰 문제는 없다는 답변을 받았고, 배포에 대해서 언급해주셨는데 이 부분에서 Github Actions를 다시 살펴봐야겠다는 생각을 할 수 있었어요!

4. 현재까지의 분석

• 현재 프로젝트는 Github Actions에서 github repository의 deploy.yml을 워크플로우에 올려 스크립트가 모두 실행되는 형태입니다.
• 그 중, Make application.yml에 대한 스크립트를 chatGPT에 질문해보고 힌트를 얻을 수 있었습니다!
  deploy.yml > Make application.yml 부분

      - name: Make application.yml
        run: |
          cd ./src/main/resources
          touch ./application.yml
          echo "${{ secrets.PROPERTIES }}" > ./application.yml
        shell: bash

지금의 스크립트를 살펴보면, Github Actions의 워크플로우 실행 시 Github Secrets에 저장된 PROPERTIES를 복사해서 가져오는 형태로 구성되어 있습니다.

그렇다면 현재의 application.yml의 내용이 그대로 복사되어 있어야만 적용이 될 것입니다.
그런데, 현재 PROPERTIES 내부의 실제 내용 중 redirect uri 설정 부분에서 localhost:8080으로 설정했던 예전 내용만이 반영되어 있을 수 있다고 생각했어요😮

• 즉, github repo > Settings > Security > Actions 에서 저장한 PROPERTIES 값을 현재의 application.yml 내용으로 수정해줘야 배포된 프로젝트에 반영이 되는 것이 아닌가 생각하고 있어요...!
  
  (1) Github Actions Properties 내용 수정
  (2) 프로젝트 commit&push로 Github Actions Workflow 실행하고 배포
  (3) 다시 접근해서 확인

5. 결과

• 위의 방법대로 실행한 결과, 소셜로그인 문제가 해결되었습니다!
  하지만 서버 소스코드 상 https에서만 cookie가 나오도록 설정한 것이 문제가 되어 JWT String argument cannot be null or empty. 에러가 발생했습니다.
• 해결은 authorization.setSecure(false);로 했습니다.!
  • 기존에는 true로 되어 있어 http 형식의 ip 접근으로는 api에 접속할 수 없었던 문제였던 걸로 판단했습니다.

결론

• KOE303 에러는 배포 시에 문제일 수도 있다.
• 대부분의 에러는 오타 또는 접근 권한 설정에 따른 문제로 발생한다.