inflearn logo
강의

講義

知識共有

TypeScriptで学ぶReact.js:基礎から最新技術まで完璧に

カカオログインの実装 - 1

카카오로그인 에러

74

hicy3nh

投稿した質問数 2

0

AxiosError: Request failed with status code 401
    at settle (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:2106:12)
    at IncomingMessage.handleStreamEnd (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:3491:11)
    at IncomingMessage.emit (node:events:531:35)
    at endReadableNT (node:internal/streams/readable:1698:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:90:21)
    at Axios.request (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:4731:41)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async /Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/routes/auth.js:77:20

카카오 로그인 버튼 클릭후 동의하기 누른 다음 이런 에러가 뜹니다.
.env 파일은 이렇게 입력되어있고요.

JWT_SECRET=sucoding!@34
KAKAO_REDIRECT_URI=http://localhost:4000/auth/kakao/callback
FRONTEND_URL=http://localhost:5173
JWT_ACCESS_EXPIRES_IN=1h
JWT_REFRESH_EXPIRES_IN=7d

무엇이 문제일까요?

 

react react-router redux-toolkit zustand react.js

回答 3

1

sucoding

안녕하세요!

제보해주신 내용을 바탕으로 새로운 강의를 추가해서 업로드 했습니다.

258. 카카오 개발자 페이지 변경 내용 적용하기

제보 감사합니다.

좋은 하루 되세요 🙂

0

hicy3nh

클라이언트 시크릿 키를 클라이언트 아이디와 동일하게 썼었는데, 현재 카카오개발자 페이지가 달라지면서 클라이언트 시크릿 코드를 정확히 넣어줘야 합니다.

앱 > 플랫폼 키 > REST API > 클라이언트 시크릿 > 카카오 로그인 > 코드 를 .env의 클라이언트시크릿에 넣으니 작동 됩니다.

0

sucoding

안녕하세요!

확인해보니 카카오 개발자 페이지가 변경이 되어서 말씀해주신 부분이 정확합니다.

다만, '서비스의 보안 강화를 위해 클라이언트 시크릿 기능은 REST API 키 발급 시 기본 활성화 상태로 설정되며, 사용을 원하지 않는 경우 직접 비활성화 상태로 변경해야 합니다.' 라고 안내 되어 있어서 비활성화를 하면 기존처럼 진행이 가능한 부분으로 확인 됩니다.

해당 부분은 빠르게 강의 내용에 반영할 수 있도록 하겠습니다!

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. hicy3nh님.

카카오 로그인 버튼 클릭 후 발생하는 401 오류는 인증 문제와 관련되어 여러 가지 원인일 수 있습니다. 아래에 몇 가지 주요 점검 사항을 안내드리겠습니다.

주요 점검 사항:

  1. REST API 키 확인

    • 카카오 REST API 키가 서버에서 올바르게 설정되었는지 확인하세요. 통상적으로 .env 파일에 설정됩니다.
  2. 리다이렉트 URI 일치 확인

    • 카카오 개발자 콘솔에서 설정한 리다이렉트 URI와 코드 내에 설정된 KAKAO_REDIRECT_URI가 서로 일치해야 합니다. 불일치 시 401 오류가 발생할 수 있습니다.
  3. 앱 설정 확인

    • 카카오 디벨로퍼스 페이지에서 앱이 활성화되어 있고, 로그인 기능이 올바르게 설정되어 있는지 확인하세요.
  4. 엑세스 토큰 발급 요청

    • 동의 이후 엑세스 토큰을 발급받는 API 요청이 올바르게 진행되는지 확인해 보세요. 엑세스 토큰 발급 단계에서 오류가 발생하면 인증 실패로 이어질 수 있습니다.
  5. 서버 로그 확인

    • 서버의 로그를 확인하여 보다 구체적인 오류 메시지를 확인할 수 있습니다. 이는 문제 원인을 파악하는 데 큰 도움이 됩니다.

401 오류는 주로 인증 오류를 의미하므로 위의 항목들을 차례대로 점검하여 문제가 발생하는 부분을 찾아 수정하시길 바랍니다.

추가적인 도움말:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

cloudinary 관련

0

38

3

useOptimistic 실전-1 useState

0

58

2

discord 초대장 갱신이 필요한거같습니다.

0

59

1

할일 관리 앱(메모이제이션)

0

79

2

Web 플랫폼 등록

0

101

2

함수 정의 기준

0

76

2

fetch는 사용되는가

0

75

2

전역상태 관리 선택 기준

0

82

2

tailwind css는 언제 사용되는가 또 다른 css와의 차이

0

149

2

카카오 web플랫폼 등록

0

136

2

컴포넌트 그리고 폴더 구조에 대해

0

58

2

152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요

0

41

1

폼테그 다른 태그를 하나의 상태 객체로 묶기

0

43

2

class를 className으로 전부 수정하실 때

0

41

2

JWT에 대한 개념도 학습할 수 있나요?

0

63

2

수업자료 다운로드

0

51

2

리액트 객체의 타입을 알기위하여 마우스를 올렸을 때 나오는 형식이 강의와 다른 부분 문의 드립니다.

0

64

2

useState 자동생성 하실때 누른 키보드가 궁금합니다.

0

51

1

타입스크립트 타입이 불일치하는데 에러가 안납니다.

0

74

3

default format >> prettier 이 실행이 안됩니다.

0

65

2

윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?

0

337

3

리렌더링 관련 문의

0

56

2

공부 방향에 대해서

0

62

2

form action 과 onSubmit

0

59

2