https://devtalk.kakao.com/t/restapi/134889
해당 글에 이어서 질문드립니다! 프론트와 백 서버가 분리되어 있을 때 저는 프론트엔드에서 인가코드를 요청하고 받아와서 해당 인가코드를 백엔드로 전달해주고 백엔드에서 토큰을 받아와 프론트에 전달하는 방식으로 이해했는데 리다이렉트uri를 백엔드로 설정하라고 알려주셨는데요 혹시 이유를 알 수 있을까요? 저는 프론트엔드쪽을 설정해야한다고 생각했었는데 제가 잘못 생각하고 있는 것 같습니다. 새해 복 많이 받으세요!
프론트와 백 서버가 분리되어 있을 때 저는 프론트엔드에서 인가코드를 요청하고 받아와서 해당 인가코드를 백엔드로 전달해주고 백엔드에서 토큰을 받아와 프론트에 전달하는 방식으로 이해했는데
(1) 프론트에서 인가코드 요청(카카오 로그인) 하고
(2) 리다이렉트 URI를 백엔드로 설정해서 전달된 인가코드로 액세스 토큰 발급 받아 회원가입또는 로그인 처리
를 안내드렸는데요.
프론트에 액세스 토큰을 전달하는 이유를 알 수 있을까요?
카카오에서 설정하는 리다이렉트 URI는 인가코드를 받기위한 URI가 아닌가요?
맞습니다.
엇 그러면 해당 부분은 프론트엔드 쪽에서 접근할 수있는 uri를 등록하는게 맞을까요? 이쪽 부분을 백엔드 URI로 설정하는거일까요?
프론트가 로그인 요청 → 인가코드발급 후 리다이렉트 되면 인가 코드 백엔드에 전달 → 백엔드가 해당 인가코드로 엑세스토튼 발급 후 필요한 사용자 정보를 가지고 처리 후 제가 만든 서비스에서 사용할 엑세스 토큰을 새로 발급 후 프론트 쪽에 전달
현재 이방식을 생각했는데 혹시 잘못된 점이 있으면 알려주실 수 있을까요?
프론트에 카카오 로그인 인가코드 요청URL 링크 또는 버튼이나 JS SDK authorize 함수로
(1) kauth.kakao.com/oauth/authorize 인가코드 요청 주소로 이동합니다.
(2) 카카오 디벨로퍼스에 설정한 리다이렉트 URI를 백엔드 주소로 설정하셔서
카카오에서 (1)번처리 후, 인가코드를 백엔드로 전달합니다.
즉, 프론트가 받아서 백엔드로 전달하는게 아니라 카카오가 전달해드립니다.
(3) 이후는 기재하신 내용과 동일합니다.
다만, 액세스 토큰을 발급 받으셨으면 백인드에서 회원가입 처리및 로그인까지 하고
자체 발급한 JWT토큰으로 프론트 리다이렉트하여 카카오 액세스토큰을 백엔드에서만 격리해서 사용하시면 매우 안전하게 사용할 수 있습니다.
(물론 액세스 토큰을 프론트로 전달 못하는 것은 아니고 운영하시는 서비스 특성에 따라 보안 설정 하셔서 전달하셔도 됩니다.)
항상 빠르고 친절한 답변 감사합니다!! 새해 복 많이 받으세요