You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
서버에 특별한 소셜로그인 로직이 없고, 프론트에서 인증 인가를 모두 처리합니다. (마이펫로그)
토큰은 어디에 저장하죠? 왜 그렇게 했나요?
로그인 시 서버에서 토큰을 response로 보내주면 프론트에서 쿠키에 저장
마이펫로그는 토큰의 존재 여부에 따라 middleware로 접근 권한을 확인하기에 토큰을 쿠키에 저장하면 cookies.get(), cookies.set()으로 접근 가능
쿠키에 토큰을 저장하면 HTTP 요청 시에 자동으로 쿠키가 서버로 전송 → 편리
✏ 서술 답변
앗 가독성 너무 구리다...! 수정중,,,,,
1. 소셜로그인 구현 방식 (oauth 직접구현)
Oauth로 직접 구현했습니다. 라이브러리를 사용하지 않은 이유 (마이펫로그) :
Next-Auth는 Provider를 사용해서 여러 소셜로그인을 간편하게 구현할 수 있는 편리한 라이브러리이지만, Next-Auth에서 제공하는 가이드를 준수해야 합니다.
처음 기능구현을 할 때에 일반 로그인만을 염두에 두고, 소셜로그인을 후순위로 구현하였기에 Next-Auth에서 요구하는 파일 컨벤션과 맞지 않아 불필요한 파일을 중복 생성하는 등의 문제가 발생했고, 에러가 발생한 경우 어디에서 에러가 난 것인지 알 수 없어 TroubleShooting이 어려웠습니다. 이에 유지보수가 어렵다고 판단이 되어 Oauth를 사용해서 직접 구현하는 방식을 채택했습니다.
2. 카카오 로그인 REST API방식과 SDK방식 중 REST API방식을 채택한 이유?
마이펫로그 서버 마이펫로그 클라이언트에서 카카오/구글 인증 서버로 인가 코드 받기를 요청합니다.
//카카오에서 제공하는 예시코드
https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}//구글에서 제공하는 예시코드
https://accounts.google.com/o/oauth2/v2/auth?client_id=client_id&redirect_uri=${REDIRECT_URI}scope=scope&response_type=code//혹은 token
//코드와 함께 돌아온 모습,,,
https://mypetlog.site/oauth/callback/kakao?code=**2busLd1TBTjs22M-Y45loGTU74NNWVT7Mx7bP_eSzfKGV0YYSQ19IAAAAAQKPXLrAAABj3qbKZ3dCc_9be4aqQ**
//Oauth함수의 나머지 코드constres=(awaitpostSocial({ email, loginType }));console.log("res:",res);if(res===200){router.push("/home");}}catch(error: any){console.error(error);router.push("/login");}},[]);useEffect(()=>{handleOAuth();},[]);return<Spinner/>;}
💖 다시 살펴보는 전체 코드
//app/(auth)/login/page.tsxconstPage=()=>{return(<><divclassName={styles.container}><divclassName={styles.imgWrapper}><Imagesrc={Logo}alt="로고"width={171}height={171}/></div><pclassName={styles.p}>
회원이 아니신가요?
<LinkclassName={styles.link}href="/signup">
회원가입 하기
</Link></p><divclassName={styles.buttonWrapper}><KakaoButton/></div><divclassName={styles.buttonWrapper}><GoogleButton/></div><divclassName={styles.lineWrapper}><Linealt="로고"width={300}height={1}/></div><LinkclassName={styles.emailWrapper}href="/login/email"><SignButtontype="email"action="시작하기"/></Link></div></>);};exportdefaultPage;
'use client';import{useSearchParams,useRouter}from'next/navigation';import{useEffect}from'react';import{AxiosError}from'axios';importaxiosInstancefrom'@/lib/axios/axiosInstance';import{useUser}from'@/store/useUser';import{UserOnLoginType}from'@/lib/types/user';import{setCookie}from'@/lib/utils/cookie';importLoadingfrom'@/components/loading/Loading';exportdefaultfunctionKakaoRedirectPage(){constrouter=useRouter();const{ updateUser }=useUser();constsearchParams=useSearchParams();constcode=searchParams ? searchParams.get('code') : null;useEffect(()=>{constcontroller=newAbortController();if(!code){router.back();return;}// 브라우저 기본 동작으로 리다이렉트 페이지에 접근하지 못하도록 설정history.replaceState(null,'','/');constloginKakao=async()=>{try{//서버에서 지정한 redirect uri constres=awaitaxiosInstance.get<UserOnLoginType>(`/auth/redirect/kakao?code=${code}`,{signal: controller.signal,});const{ id, accessToken, refreshToken }=res.data;updateUser({ id,accessToken: ''});// TODO id만 저장하기setCookie('accessToken',accessToken,'AT');setCookie('refreshToken',refreshToken,'RT');if(res.data.isFirst){router.push('/start-listy');}else{router.push('/');}}catch(error){if(errorinstanceofAxiosError){if(error.response?.status===400){// 탈퇴한 사용자(status 400)일 경우, 리다이렉트router.push('/withdrawn-account');}elseif(!controller.signal.aborted){console.error(error.message);}else{console.log('Request canceled:',error.message);}}}};loginKakao();return()=>{controller.abort();// 마운트 해제 및 axios 요청 취소};},[code]);return(<divstyle={{display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',height: '100vh',}}><Loading/></div>);}
토큰
토큰은 어디에 저장하죠?
로그인 시 서버에서 토큰을 response로 보내주면 프론트에서 쿠키에 저장합니다.
왜 그렇게 했나요?
마이펫로그 프로젝트에서는 토큰의 존재 여부에 따라 middleware로 접근 권한을 확인합니다. 이 때 middleware는 서버에서 실행이 되는데, 토큰을 쿠키에 저장하면 cookies.get(), cookies.set()을 통해 ServerSide에서 토큰을 불러올 수 있습니다. 이와 비교해서 로컬스토리지에 저장을 하게 되면 클라이언트 컴포넌트에서만 접근이 가능합니다.
또한 쿠키에 토큰을 저장하면 HTTP 요청 시에 자동으로 쿠키가 서버로 전송되므로, 매번 토큰을 수동으로 HTTP 헤더에 포함시키지 않아도 됩니다.
The text was updated successfully, but these errors were encountered:
📎 질문
소셜 로그인은 어떤 방식으로 구현했나요?
토큰은 어디에 저장하죠? 왜 그렇게 했나요?
✏ 구술 답변 키워드
소셜 로그인은 어떤 방식으로 구현했나요?
토큰은 어디에 저장하죠? 왜 그렇게 했나요?
✏ 서술 답변
앗 가독성 너무 구리다...! 수정중,,,,,
1. 소셜로그인 구현 방식 (oauth 직접구현)
Oauth로 직접 구현했습니다.
라이브러리를 사용하지 않은 이유
(마이펫로그) :Next-Auth는 Provider를 사용해서 여러 소셜로그인을 간편하게 구현할 수 있는 편리한 라이브러리이지만, Next-Auth에서 제공하는 가이드를 준수해야 합니다.
처음 기능구현을 할 때에 일반 로그인만을 염두에 두고, 소셜로그인을 후순위로 구현하였기에 Next-Auth에서 요구하는 파일 컨벤션과 맞지 않아 불필요한 파일을 중복 생성하는 등의 문제가 발생했고, 에러가 발생한 경우 어디에서 에러가 난 것인지 알 수 없어 TroubleShooting이 어려웠습니다. 이에 유지보수가 어렵다고 판단이 되어 Oauth를 사용해서 직접 구현하는 방식을 채택했습니다.
2. 카카오 로그인 REST API방식과 SDK방식 중 REST API방식을 채택한 이유?
🤔 oauth 로그인이 뭐지?
Oauth를 사용한 방식(마이펫로그)
✨ 1. 구글/카카오에서 인가 코드 받기
마이펫로그 서버마이펫로그 클라이언트에서 카카오/구글 인증 서버로 인가 코드 받기를 요청합니다.마이펫로그 서버마이펫로그 클라이언트의 Redirect URI로 인가 코드를 전달합니다.✨ 2. 토큰 받기
마이펫로그 서버****마이펫로그 클라이언트가 Redirect URI로 전달받은 인가 코드로 구글·카카오 전용 토큰 받기를 요청합니다.마이펫로그 서버마이펫로그 클라이언트에 전달합니다.카카오
: https://kauth.kakao.com/oauth/token구글
: https://oauth2.googleapis.com/token⇒ 토큰을 잘받았다! 토큰을 보내서 사용자 정보를 가져오장
✨ 3. 사용자 정보 가져오기
토큰을 보낼 주소:
카카오
: https://kapi.kakao.com/v2/user/me구글
: https://oauth2.googleapis.com/token헤더에 담을 내용
✨ 4. 마이펫로그 서버에 로그인 요청
💖 다시 살펴보는 전체 코드
Oauth를 사용한 방식 (리스티웨이브)
토큰
토큰은 어디에 저장하죠?
로그인 시 서버에서 토큰을 response로 보내주면 프론트에서 쿠키에 저장합니다.
왜 그렇게 했나요?
마이펫로그 프로젝트에서는
토큰의 존재 여부
에 따라 middleware로 접근 권한을 확인합니다. 이 때 middleware는 서버에서 실행이 되는데, 토큰을 쿠키에 저장하면cookies.get()
,cookies.set()
을 통해 ServerSide에서 토큰을 불러올 수 있습니다. 이와 비교해서로컬스토리지
에 저장을 하게 되면클라이언트 컴포넌트
에서만 접근이 가능합니다.또한 쿠키에 토큰을 저장하면 HTTP 요청 시에
자동
으로 쿠키가 서버로 전송되므로, 매번 토큰을 수동으로 HTTP 헤더에 포함시키지 않아도 됩니다.The text was updated successfully, but these errors were encountered: