codestates / codestates/Almost-There
[Error log] OAuth 2.0: 리다이렉트된 URL에서 변수를 가져오지 않는 문제 / 2022-02-16
- 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.