카카오 로그인 invalid client issue

[cmun2]

Request hostname 과 Redirect hostname 이 동일 해야 합니다.

즉, React 에서 [localhost:3000](http://localhost:3000) 에서 [localhost:3000/token](http://localhost:3000/token) 으로 넘겨 주는 방식으로 구현을 했어야 했습니다.

/ 경로에서 a href=’oauth/authorize’ 를 통해서 로그인 창을 열고 로그인을 실행하면 Redirect URI 로 지정된 /signin 으로 302 Redirect 가 되게 됩니다.

queryString 으로 나온 ?code=토큰값 을 추출해서 다음의 axios 코드를 실행

• code 는 인가 코드로 알 수 없는 문자열을 준다…

위 단계를 진행했을 때 다음과 같은 에러가 발생

[cmun2]

검색 결과는 다음의 client_secret 이 활성화 되어있는데 값을 제출해주지 않은 것 같다고 떴습니다.

출처 : https://devtalk.kakao.com/t/koe010-bad-client-credentials/115388

위 방식으로 요청을 변경했더니 다음과 같은 에러가 발생했습니다.

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

다시 코드를 롤백

다시.. 아래 내용을 참고해서 QueryString 으로 변경

https://winterandsnow.tistory.com/18

[cmun2]

https://traveling-aftershave-eeb.notion.site/5-508f081c9e9049ae84b8bfdd8eede7a6

마지막으로 인가 코드 및 토큰을 받는 step1, 2 부분을 해결하였습니다.
<step 1: 인가 코드 받기>
const Home = () => {
const client_id= "[앱 정보]-[요약 정보]-[RESTful API 앱키]";
const redirect_uri= "http://localhost:3000/signin";
const get_authorization_code = https://kauth.kakao.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code;

return (
	<div>
		<div>제발</div>
		<button>홈버튼</button>
		<a href={get_authorization_code}>하이카카오</a>
	</div>
);

};

<step 2 : 토큰 받기>