강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

김태우님의 프로필 이미지
김태우

작성한 질문수

카카오,구글 SNS 로그인(springboot3, vue3)

인가코드(프론트에서 발급)

안녕하세요 섹션2. 인가코드(프론트에서 발급) 부분에서 질문 있습니다.

작성

·

42

0

안녕하세요 먼저 좋은 강의 정말 감사드립니다.

섹션2 인가코드(프론트에서 발급) 강의와 강의 자료에서 get 요청을 통해 인가코드 전달을 한다
고 설명하셨는데, 프론트엔드 코드에서는 post로 요청하고 있고, http body로 jwt 토큰을 받으려면 post로 요청해야하는게 맞는 것 같은데, 제가 잘못 이해하고 있는건지 잘못 설명하신건지 헷갈려서 질문글 남깁니다.

 

const response = await axios.post("http://localhost:8080/member/google/doLogin", {code});
image.png


답변 2

1

bradkim님의 프로필 이미지
bradkim
지식공유자

답변이 다소 늦었습니다.

 

여기서 말한 get요청은 http메서드중에 get, post를 지칭하려고 했던것은 아니었고, 프론트엔드에서 서버로부터 token을 달라고 요청한다는 상황자체를 get요청이라고 지칭했던것 같습니다. http의 get요청을 통해 요청을 보내든(사실 get요청을 통해 쿼리파라미터 방식으로 전달이 가능하기도 합니다.), post요청을 통해서 보내든 여기서 의도한것은 token을 받아오기위한 요청이이라는 것을 get요청이라 표현하게 되었네요.

 

이 요청 방식과 서버를 통한 인가코드를 받아 redirect하여 토큰을 받아오는 방식의 차이점을 강조하려다 보니, 토큰을 달라(get)한다 이 표현을 강조하면서 헤깔리게 만들었던것 같습니다. 혼선을 드린점, 양해 부탁드립니다.

 

항상 모든 개념의 정답은 코드입니다~! 꼼꼼하게 확인해주셔서 감사합니다.

김태우님의 프로필 이미지
김태우
질문자

이해 했습니다. 답변 감사드립니다 !

0

안녕하세요, 인프런 AI 인턴입니다. 김태우님.

OAuth2.0 인증 과정에서 인가 코드를 프론트엔드에서 받는 방식과 백엔드에 전달하는 방법에 대한 혼란스러운 부분을 잘 이해하고 계신 것 같습니다. 설명드리겠습니다.

  1. 인가 코드 전달 방법:

    • 인가 코드는 OAuth2.0 인증 과정의 초기 단계에서 클라이언트가 소셜 로그인 제공자(예: Google)로부터 전달받는 임시 코드입니다.
    • 이 코드는 일반적으로 POST 요청을 통해 백엔드 서버에 전달됩니다. POST 요청은 전달된 데이터의 보안을 강화하며, 특히 API 요청 본문에 인증 데이터(예: 인가 코드)를 포함할 때 사용됩니다. 예제에서 보듯이 axios.post 방식으로 서버에 전달되는 것이 일반적인 방법입니다.
  2. GET vs. POST 요청의 차이:

    • GET 요청은 URL에 쿼리 파라미터 형식으로 데이터를 전달하며, 민감한 데이터를 포함하기에는 다소 부적절합니다.
    • POST 요청은 데이터가 본문에 포함되므로 보안 면에서 GET보다 적절합니다.
  3. 프로세스의 흐름:

    • 사용자가 소셜 로그인 버튼을 누르면 프론트엔드에서 소셜 로그인 인증 페이지로 리다이렉트되어 인가 코드를 받습니다.
    • 프론트엔드는 이 인가 코드를 POST 요청을 통해 백엔드 서버에 전송합니다.
    • 이후, 백엔드 서버는 소셜 로그인 제공자에게 인증 토큰을 요청하고 받은 정보를 바탕으로 사용자 정보를 확인하거나 저장하고 JWT 토큰을 생성하여 프론트엔드로 반환합니다.

아래 이미지는 OAuth2.0 인증 과정을 시각적으로 보여주는 다이어그램입니다. 각 단계가 어떻게 연결되는지에 대해 이해를 높이는 데 도움이 될 것입니다:
OAuth2.0 인증 과정

이 과정을 통해 POST 요청을 사용하여 인가 코드를 서버에 전달하는 것은 매우 적절한 방식입니다. 추가적으로 강의 자료나 강의에서 이를 명확히 하려는 의도였을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김태우님의 프로필 이미지
김태우

작성한 질문수

질문하기