• 카카오 로그인 RESTful API 방식 (OAuth 1.0)

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 - 토큰 받기

const Signin = () => {
	let code = new URL(window.location.href).searchParams.get("code");

	const kakao = async () => {
	try {

		const data = {
			grant_type: "authorization_code",
			client_id: "[앱 정보]-[요약 정보]-[RESTful API 앱키]",
			redirect_uri: "<http://localhost:3000/signin>",
			code: code,
		};

    // 포인트 1, body 를 queryString 방식으로 파싱해야함
		const queryString = Object.keys(data)
			.map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(data[k]))
			.join("&");
		
    // https 로 보내야함
		const response = await axios.post(
			"<https://kauth.kakao.com/oauth/token>",
			queryString,
			{
				headers: {
					"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
				},
			}
		);

			console.log(response);

		} catch (err) {

			console.log(err);

		}
	};
	kakao();

	return (
		<div>
			<button>로그인</button>
		</div>
	);
};