오늘은 이전에 만들었던 소셜로그인에 이슈가 생겼는데 2주정도 머리 쥐어뜯다가 해결을 해서
관련 내용을 포스팅 해보려고 한다.
https://ilikezzi.tistory.com/65
[Nest.JS] 구글, 네이버, 카카오 소셜로그인 구현 - 2
소셜로그인 1편에 이어서 바로 2편을 포스팅하려 했는데 refresh_token과 JWT 전략에 대해서 이것저것 머리싸매면서 고민하느라 늦어졌다.. 정말 다양한 JWT 전략과 고민할 사항이 많았다. 한 계정으
ilikezzi.tistory.com
소셜로그인 전략을 어떻게 구성했는지는 위의 포스팅을 참고하길 바란다.
일단 소셜로그인 전략에 대해 간략하게 얘기해보자면,
소셜로그인 전략
1. 첫 로그인 시 access_token / refresh_token 발급
2. access_token은 1시간 만료기간으로 로컬스토리지에 저장
3. refresh_token은 2주 만료기간으로 Set-Cookie 헤더에 httpOnly 쿠키로 저장 + DB에 저장
4. access_token이 만료되었으면 쿠키에 저장된 refresh_token을 검증해서 새로운 access_token 발급
ㄴ (Silent Refresh API)
이런 식으로 이루어져 있다.
문제 이슈
위의 4번째 전략에서 Silent Refresh API를 프론트에서 호출시 새로운 access_token 발급이 안된다고 했다.
이 문제를 해결하기 위해 코드를 디버깅하기 시작했다.
"getRefreshToken" 이 undefined로 출력 되더라
그래서 return 값에 access_token이 아닌 false만 출력되고 있었다...
애초에 헤더에 cookie가 저장되지 않았나? 하고 확인을 해보았다.
Cookie는 정상적으로 헤더에 저장되어 있었다.
다만, Cookie를 헤더에서 꺼내오지 못하고 있었다.
구글링을 해보니 credentials:true 옵션을 찾았다.
이 옵션을 프론트,백엔드 둘 다 설정하면 동일 출처 또는 다른 출처에 관계없이
모든 HTTP 요청에 쿠키를 포함시킨다고 했다.
즉, 크로스 오리진 요청에서도 쿠키를 보내고 받을 수 있다.
그래서 바로 해당 옵션을 추가하고 테스트를 해봤는데
여전히 안되더라...
그 후 다양하게 테스트를 해보다가
프론트(staging) - 백엔드(staging) 이렇게 같은 환경에서는 정상적으로 쿠키를 꺼내오고 있는걸 확인했다 !
이제서야 문제점을 제대로 파악했다.
쿠키는 기본적으로 동일한 도메인 및 서브 도메인으로만 전송되도록 설정되어 있어서,
서로 다른 도메인 간에는 쿠키가 공유되지 않았던것이였다.
프론트엔드 로컬 환경에서 테스트를 하다보니
localhost:3457 에서 -> http://staging.seoulsync82.com 으로요청을 보낼 때,
이렇게 다른 도메인 간에 쿠키가 전송되지 않는 상황이 발생했던 것이다.
문제 해결
이제 다른 도메인 간에 쿠키 전송을 가능하게끔 해줄 것이다.
쿠키 설정을 할때 "SameSite"라는 옵션을 "none"으로 해줘야
다른 도메인에서도 쿠키 전달이 가능하다더라.
하지만 "SameSite : none" 옵션을 사용하려면 중요한 포인트가 있다.
바로 "Secure" 옵션이 "True"로 설정되어야 한다는 것이다.
이는 쿠키가 HTTPS 연결을 통해서만 전송되도록 보장해준다.
그래서 결국엔, 나는 사이트를 HTTPS로 바꿔야만 했다ㅎㅎ
AWS에서 제공하는 SSL/TLS 인증서를 받고 인증서를 웹서버에 연결해서 HTTPS로 안전하게 전환을 했다.
드디어 !!!
다른 도메인 간에 쿠키 전송을 성공했다.
이로 인해, Silent Refresh API도 제대로 실행되어서 새로운 access_token 발급까지 원활하게 이루어졌다.
이런 변경 덕분에 이제 로컬 환경의 프론트엔드에서도 Staging 서버의 도메인으로
쿠키 전송을 원활하게 할 수 있게 되었다.
개발하는 동안에도 쿠키를 효과적으로 관리하며, 더 나은 테스트 환경을 구축할 수 있게 되었다 !
'Project > SeoulSync82' 카테고리의 다른 글
| [SeoulSync82] Mysql DB에 이모지 저장하기 - Nest.JS (2) | 2023.12.20 |
|---|