codestates / codestates/Touch

[Error handling] 카카오 소셜로그인 관련 토큰 발급 위한 요청 시 401 에러코드

Open
#44 0 comments 0 reactions 0 assignees View on GitHub
Complete error
Dominant language
JavaScript
Stars
0
Forks
1
PR merge metrics
No merged PRs in 30d

Description

>### 어떤 에러인가요?
> * 카카오 소셜 로그인 기능 구현 시 클라이언트에서 받아온 authorization_code 를 서버로 전달 한 후, 서버에서 토큰 발급을 위한 요청을 보낼 시 401 에러코드가 확인되었습니다.
>
> ### 에러 핸들링 방법
> 토큰 발급을 위한 요청을 보낼 시 카카오에서 필요로 하는 데이터들을 요청에 같이 담아 보내주게 되는데, 이때 이 데이터들의 데이터타입이 인코딩이 필요했었습니다. 클라이언트에서 받아온 authorization_code 는 특수문자를 포함하고 있었는데 그냥 일반적인 방법으로는 이 authorization_code 를 요청에 담아 보내줄 때 오류가 나는것으로 확인되어서 요청을 보낼 때 데이터들의 데이터타입을 인코딩해서 잘 보내줄 수 있도록 했더니 해결되었습니다. 토큰도 정상적으로 잘 받아왔습니다.
>
> const formUrlEncoded = x =>
> Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, '')
>
> axios
> .post(
> 'https://kauth.kakao.com/oauth/token',
> formUrlEncoded({
> grant_type: 'authorization_code',
> client_id: clientID,
> redirect_uri: 'http://localhost:3000',
> code: authCode
> }),
> {
> headers: {
> 'Content-Type': 'application/x-www-form-urlencoded'
> }
> }
> )
> .then((response) => {
> // console.log(response.data)
> res.json({ accessToken: response.data.access_token })
> })
> .catch((err) => {
> console.log(err)
> })
>
> 위 코드에서, 포스트 요청을 보내는 주소 이후에 카카오에서 필요로 하는 데이터들을 넘겨주는데, 이때 바로 넘겨주는게 아니고 데이터타입을 인코딩해서 요청을 보내줘야 정상적으로 잘 요청을 보낼 수 있습니다.
>
> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> [링크1](https://devtalk.kakao.com/t/koe010-bad-client-credentials/117612/2)
> [링크2](https://kakao-tam.tistory.com/66?category=866966)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.