카카오 소셜로그인에서 토큰을 생성할때 프론트/백 어디서 하나요?

Question

프론트와 백엔드 포트를 구분해놨습니다.카카오톡 로그인 구현중이구요.인증코드와 토큰을 받는 리다이렉트 URI가 동일해야하더군요. 현재는 프론트에서 인증코드 요청, 백엔드에서 인증코드를 받고 토큰을 요청하여 받는 로직을 구성했습니다.백에서 jwt까지 만든다음 프론트로 보낼 생각인데요.구글링을 하다보면 프론트에서 대부분 만드는 것 같아 질문드립니다.

땅콩파파 · Accepted Answer

움 리액트 클라이언트에서 카카오 api로 사용자정보를 보내고, 카카오 api는 사용자 정보를 토큰화하여 리액트의 리디렉트 url로 전달하잖아요. 이 단계가 불안하신거죠? 이메일 비밀번호로 로그인 하는거를 생각해볼까요? 사용자가 리액트 앱에서 이메일과 비밀번호를 서버로 전송합니다 .그러면 해커가 있다면, 그 중간에서 순수 이메일과 비밀번호를 가로챌 수 있찌 않을까용?? 그거랑 똑같다고 생각해요. 리액트에서는 카카오 api를 통해 사용자 정보를 토큰으로 받아올테고, 결국 이거를 다시 서버로 전달하게 되는데요. 이메일 비밀번호로 로그인 하는 경우에도 사용자 정보를 결국 서버로 전달해야 하니까. 결국 노출도는 비슷하지 않을까 싶습니다.

구직인 · Answer

백

Juzdalua · Answer

답변 감사합니다.리액트(프론트)-노드(백)를 사용중입니다. 프론트에서 인가코드를 요청하고, 리다이렉트 URI를 백으로 받아서 토큰까지 발급받고 유저까지 생성했습니다.백에서 생성한 유저와 jwt를 프론트로 리턴해야하는데 어떻게해야하는지 여기서 막혔네요.. 프론트에서 인가코드와 토큰까지 받고 토큰을 포함해 axios로 서버에 요청하면 손쉽게 return이 가능한데, 토큰을 발급받는 과정이 프론트의 영역이 맞나 싶어 질문을 작성했습니다. axios가 아닌 window.location.href로 카카오 코드를 받았고, 카카오 리다이렉트uri에서 자동으로 백으로 넘어가다보니 백에서 프론트로 정보를 가지고 넘어오는 방법을 모르겠습니다

땅콩파파 · Answer

리액트 클라이언트에서 카카오 로그인 클릭 -> 리액트 클라이언트에서 리디렉트 url로 이동 -> 토큰 정보 서버로 전달 -> 서버에서는 해당 토큰을 활용해 카카오 api에서 사용자 정보 조회 ->카카오에서 제공해준 사용자 정보로 서버 데이터베이스에 사용자 정보 조회 -> 서버 디비에 사용자가 존재하면 그 정보로 토큰 만들어서 클라이언트에 전달 그런 플로우로 그려보시면 될듯해용

Juzdalua · Answer

1005훈님 감사합니다.저도 그 방법이 지금 당장 해결할 수 있는 방법이라고 생각하는데요.jwt를 생성할때도 백엔드에서 하다보니 토큰이라는 단어면 백엔드에서 구현해야하지 않나 의문이 들었습니다.리액트(프론트)에서 카카오토큰까지 받는과정이 보안에 취약하거나 하지 않을까 생각하게되어 질문드립니다.

Juzdalua · Answer

1005훈님 답변 감사드립니다.생각해보니 그렇네요, 아직 주니어라 복잡하기만 합니다 ㅎㅎ그럼 바로 구현하러 가보겠습니다. 행복한 저녁 보내세요~

moonti · Answer

토큰은 백에서 하는것이 좋습니다.sns 로그인을 하면 일단 코드를 받고 이 코드로 토큰을 호출하게 되는데 이때 인증키를 보내게 됩니다.이 인증키를 숨기기 위해 백에서 요청하는 것이 좋습니다.네이버의 경우는 cors이슈 발생하여 클라에서 호출 못하게끔 유도합니다.

Juzdalua · Answer

문티님 감사합니다. 혹시 방법을 여쭤봐도 될까요? -리액트(프론트)에서 카카오 버튼 클릭-리다이렉트 uri를 백으로 설정. 백에서 인가코드 및 토큰 생성. 카카오 계정 수집.-수집된 정보로 유저 생성 및 조회여기까지는 완료했습니다. 여기서 생성한 유저를 프론트로 보내고 싶은데, 어떻게 보내야할지 모르겠습니다...

moonti · Answer

리다이렉트를 프론트로 보내시고리다이렉트 페이지에서는 넘어온 코드로 백에 api를 쏴요.거기서 백이 코드로 토큰을 받아요.이 다음은 방법에 따라 갈리는데 보통백이 토큰으로 유저정보를 api를 조회해요. 거기에 이멜이나 이름 그리고 식별값이 있어요.요 토큰과 유저정보를 프론트에게 주면프론트는 식별값으로 사용자를 서버에 조회하고조회해서 있으면 유저정보랑 쿠키쓸꺼면 쿠키셋팅하고조회해서 없으면 회원가입 플로우 태워서 받은 토큰과 유저정보 가지고 회원가입 요청 합니다.

Juzdalua · Answer

감사합니다.카카오 소셜로그인은 리다이렉트 uri가 한개이고, 여기에서 인가코드와 토큰을 모두 받는 방식이더라구요.그래서 현재는 프론트에서 인가코드와 토큰을 모두 받고 토큰을 백으로 보내서 사용자를 조회했습니다. 문티님 말씀대로면, 인가코드를 프론트에서 받고 인가코드를 백으로 넘겨서 카카오토큰을 호출하라는 건데요.그럼 프론트에서 다시 토큰을 받게되는데, 이 토큰을 다시 백으로 넘기는 과정을 진행해야하는건가요?

moonti · Answer

sns로그인은 프로바이더 마다 구현방식이 미묘하게 달라요.어세스토큰과 이프레시 토큰은 어떻게 사용하냐에 따라도 달라서요.둘다 디비에 저장해서 만료시간봐서 리프레시 토큰으로 토큰을 업뎃할수도 잇구요. 리프레시 토큰을 프론트가 들구잇을수도 잇구요아세스 토큰 안쓰구 jwt로 토큰 만들수도 잇구요. 방법론이 정말 너무나 조금씩 다달라서요.자료 많이 찾아보세여..

C_YH · Answer

소셜 로그인 필요하시면https://mrlogin.io 요 사이트가보세요 도움을 많이 받았습니다. 메뉴얼에 가이드 있는데 그 대로 따라만 하면 금방 되더라고요 개발이 필요 없고, 발급 받은 키값만 가져 오면 됩니다.

카카오 소셜로그인에서 토큰을 생성할때 프론트/백 어디서 하나요?

12개의 답변

#auth 목록