이번 프로젝트 리팩토링을 진행하면서 어쩌다가 백엔드를 맡게 되었다. 회원가입 - 로그인까지는 어렵지 않아서 별 문제 없이 진행하였는데, 백엔드를 점점 공부하게 되다 보니까 더 깊이 있는 절차가 필요하다고 생각되었다. 일반 로그인 로직을 수정하고, 소셜로그인을 도입하기로 하였다. 진행 순서는 일반 로그인 로직 수정 → 카카오 로그인 → 구글 로그인 → 네이버 로그인 (성공하면 네이버측에 심사 받기) → DB에서 필요한 부분 처리 - 어느 계정으로 가입하였는지 DB oauthprovider 항목에 저장 잘 되는지 - 소셜로그인이 되어 있으면 일반로그인으로 재접속 불가 - 배포 상황에서도 잘 적용이 되는지 등
아래에 적힌 내용부터 일단 완성시키고
다른분들한테 피드백 받아서 더 보완할 예정이다.
그리고 백엔드 포트폴리오에서 Redis를 많이 쓰던데 Redis의 성능적인 면 말고 보안의 측면에서 정확히 왜 쓰는지는 아직 파악을 못했다.
일반 로그인
- 액세스 토큰 : 로컬스토리지에 저장 (15분)
- 리프레시 토큰 : 쿠키에 http only옵션 (14일)
1. 사용자가 로그인을 위해 회원 정보를 입력함.
2. 클라이언트에서 해당 정보를 받아서 서버로 넘겨줌.
3. 서버는 그 정보를 DB에 있는 정보와 조회함.
4. 정보가 일치하면 서버는 세션을 생성함. 서버는 클라이언트로 액세스토큰과 리프레시토큰을 넘겨줌. - 액세스토큰: 클라이언트에게 바로 응답으로 전송. - 리프레시토큰: HttpOnly 옵션을 설정한 쿠키에 담아 클라이언트로 전송. - 클라이언트는 액세스토큰을 로컬스토리지에 저장함. 리프레시토큰은 자동으로 전송되어 쿠키 안에 있음.
5. 클라이언트에서 액세스토큰을 받아서 인증 요청을 함.
6. 서버에서 해당 액세스토큰을 검증함.
7. 액세스토큰이 유효한지 확인하고, 유효하면 요청을 처리함. 액세스토큰이 만료됨.
8. 클라이언트에서 만료된 액세스토큰 대신 리프레시토큰을 사용하여 새로운 액세스토큰을 요청함. 클라이언트는 리프레시토큰을 쿠키에서 꺼내서 서버로 넘겨줌.
9. 서버는 리프레시토큰을 검증함.
10. 리프레시토큰이 유효하면 새로운 액세스토큰을 발급함. 클라이언트는 액세스토큰을 받아서 인증 요청을 함.
소셜로그인
총 카카오, 구글, 네이버를 시도하기로 했다.
소셜로그인은 우선 카카오소셜로그인부터 하려고 했는데, 프론트엔드에서 URI가 안 넘어와서 계속 미루고 있었다. 카카오 코드는 대충 짜놨는데 우선 이것부터 해야겠다. 구글로그인은 내가 산 NestJS 책에서 passport로 구현하는 예제코드가 있다. 하지만 passport 코드 자체가 이해가 잘 안 되어서 써먹지를 못하겠다. 따라쳐서 굴러가면 되기는 하는건데, 뭔 의미가 있는지 싶다.
문법이 난해하다고 하는데, 진짜 난해하다.
이걸 이해해서 쓰자니 직접 구현이 더 빠를 것 같다. 그리고 프로젝트를 하면서 느끼는건데, 전체적으로 이해가 안 되는 코드는 괜히 잘못 끼적여서 에러가 나면 해결을 하는 것이 굉장히 힘들어지기 때문에 함부로 갖다가 쓰면 안 되는 것도 배웠다. 네이버로그인은 성공한다고 하면 네이버측에 승인을 받아서 테스트계정을 제외하고 다른 계정으로도 로그인할 수 있도록 만들어야 한다. 힘들 것 같다.
