카카오 소셜 로그인 구현: 올바른 설계인지 궁금합니다.

Question

선생님들 안녕하세요!!카카오 소셜로그인을 구현하기위해, 관련 자료들을 찾아보며 공부한 뒤, 끙끙 앓으며 다음과 같이 직접 설계해 보았습니다.제 프로젝트에 USER, MANAGER, ADMIN과 같은 세부적인 권한은 없고,그냥 로그인한 사람은 모든 서비스를 이용할 수 있도록 할 계획입니다.제가 생각한 설계와 실제 구현은 다음과 같습니다.혹시 답변 해주시는데 도움이 될까, 카카오 소셜로그인 API 자료도 함께 올리겠습니다.[직접 설계해본 카카오소셜 로그인 흐름]프론트(리액트, 플러터)에서 직접 카카오인증서버에 로그인을 요청합니다. (위 그림과 살짝 다릅니다.)프론트에서 로그인에 성공하면 백엔드(Spring)의 redirect URI로 인가code가 전송됩니다.백엔드는 받은 인가code를 다시 카카오인증서버에 전송하고 Token을 받습니다.백엔드는 받은 Token을 카카오인증서버에 전송하고 로그인한 사용자정보를 받습니다.사용자정보를 바탕으로 (회원가입이 안되어 있다면, 회원가입을 시키고) JWT토큰을 생성, 프론트에 전달합니다.클라이언트는 요청할 때 마다 Header의 Authorization필드에 JWT토큰을 넣어서 요청합니다.백엔드의 Filter에서 클라이언트가 보낸 JWT토큰을 검사합니다.JWT토큰이 유효한 경우: Filter를 통과시키고, Controller로 접근할 수 있도록 합니다.JWT토큰이 유효하지 않은 경우: Filter를 통과시키지 않고, 프론트로 403 Forbidden에러를 날립니다.프론트에서는 Forbidden에러가 뜨면, 다시 소셜로그인 창이 뜨도록 합니다.이렇게 설계해도 문제없이 잘 작동할까요?그리고 현재 로그인한 사용자는 클라이언트에서 보낸 jwt토큰에 담긴 id를 사용해서 인식할 계획입니다소셜로그인 구현해보신 선배님들의 조언을 듣고 싶습니다.

Hee Sung Son · Answer

5번이 가능한지 검토 해보셨나요? 프론트와 서버의 연결점이 없어서 안될거 같습니다

도깨비 요술망치 · Answer

작성자님 flow 2번과 3번 사이에 다음 과정을 추가하면 될 것 같습니다.클라이언트가 카카오 인증 서버에 로그인 창을 요청해 로그인에 성공하면, 리다이렉트를 처리하는 API 에서 인가 코드를 클라이언트에게 응답.이후, 작성자님 flow의 3번부터 클라이언트가 서버로 인가 코드를 포함하여 요청한 회원 가입 또는 로그인을 처리하고, 서버에서 발급한 JWT 토큰을 응답하면 되고요.댓글에서 작성자님이 말씀하신 시큐리티 필터는 Permit 설정을 해주시면 됩니다.

카카오 소셜 로그인 구현: 올바른 설계인지 궁금합니다.

2개의 답변

기술 목록