codestates / codestates/Almost-There

[Error log] OAuth 2.0: 리다이렉트된 URL에서 변수를 가져오지 않는 문제 / 2022-02-16

Open
#49 0 comments 0 reactions 2 assignees Claimed by @JHL71 View on GitHub
Complete
Dominant language
TypeScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?
- 소셜 로그인 후 리다이렉트된 URL에서 변수(code)를 가져와 토큰 발급 요청(POST) 본문에 넣어야하는데, 그 변수를 가져오지 못함.

### 에러 메시지
서버에서 `req.body.code`가 `null`로 나옴.

### 에러 핸들링 방법
- 로그인 모달 창에서 소셜로그인을 클릭 했을 때 작동하는 handleNaverLogin 함수에서 네이버 로그인 URL로 이동 및 서버에 코드를 보내는 부분까지 동시에 하도록 작성해서 생긴 문제였다. hadleNaverLogin 부분에서는 네이버 로그인 URL로 이동하게 하고, 네이버 로그인 후 홈으로 리다이렉트하기 때문에 홈에서 useEffect를 사용하여 코드를 서버에 보내도록 작성하였다.

```javascript
// loginmodal.tsx 에 작성
const handleNaverLogin = async () => {
const naverLoginURL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${
process.env.REACT_APP_NAVER_CLIENT_ID
}&state=${
Math.floor((Math.random() * (99999 - 10000)) + 10000)
}&redirect_uri=${
process.env.REACT_APP_REDIRECT_URI
}`;
localStorage.setItem('social', 'naver');
window.location.assign(naverLoginURL);
};

// home.tsx 에 작성
useEffect( () => {
const sendNaver = async () => {
try {
const result = await axios.post(`${url}/social/naver`, {
code: code,
state: userState
}, {
withCredentials: true
});
} catch (err) {
console.log(err);
}
}
}
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크

[카카오 로그인 구현하기](https://dev-seolleung2.netlify.app/Final%20Project/FinalProject-KakaoLogin/)
[REST-API 활용한 카카오 소셜 로그인 구현(feat. React)](https://data-jj.tistory.com/53)

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.