네이버 로그인

로그인 과정

1. 유저가 소셜로그인 버튼을 누르고 ID, PW 입력

2. 해당 소셜에서, 유저가 입력한 ID와 PW가 올바른지 확인

3. 올바른 로그인 정보일시 소셜에서 브라우저로 시크릿 코드를 전송

4. 브라우저는 소셜에게 받은 시크릿 코드를 백엔드로 전달

5. 백엔드는 브라우저에게 받은 시크릿 코드를 소셜로 다시 전송 (로그인 요청한 유저와 동일한지 확인 과정)

6. 소셜에서 백엔드에게 받은 시크릿 코드와 브라우저에게 전송했던 시크릿 코드가 일치하는지 확인

7. 일치 시 소셜에서 백엔드로 해당 유저의 AccessToken과 프로필을 전송

8. 백엔드는 소셜에서 받은 유저의 프로필이 db에 없으면 회원가입을 진행하고, 있으면 로그인 처리

BE

라이브러리 설치

yarn add @nestjs/passport
yarn add passport
yarn add passport-naver-v2

Guard

Guard : https://docs.nestjs.com/guards

가드는 CanActivate 인터페이스를 구현하는 @Injectable() 데코레이터로 주석이 달린 클래스입니다.

가드(Guard)란?

NestJS에서 가드(guard)란 애플리케이션의 최전선에서 말그대로 애플리케이션을 보호하는 역할을 담당하는데요. NestJS로 들어오는 요청은 컨트롤러(controller) 단에 도달하기 전에 반드시 가드를 거쳐가도록 되어 있습니다.

가드를 이용하면 컨트롤러가 요청을 처리하기 전에 안전하지 않은 요청을 효과적으로 차단할 수 있습니다. 따라서 애플리케이션 보안을 위해서 필수적인 사용자 인증이나 접근 제어를 구현하는데 안성맞춤이지요.

Express.js를 써보셨다면 미들웨어(middleware)랑 유사한 역할을 수행한다고 보시면 되겠습니다.

Strategy

export type Profile = {
  provider: "naver";
  id: string;
  nickname?: string;
  profileImage?: string;
  age?: string;
  gender?: string;
  email?: string;
  mobile?: string;
  mobileE164?: string;
  name?: string;
  birthday?: string;
  birthYear?: string;
  _raw: string;
  _json: string;
};

마클 메모

회원가입, 로그인 버튼 누르기 → 회원이면 → 걍 로그인

회원 아니면 → 회원가입 or not

express-session&connect-redis

클라이언트에서 로그인 요청을 보내면, 서버 측에서 session Id를 클라이언트에 전달하고 클라이언트에서는 session Id를 쿠키에 저장해서 보관한다.

클라이언트는 서버에게 요청을 보낼 때 마다 HTTP 헤더의 Cookie에 해당 session Id를 넣어 함께 전달한다.

이것을 서버가 받으면 해당 session Id가 있는지 서버측에서 확인을 하는 것으로 로그인 여부를 판단한다.