Be/feature/#458 kakao OAuth

[kimyu0218]

변경 사항

• OAuth 관련 파일 작성 src/auth
• 에러 인터셉터 리팩토링
• 리프레시 토큰을 저장하기 위해 redis 추가

고민과 해결 과정

우리 프로젝트에서 카카오톡으로 타로 결과 공유하는 서비스를 제공하고 있기 때문에 카카오 로그인부터 도입하기로 결정했다. 추후에 구글과 네이버 로그인도 추가할 예정이다.

학습정리

• OAuth 2.0 동작원리
• 카카오 로그인 사전 세팅
• 카카오 로그인 이해하기

고민사항

가장 고민이었던 부분이 "액세스 토큰과 리프레시 토큰을 어디에다 저장해야 하는가" 였다. 챗지피티한테 열심히 물어봤지만, 구현에 정답은 없었다.

- 액세스 토큰 : 쿠키
- 리프레시 토큰 : redis

현재 위와 같이 구현한 상태다. 하지만 쿠키에다 넣어주면 보안상 매우 취약하다. OAuth에서 접근할 수 있는 자원을 제한하고 있긴 하지만 악의적인 사용자가 액세스 토큰을 탈취해서 자원을 열람할 수 있기 때문이다.

이러한 취약점을 보완하기 위해 httpOnly 설정을 해줬다. httpOnly 설정을 해주면 스크립트를 통한 쿠키 조회가 불가능하다. (악의적인 사용자는 물론, 일반 사용자도 쿠키를 조회할 수 없지만, 무조건 백엔드 서버를 거치는 게 보안상 안전하다고 판단했다!) xss는 해결됐지만 평문으로 전송되기 때문에 패킷을 캡처하는 악의적인 사용자에게 노출될 수 가능성도 있다. secure 설정을 통해 암호화된 통신에서만 사용하도록 해줬다.

액세스 토큰도 외부에 노출되어선 안되는 값이지만 리프레시 토큰은 더 강력한 파워를 갖고 있다. (액세스 토큰은 금방 만료되기 때문에 외부에 노출되어도 만료되면 무용지물이다.) 그래서 리프레시 토큰은 redis에 저장하고, 클라이언트에게 전송하지 않도록 구현했다. (어차피 클라이언트가 자신의 액세스 토큰을 스크립트로 추출할 수 없기 때문에 갖고 있을 필요가 없다.)

컨트롤러

@Controller('oauth')
export class AuthController {
  private readonly isProd: boolean;
  constructor(
    private readonly configService: ConfigService,
    private readonly kakaoAuthService: KakaoAuthService,
  ) {
    this.isProd = this.configService.get('ENV') === 'PROD';
  }

  // 카카오 로그인
  @Get('login/kakao')
  async kakaoLogin(@Req() req: Request, @Res() res: Response): Promise<void> {
    ...
  }

  // 로그아웃
  @UseGuards(AuthGuard)
  @Get('logout')
  async kakaoLogout(@Req() req: any, @Res() res: Response): Promise<void> {
   ...
  }
}

현재 카카오 로그인 밖에 없기 때문에 두 라우트에 대해서만 작성해줬다. /oauth/login/kakao는 카카오 로그인을, /oauth 로그아웃은 전체 OAuth 로그인에 대한 로그아웃을 의미한다.

• 카카오 로그인

kakaoLogin은 인가코드를 요청하고 리다이렉트 되면 타게 된다. 인가코드가 들어 있다면 kakaoAuthService를 요청하여 로그인 과정을 수행한다. 로그인에 성공하면 jwt 토큰을 받게 되는데 이를 쿠키에 붙여 전달한다. 쿠키는 나중에 인증 가드에서 유효성을 검사하여 인증 여부를 확인하는 데 사용된다.

@Get('login/kakao')
  async kakaoLogin(@Req() req: Request, @Res() res: Response): Promise<void> {
    if (req.params.error) { // 인증 코드 발급에 실패한 경우
      throw new UnauthorizedException(ERR_MSG.OAUTH_KAKAO_AUTH_CODE_FAILED);
    }
    // 인증 코드를 바탕으로 로그인 수행
    const jwt: string = await this.kakaoAuthService.loginOAuth(req.params.code);
    res.cookie('magicconch', jwt, {
      httpOnly: true,
      secure: this.isProd,
      sameSite: 'lax',
    });
    res.sendStatus(200);
  }

• 로그아웃

kakaoLogin과 달리 OAuth를 제공하는 모든 서비스에 대해 로그아웃을 수행한다. 인증 가드에서 쿠키 내용을 파싱하여 req.user에 붙여주게 되는데, 해당 내용을 바탕으로 어떤 서비스의 로그아웃을 수행해야 하는지 판단한다.

@UseGuards(AuthGuard)
  @Get('logout')
  async kakaoLogout(@Req() req: any, @Res() res: Response): Promise<void> {
    const user: JwtPayloadDto = req.user; // AuthGuard에서 파싱된 내용
    switch (user.providerId) {
      case PROVIDER_ID.KAKAO: // 카카오 로그아웃
        await this.kakaoAuthService.logoutOAuth(user);
        break;
      case PROVIDER_ID.NAVER: // 네이버 로그아웃
        break;
      case PROVIDER_ID.GOOGLE: // 구글 로그아웃
        break;
    }
    // 쿠키를 제거하여 우리 서비스에서도 로그아웃하도록 구현
    res.clearCookie('magicconch', {
      httpOnly: true,
      secure: this.isProd,
      sameSite: 'lax',
    });
    res.sendStatus(200);
  }

서비스

AuthService와 KakaoAuthService 를 작성해줬다. 처음엔 AuthService에 모든 내용을 작성했는데 무려 250줄에 육박했다. 추후에 구글, 네이버 로그인까지 추가되면 하나의 파일에 너무 많은 코드가 들어갈 것 같아 플랫폼 별로 파일을 분리해주었다.

• AuthService

공통으로 사용하는 로직이 들어있는 서비스다. KakaoAuthService에서 해당 클래스를 상속하여 이용한다.

@Injectable()
export class AuthService {
  // OAuth 서비스를 사용하기 위해 필요한 변수
  clientId: string;
  redirectUri: string;
  clientSecret: string;
  ttl: number;
  ...

  // 신규 회원인 경우, 회원가입 수행
  async signup(
    providerId: number,
    profile: ProfileDto,
    token: OAuthTokenDto,
  ): Promise<string> {
    /* 
      - 리프레시 토큰 캐시에 저장
      - 사용자 정보 추가
    */
  }

  // 기존 회원인 경우, 로그인 수행
  async login(
    id: string,
    providerId: number,
    profile: ProfileDto,
    token: OAuthTokenDto,
  ): Promise<string> {
    /* 
      - 리프레시 토큰 캐시에 저장
      - 사용자 정보 갱신
    */
  }

  ...
}

• KakaoAuthService

카카오 관련 OAuth 서비스를 정의한 클래스다. REST API를 이용하여 토큰을 발급받고, 갱신하고, 사용자 프로필을 조회한다.

@Injectable()
export class KakaoAuthService extends AuthService { // AuthService 상속!!
  constructor(
    readonly membersService: MembersService,
    readonly jwtService: JwtService,
    readonly configService: ConfigService,
  ) {
    super(membersService, jwtService, configService);
    this.init(PROVIDER_NAME.KAKAO); // 카카오 로그인에 필요한 환경변수 설정
  }

  // 로그인
  async loginOAuth(code: string): Promise<string> {
    // 1. 토큰 발급 받기
    const token: KakaoTokenDto = await this.requestToken(code);

    // 2. 사용자 정보 요청하기
    const profile: ProfileDto = await this.geUser(token.access_token ?? '');

    // 이메일과 플랫폼을 기준으로 사용자 조회
    const member: Member | null = await this.membersService.findByEmail(
      profile.email,
      PROVIDER_ID.KAKAO,
    );
    /* 
      - 기존 회원인 경우, 로그인 수행
      - 신규 회원인 경우, 회원가입 수행
    */
  }

  // 로그아웃
  async logoutOAuth(user: JwtPayloadDto): Promise<boolean> {
    // 1. 액세스 토큰 정보 조회
    const tokenInfo: KakaoAccessTokenInfoDto | null =
      await this.getAccessTokenInfo(user.accessToken);
    // 유효한 액세스 토큰인 경우 로그아웃 수행
    if (tokenInfo) {
      return this.requestLogout(user.accessToken);
    }

    // 2. 액세스 토큰이 만료된 경우, 리프레시 토큰으로 토큰 갱신
    const key: CacheKey = { email: user.email, providerId: user.providerId };
    const keyString: string = JSON.stringify(key);
    const refreshToken: string | undefined =
      await this.cacheManager.get<string>(keyString);
    const newToken: KakaoTokenDto = await this.refreshToken(refreshToken ?? '');

    // 3. 새로운 액세스 토큰으로 로그아웃 수행
    return this.requestLogout(newToken.access_token);
  }

  /* 아래는 카카오 REST API 요청*/

  // 토큰 발급
  private async requestToken(code: string): Promise<KakaoTokenDto> { ... }

  // 토큰 갱신
  private async refreshToken(refreshToken: string): Promise<KakaoTokenDto> { ... }

  // 사용자 프로필 조회
  private async getUser(accessToken: string): Promise<ProfileDto> { ... }

  // 액세스 토큰 정보 조회
  private async getAccessTokenInfo(
    accessToken: string,
  ): Promise<KakaoAccessTokenInfoDto | null> { ... }

  // 로그아웃 요청
  private async requestLogout(accessToken: string): Promise<boolean> { ... }
  ...
}

가드

사용자 인증 여부를 확인하기 위한 가드를 작성했다. JwtService를 이용하여 토큰을 검증하고, 토큰 정보를 req에 붙여서 전달한다.

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private jwtService: JwtService) {}

  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    const req: any = context.switchToHttp().getRequest(); // req 객체 가져오기
    const token: string | null = req.cookies.magicconch; // 쿠키 추출하기

    // 1. 쿠키 없는 경우, 로그인하지 않은 사용자
    if (!token) {
      throw new UnauthorizedException(ERR_MSG.JWT_NOT_FOUND);
    }
    // 2. 쿠키 검증 후, 유효한 jwt 토큰에 대해 req에 정보 저장
    const decoded: JwtPayloadDto = this.verifyToken(token);
    req.user = decoded;
    return true;
  }
  ...
}

redis (for 호스트서버)

개발 환경에서는 localhost로 띄우고, 호스트 서버에서는 docker 컨테이너로 띄우기로 결정했다.

sudo docker pull
sudo docker run -d --name redis-prod --network backend redis

redis 이미지를 pull 받고, redis-prod라는 이름의 컨테이너로 실행해줬다.

(선택) 테스트 결과

카카오 로그인이 제대로 동작하는지 확인하기 위해 Postman을 이용했다.

공식 문서를 바탕으로 쿼리 파라미터를 올바르게 작성해준다.

로그인에 성공하면 위와 같이 쿠키가 붙게 된다. (개발환경에서 테스트 중이기 때문에 secure가 활성화되지 않았다)

쿠키가 부착된 경우	쿠키가 부착되지 않은 경우

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	f5f6419
Status:	✅  Deploy successful!
Preview URL:	https://2ff687f1.web09-magicconch.pages.dev
Branch Preview URL:	https://be-feature--458-kakao-oauth.web09-magicconch.pages.dev

View logs

[Doosies]

👍 👍