소셜 로그인 필기

배코딩·2023년 9월 2일

note

목록 보기

70/114

구글은 프론트단에서 JWT 토큰 받아와서 백엔드에 넘겨주면 거기서 자체 토큰 만들어서 프론트에 던져주고 로그인하면 되는 것 같고...

카카오랑 네이버는 프론트단에서는 인가 코드를 받아와서 백엔드에 넘겨주면 백엔드에서는 프론트에서와 똑같은 리다이렉트 URI로 유효성 검증 받아서 네이버에서 토큰을 받아오고, 그걸로 자체 토큰 만들어서 프론트에 던져줘서 로그인하는 방식으로 자체 토큰 활용 가능한 듯?

출처 : https://velog.io/@yena1025/%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%95%B4%EC%B9%98%EC%9A%B0%EA%B8%B0
1. 브라우저에서 사용자가 카카오 소셜 로그인(노란 버튼)을 누르면 프론트엔드가 카카오에게 redirect URI을 보낸다.

카카오는 주소창 뒤에 쿼리로 붙는 인가코드(code)를 프론트에게 준다. (이건 useRouter 쓰면 꺼내쓸 수 있음)
프론트가 카카오에게서 받은 인가코드(code를 useRouter로 꺼내서 POST 통신으로 보냄)를 백엔드에게 보낸다. (=> 현재 프로젝트에서는 CORS 때문에 이 부분이 막혀 있다)
백엔드는 프론트에게 받은 인가코드(code)를 다시 카카오에게 보낸다(이거 우리가 너희한테 받은 인가코드야..) 이때 프론트에서 카카오쪽에 보냈던 redirect URI도 함께 넘긴다.
카카오는 redirect URI가 프론트와 백엔드가 보내온 것이 서로 일치하는지 확인하고(유효성 검증), 일치하면 토큰을 발급해서 백엔드에게 보낸다.
백엔드는 카카오에서 받은 토큰을 가지고 '유저 정보를 활용해서(아마 카카오에서 준 유저 정보가 담긴 JWT 토큰을 활용한다는 얘기인 듯??)' 우리쪽 서버만의 전용 토큰을 발행한다.
프론트에서는 백엔드가 보낸 토큰을 받아 보관(? 쿠키? 로컬 스토리지?)하고 사용자가 사이트를 이용할 수 있도록 적절한 화면으로 리다이렉트시킨다.

출처 : https://2mojurmoyang.tistory.com/206
그렇다면, 언제 cookie를 쓰고 storage를 쓸까?

자동 로그인 -> 로컬스토리지
입력 폼 정보 -> 세션스토리지
비로그인 장바구니 -> 세션스토리지
다시 보지 않음 팝업 창 -> 쿠키

데브릿지 프로젝트의 경우에는 로컬 스토리지 쓰면 될..려나..?

백엔드 자체 토큰으로 엑세스 토큰과 리프레시 토큰을 받는 모양인데, 이 두 개를 쿠키로 저장해둘지 스토리지에 저장해둘지 고민해보자

PS, 풀스택, 앱 개발, 각종 프로젝트 내용 정리 (https://github.com/minsu-cnu)