네이버 소셜 로그인 구현 중 로그인까지는 완료하는데 쿠키가 없습니다.

Question

안녕하세요. 네이버 소셜로그인을 구현하는데 어려움이 있어 혹시 아시는 분께서는 도움을 주신다면 정말 감사드립니다...현재 환경은 다음과 같습니다.프론트(Next.js + ts)와 백엔드(Spring)는 별도의 서버와 도메인을 사용중입니다.네이버 로그인 완료 시 토큰을 직접 전달받는 곳은 백엔드입니다.네이버 로그인 버튼을 클릭하면 백엔드서버주소/oauth2/authorization/naver로 이동하여, 로그인을 완료하면 302 Found 요청이 백엔드 서버로 향하고, 해당 요청에 대한 응답으로 set-cookie되어 헤더가 넘어옵니다. 그 다음 프론트의 메인 페이지로 이동합니다.그런데 프론트의 쿠키 스토리지에 쿠키가 담겨있지 않습니다.아래는 set-Cookie되어 넘어온 패킷의 응답헤더입니다.보면 Authoriaztion 쿠키의 Domain란이 백엔드 서버 주소로 설정되어있는데, 그래서인지 브라우저로 백엔드 서버 주소로 접속했을 때는 쿠키가 스토리지에서 보입니다.이와 같이 프론트와 백엔드의&#x8;도메인을 달리 설정해야한다면 어떻게 처리를 해줘야 할까요..?

HJOW · Answer

기본적으로, 도메인이 다른 서로간에 쿠키는 공유되지 않는 것이 보통입니다.네이버 액세스는 백엔드에서 다 처리하고, 토큰도 백엔드에서 받아온다는 걸로 보이는데요그러면 굳이 쿠키로 토큰을 전달하는 이유가 있나요? 아니면 예제가 그렇기에 그저 따라서 할 수밖에 없는 건가요?쿠키가 아닌 응답 본문에다 담아서 프론트로 보내면 될 일 같은데...상상을 해보자면사용자가 네이버 로그인 버튼을 클릭ajax나 fetch가 아닌, 페이지 자체를 호출하는 URL을 탐. 얘도 어쨌든 백엔드를 거침백엔드 코드에서 네이버 API 갔다가 토큰 가져옴이제 사용자에게 포워드시킬 페이지를 리턴하면서 토큰도 같이 담아 보내야 함.그래서 쿠키에다 담아줬는데, 정작 페이지(프론트) 에서 쿠키 액세스가 안됨.이런 케이스인거 같은데그럼 화면 내 숨겨진 공간에다가 토큰을 박아버린 후, 스크립트로 꺼내서 쓰는 방법도 있습니다.이런 꼼수 안쓰더라도우선 구글에 자료가 많습니다.https://www.google.com/search?q=%EC%84%9C%EB%A1%9C+%EB%8B%A4%EB%A5%B8+%EB%8F%84%EB%A9%94%EC%9D%B8+%EC%BF%A0%ED%82%A4&sca_esv=5900f61f441ceb12&source=hp&ei=Ohh-Z_GLF97j2roPoPuGqQs&iflsig=AL9hbdgAAAAAZ34mSgct_qKfDAoCKJ_NuK17G0KKxR0i&ved=0ahUKEwjxkMPpvOWKAxXesVYBHaC9IbUQ4dUDCBA&uact=5&oq=%EC%84%9C%EB%A1%9C+%EB%8B%A4%EB%A5%B8+%EB%8F%84%EB%A9%94%EC%9D%B8+%EC%BF%A0%ED%82%A4&gs_lp=Egdnd3Mtd2l6Ih7shJzroZwg64uk66W4IOuPhOuplOyduCDsv6DtgqQyBBAAGB5I_xBQAFigD3AFeACQAQWYAa4BoAG6GaoBBDAuMjO4AQPIAQD4AQGYAgygAt8IwgIEEAAYA8ICCxAuGIAEGLEDGIMBwgILEAAYgAQYsQMYgwHCAgUQABiABMICCBAAGIAEGLEDwgIFEC4YgATCAgYQABgNGB6YAwCSBwM1LjegB7d1&sclient=gws-wiz이외에 SameSite 라고도 검색해보시면 도움이 될 겁니다.

프로폴리스 · Answer

nextjs를 쓰시면 그냥 next-auth를 사용해서 소셜 로그인 쉽게 끝낼 수 있습니다.네이버 로그인해서 특별한 정보처리를 하지 않으면 그냥 프론트에서 하셔도 됩니다.만약 지금 구조대로 가실 것 이라면 백엔드에서 응답 값으로 body에 정확하게 다시 넣어달라고 하셔야 할 거 같습니다.

tete · Answer

최상위 도메인이 다르면 공유가 안되고서브 도메인까지만 달라야 쿠키가 공유될 수 있습니다.!

네이버 소셜 로그인 구현 중 로그인까지는 완료하는데 쿠키가 없습니다.

3개의 답변

기술 목록