쿠키에 대한 개념, CORS간 쿠키요청에 대한 글은 이전 글을 참고해주면 된다. 참고 이 글은 배포환경에 아닌(배포환경은 same-site다) 개발환경에서의 cross-domain, 즉 localhost와 백엔드 서버간의 쿠키 인증, 그리고 api테스트에 대해 다룬다. 여기서 설정한 것들은 배포환경과는 별개의 로직이다. 배경과 문제상황 도입하게 된 배경 우리 서비스는 OAuth2.0을 사용해 구글, 깃허브 로그인을 진행하고, 이후에 얻어지는 서버 자체의 JWT토큰을 set-cookie를 통해 httpOnly쿠키를 set해주는 방식으로 인증을 구현했다. 들어가기에 앞서 우리 서비스의 쿠키 옵션을 살펴보자. httpOnly O secure O same-site Lax httpOnly JS로는 쿠키를 조작할 ..
token
왜 도입하게 되었나 블로그 피드를 만들긴 했으나, 블로그 글이 올라왔을때, 알림이 오게 하고 싶었다. https://0422.tistory.com/300 풀과 푸시 풀 일반적으로 사용되는 HTTP요청의 모습이다 request가 오면 서버가 response를 주는 형태이다. 푸시 푸시는 요청이 없어도 응답을 내려준다. fcm에서는 서비스워커(firebase-messaging-sw.js)가 일을 한다고 한다. FCM이란? Firebase Cloud Messaging의 약자이다. 위 사진처럼 동작한다. 위사진 과정을 이해해보자. 준비과정 1. Get Token 클라이언트는 디바이스 고유의 token을 firebase로부터 발급받는다. 이 token은 기기마다 고유하다! 2. Send and store toke..
소셜로그인을 통해 토큰을 관리해야되는데, 어지러운 경우가 많다. access_token을 보냈는데 만료된 경우라면? => refresh_token을 통해 access_token을 갱신해야한다. 이를 위해 axios에서는 인스턴스 커스텀 방법을 제시한다. https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1 API | Axios 러닝 가이드 API 구성(configuration) 설정을axios()에 전달하여 요청할 수 있습니다. axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred',..