TIL[20240729] - 팀프로젝트 12일차

프론트 연결을 어느 정도 끝내고 소셜 로그인 이야기가 나와서 진행해보려했습니다.
찾아보고 있는데 정리가 좀 필요할 것같아서 TIL을 쓰게 되었습니다.

Kakao Login

카카오 문서

카카오 문서를 보면 방법들이 나와있지만 코드로 적용해보기엔 막막했습니다.
앱키에 있는 것들이 URL로 노출이 되는데 이게 공개되어도 되는건가 싶기도 했습니다.

그래서 해당 키들을 숨기고 튜터님에게 여쭤보니 해당 키는 Client ID, Secret 키가 따로 존재하는데 숨겨야될 키는 Secret key라고 했습니다.

찾아보니 제품설정/카카오 로그인/보안에 Secret Key를 활성화하는 부분이 있었습니다.

이제 클라이언트에 로그인 버튼을 연결합니다.
로그인 버튼 디자인 가이드도 있어서 해당 부분도 참고했습니다.

버튼은 리액트 프로젝트 안 assets 폴더에 넣습니다.

import kakaoLoginButton from '../assets/kakao_login_medium_wide.png';
// 코드 생략

const handleKakaoLogin = () => {
        const KAKAO_CLIENT_ID = process.env.REACT_APP_KAKAO_CLIENT_ID;
        const REDIRECT_URI = process.env.REACT_APP_KAKAO_REDIRECT_URI;
        const KAKAO_AUTH_URL = 'https://kauth.kakao.com/oauth/authorize?client_id=' +
            `${KAKAO_CLIENT_ID}` +
            '&redirect_uri=' +
            `${REDIRECT_URI}` +
            '&response_type=code&' +
            'scope=account_email profile_nickname';

        window.location.href = KAKAO_AUTH_URL;
    }

숨길 필요는 없지만 일단은 .env에 기록해뒀습니다.

버튼을 누르면 해당 페이지로 이동해야되며 scope로 요청한 이메일, 프로필 이름만 제공받습니다.

동의가 완료되면 Rediret URI를 설정해뒀던 곳으로 callback?code={code} 리다이렉트가 진행됩니다.

리다이렉트를 해놓으니 다시 메인 화면으로 보내줘야되는데 그 부분을 어떻게 처리해야될지 모르던 차에 AI에게서 해답을 얻어냈습니다.

useEffect(() => {

        const sendCodeToBackend = async (code) => {
            try {
                const response = await axios.post('http://localhost:8080/api/oauth/kakao', { code });
                
                if (response.data.success) {
                    // 백엔드에서 로그인 처리가 성공했다면
                    localStorage.setItem('token', response.data.token); // 예: JWT 토큰 저장
                    navigate('/'); // 메인 페이지로 리다이렉트
                } else {
                    // 로그인 실패 처리
                    navigate('/login', { state: { error: '카카오 로그인에 실패했습니다.' } });
                }
            } catch (error) {
                console.error('카카오 로그인 에러:', error);
                navigate('/login', { state: { error: '카카오 로그인 중 오류가 발생했습니다.' } });
            }
        };

        const code = new URL(window.location.href).searchParams.get("code");
        if (code) {
            sendCodeToBackend(code);
        }
    });

리다이렉트 페이지를 등록해뒀다가 리다이렉트 페이지로 오면 코드를 추출해내서 서버로 보내고 서버는 이 코드로 로그인 처리를 진행하면 되는 것입니다. 이제야 두번째 단계까지 오게되었습니다.