로딩화면 스피너로 만들기

• 스피너 사이트에서 gif로 로딩 화면 만들기
• img로 삽입 or Loading.js 만들어 import

Access Token & Refresh Token

Q1. 지금은 body에, 원래는 Back에서 줄때도 header에? 어떻게 꺼내 쓰나요?

API가 2개 필요하다.

1. POST /login: 이메일, 비밀번호를 보내면 refreshToken과 accessToken을 리턴한다.
2. POST /refresh: 쿠키에 담긴 refreshToken이 자동으로 보내지면 새로운 refreshToken과 accessToken을 리턴한다.

두 API 모두 HTTP 응답 Set-Cookie 헤더에 refreshToken 값을 설정하고 accessToken 을 JSON payload에 담아 보내줘야 한다.

카카오/네이버 로그인 로직

< Front >

1. Login/SignIn 요청을 하면 Social API에서 인가 코드를 받는다.

2. 그 인가 코드를 Social API에 보내면 1️⃣Access token을 발급해준다.

3. 1️⃣을 Back으로 보낸다

4. User의 Nickname은 추가 정보 입력 페이지에 출력한다. → “ㅇㅇ님 반가워요!”

5. 2️⃣Access Token은 로컬 변수에 담아 API 호출 시 사용하고, 3️⃣Refresh Token 값은 Set-Cookie 헤더에 설정해 2️⃣Access Token이 만료될때마다 /refresh API에 요청을 보내 새로운 4️⃣Access Token과 5️⃣Refresh Token을 받아와 사용한다.

< Back >

1. 1️⃣을 이용해 Social API에서 User 정보를 받아 User 데이터 테이블에 저장한다.
2. 해당 User가 우리 사이트에서 사용할 2️⃣Access Token과 3️⃣Refresh Token을 생성한다. (/login)
3. User 정보 중 User의 Nickname + 2️⃣Access Token과 3️⃣Refresh Token을 Front로 보낸다.

• 실제로 인증에 필요한 Token : Access Token → 중요!

• 하지만 localStorage, Cookie 어디에 저장해도 보안에 취약점이 있음

• 보안 강화 방법 : 계속 바꾸어 주자!

  → 이때 필요한 Refresh Token