[프론트]카카오 소셜로그인 구현

📱 카카오 로그인

1. JavaScript SDK
2. REST API

방법은 총 2가지인데 REST API를 활용하여 구현해볼 것이다!

📝 카카오 로그인 과정

1. 애플리케이션 등록
2. 카카오에 인가코드 발급 요청
3. 백엔드에게 인가코드를 보냄
4. 백엔드로 부터 받은 데이터들 처리

💡애플리케이션 등록

카카오 로그인하기에 앞서서 애플리케이션을 등록해야한다
애플리케이션을 등록하면 앱키(REST API KEY)를 발급받을 수 있다

그 후 Redirect URI를 등록해주어야하는데 카카오 로그인 후 Redirect URI 주소에서 인가코드를 발급받아야하기에 내 서비스에서 접근 가능한 도메인을 설정해주어야한다. 일단 localhost:3000/oauth 으로 설정해주었다.
인가코드로 요청을 보내면 토큰을 받을 수 있다

💡인가코드 발급

로그인 버튼을 누르면 해당 url로 이동할 수 있게 loginHandler함수를 정의해준다

-Home.js

export default function Home(){
    let KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`;
    const loginHandler = () => {
        window.location.href = KAKAO_AUTH_URL;
    }
    return(
      <LoginIcon onClick={loginHandler}/>
    );
}

카카오 동의하고 계속하기 누르면 redirect_url로 리다이렉트가 된다

localhost:3000/oauth?code=인가코드

인가코드를 저장해서 백엔드에게 보내줘야한다

💡벡엔드에게 인가코드 보내기

새롭게 Oauth로 컴포넌트를 만들어주었다.

-App.js

function App() {
	return (
		<BrowserRouter>
			<div className="App">
				<Header />
				<Routes>
					<Route path="/" element={<Home />} />
					<Route path="/oauth" element={<Oauth />} />
				</Routes>
			</div>
		</BrowserRouter>
	);
}

export default App;

해당 이동한 컴포넌트에서 인가코드를 추출해온 후 useEffect를 활용해 백엔드에게 axios get으로 인가코드를 보내준다
그런 후 응답으로 온 토큰은 localstorage에 저장해준 후 해당 페이지로 이동해준다

-Oauth.js

export default function Oauth() {
    const dispath = useDispatch();
    let code = new URL(window.location.href).searchParams.get("code");
    
    const history = useNavigate();
    useEffect(() => {
        try {
            axios.get(`/api/oauth?code=${code}`)
            .then((res) => {
                console.log(res);
                const token = res.headers.authorization;
                window.localStorage.setItem('token', token);
                history('/intropage')
            })
        } catch (e) {
            console.log(e);
            history('/');
        }
    }, [] );
    
    return (
        <div>
            <h5>잠시만 로그인 중입니다.</h5>
        </div>
    );
}

응답으로 온 사용자의 카카오톡 정보들을 리덕스로 데이터를 관리해준다

dispath(
	login({
		username: res.data.kakaoNickname,
		userEmail: res.data.kakaoEmail,
		profile: res.data.kakaoProfileImg,
		userId: res.data.kakaoId,
	}) //user정보 redux로 저장