카카오 로그인 API 구현하기 : Login failed 정의되지 않은 profile을 읽을 수 없습니다 + scope

그동안 REST API키를 이용해서 많은 우여곡절 끝에

 

1. 카카오 oauth를 통해 인가코드 요청하기
2. 받은 인가코드(인증코드)를 Redirect 하기
3. 인증코드로 액세스 토큰 요청하기 < 이때 중요한 client_secret 꼭 잘 넣어주기
4. 액세스 토큰으로 사용자 정보 요청하기 

 

해서 성공을 하였다!

 

 

브라우저 성공 문구

{"message":"Login successful","user":{"id":3849115066,"connected_at":"2024-12-24T14:25:33Z"}

 

그래서 user의 카카오 고유 id와 connect된 시점의 정보를 받았다!

 

 

 

다음 목표는

• 받은 카카오 고유 id와 연결 시점 시간 정보를 나의 mysql users 테이블에 저장
• 로그인의 경우: home으로 이동
• 신규간편가입의 경우: 내 취향을 선택하는 사용자 정보 수집 페이지로 이동

이 순서로 진행 중이다!

이 과정을 겪으며 내가 글을 꼭 써야겠다고 다짐한 부분이 있었는데 바로 에러와 에러를 해결하기 위한 방법 때문이다.

 

 

---

 

 

에러

{"message":"Login failed","error":"Cannot read properties of undefined (reading 'profile')"}

{"메시지": "로그인 실패", "오류": "정의되지 않은 속성을 읽을 수 없습니다 ('프로필' 읽기)"}

 

다시 에러와 마주했다.

profile이라는 속성이 지금 정의되지 않음을 이야기한다. 

userInfo.kakao_account.profile 에 접근하려고 했는데, userInfo.kakao_account가 존재하지 않거나 profile 속성이 없어서 그런 것이다.

왜냐! 아까 보았던 브라우저 성공 문구에서는 profile 속성이 없었기 때문이다.

 

 

 

해결

profile 데이터는 kakao_account.profile에 포함이 되어있는데, 이걸 같이 얻으려면 kakao developers에서 프로필 정보를 내가 직접 설정해주어야 한다.

 

(24.12.26) 내 애플리케이션 > 앱 설정 > 대시보드 > 설정 > 동의항목 > 설정하기

이렇게 가면 동의항목 페이지로 이동하는데 여기서 아래와 같이 뜬다.

 

 

닉네임과 프로필 사진 데이터를 동의받는 항목을 설정할 수 있는 페이지이다.

여기서 필요한 항목을 필수 동의로 바꾸어준다. 필수동의 외에도 [ 선택동의  /  이용 중 동의  /  사용 안 함 ] 이 있다.

나는 프로필 사진은 필수는 아니라고 생각이 들어 닉네임은 필수동의, 프로필 사진은 선택 동의 혹은 이용 중 동의를 선택할 생각이다.

 

 

요렇게 말이다!

 

 

 

 

 

실제 실행 화면

 

 

필수 항목에 동의를 눌러야 다음 화면으로 넘어갈 수 있다.

 

만약에 여기까지 왔는데 동의하고 계속하기 누르고 에러가 났다면, 아마 자신의 DB table(나는 users)와 같은 필드에 지정된 타입이 NOT NULL이 있어서 오류가 날 수도 있다. sqlMessage: "Field 'baking_level' doesn't have a default value",  이렇게 말이다.

이럴 때에는

• 정말 NOT NULL이 필요한지 NULL로도 설정해도 괜찮은지, 아니면
• INSERT INTO users (users_kakao_id, users_name) VALUES (?, ?) 여기에 해당 필드명 값도 넣고 명시적으로 기본 값을 기입하는 둥

필드 타입이나 기본 값 등을 수정해주는 식으로 해결할 수 있다. 나같은 경우는 baking_level 필드의 NOT NULL이 에러의 원인이었는데, 신규 가입 후에 이동되는 사용자 정보 수집 페이지 RESEARCH.js에서 자신이 생각하는 베이킹 레벨을 선택할 수 있는 리서치 창을 만들 계획이라 not null 타입으로 정했는데 이게 이렇게 에러로 돌아올 줄은 몰랐다.

 

그래서 not null은 유지하되 default 값을 0으로 정해주었다. research 창에서 레벨을 선택할 기회를 줄 예정이기도 하고 베이킹 레벨이 0이라고 해서 끼치는 영향은 없기 때문에 기본 값을 주는 것으로 해결을 하였다.

(그래도 베이킹 레벨을 넣은 이유는 내가 보게 되는 레시피와 내가 실행 가능한 베이킹 레시피인지 확인하거나, 직관적으로 느낄 수 있는 부분이라고 생각해서 아예 의미가 없는 데이터는 아니다. 그리고 베이킹 레벨 수치를 통해서 베이킹을 열심히 해야겠다는 동기부여도 줄 수 있다고 생각하는 장치이다.)

 

 

---

 

scope:

• 카카오 로그인을 예시들면, 카카오 로그인에서 어떤 사용자 정보를 요청할지 정의하는 권한을 지정하는 역할
• 사용자로부터 어떤 권한을 요청할지 설정하는 파라미터 (OAuth 2.0 프로토콜 기준)
• 스코프를 적는다 = 카카오 로그인 시 필수 동의 항목을 설정해야 함

 

사용 예시

const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&scope=profile_nickname`;

 

scope=profile_nickname: 카카오 로그인 인증 후, 사용자의 닉네임 정보를 제공해달라는 요청을 카카오 서버에 전달하는 것

✅ 이때 닉네임 자체를 서버에 보내달라는 것이 아니라, 닉네임을 읽을 권한을 요청하는 것!

 

 

사용 시 주의사항

 

• 권한 등록 필수: 원하는 스코프 항목을, 카카오 developers에서 동의 항목을 활성화 해야 함 (KOE205 에러의 원인)
  • 동의 항목 활성화 설정 시: 필수 ⭕, 선택적 동의 ⭕
  • 동의 거부 시: 해당 스코프 항목의 정보는 받아올 수 없음

 

 

스코프 항목들

• profile: 기본적인 프로필 정보를 요청
• profile_nickname: 사용자의 닉네임을 요청
• account_email: 사용자의 이메일을 요청

 

 

 

 

---

 

 

추가내용  KOE205

잘못된 요청 (KOE205)
OOO 서비스 설정에 오류가 있어, 이용할 수 없습니다.
서비스 관리자의 확인이 필요합니다.

서비스 관리자라면 아래를 확인해보세요.

> 왜 에러가 발생하나요?
설정하지 않은 카카오 로그인 동의 항목을 포함해 인가 코드를 요청했습니다.
설정하지 않은 동의 항목: profile

> 어떻게 해결할 수 있나요?
[내 애플리케이션] > [카카오 로그인] > [동의항목]에서 동의 항목 설정을 변경하거나, 설정하지 않은 동의 항목을 제외하고 재요청합니다.

참고: 동의 항목 설정, 인가 코드 관련 에러

만약 위와 같은 에러가 뜬다면 카카오 로그인 요청시 작성한 scope를 확인해주면 좋다.

나같은 경우에는 몇 번 로그인이 잘 되는지 시도해보고 처음에는 잘 넘어갔던 카카오 로그인이 갑자기 KOE205 에러와 마주했다.

아까 필수동의와 선택동의를 하기 전에는 스코프가 아래와 같았다.

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

 

처음 작동이 잘 되었던 건

- 한 번 동의했던 사용자에 대해 동의 정보를 캐시로 저장했기 때문이다.

 

그렇기 때문에 npm start로 서버와 프론트 모두 재시작을 하고 다시 로그인을 시도했을 때에는 KOE205 에러가 떴던 것이다.

 

 

 

해결

스코프 부분에 필수 동의 항목을 구체적으로 명시해준다.

const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&scope=profile_nickname`;

나는 닉네임만 필수 동의를 했으니 닉네임 관련 스코프만 기재하였다.

이렇게 해결하면 된다!😄

 

 

 

---

 

성공!

 

신규가입: research 로그인: /

 

 

해낼 수 있을까 싶었는데, 해내어서 기쁘다!

카카오 로직이 처음에는 무슨 말인지 잘 모르겠어서 어렵게 느껴졌는데 단어와 의미들, 로직의 구조를 천천히 뜯어보고 웹 사이트들을 탐색하며 얻게된 정보들을 통해 성공할 수 있었다고 생각한다.

 

 

 

 

 

 

참고하기 좋은 사이트

• kakao developers. 카카오 로그인 설정하기. https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite
• 숩숩. (2023). React 카카오 로그인 개발 #1 - 카카오 개발자 센터 세팅. https://velog.io/@s00been/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B0%9C%EB%B0%9C-1-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%84%BC%ED%84%B0-%EC%84%B8%ED%8C%85
• kakao developers. 카카오 로그인 문제 해결. https://developers.kakao.com/docs/latest/ko/kakaologin/trouble-shooting