[Nest.js] Nest.js에서 소셜로그인을 구현하는 방법 (feat.Naver)

Nest.js에서 소셜로그인을 구현하는 방법

• 예제는 네이버로 구현한다.
• 공식문서에는 passport를 사용한 로컬 로그인만 구현 되어 있어서 소셜로그인을 하는 방법을 알아보자.

// 네이버 전략파일
// naver.strategy.ts
import { Strategy } from 'passport-naver';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';
import { AuthService } from '../auth.service';

@Injectable()
export class NaverStrategy extends PassportStrategy(Strategy) {
  constructor(private authService: AuthService) {
    super({
      clientID: process.env.NAVER_CLIENT_ID,
      clientSecret: process.env.NAVER_CLIENT_SECRET,
      callbackURL: process.env.NAVER_CALLBACK_URL,
    });
  }

  async validate(
    accessToken: string,
    refreshToken: string,
    profile: any,
    done: any,
  ): Promise<any> {
    const user_email = profile._json.email;
    const user_nick = profile._json.nickname;
    const user_provider = profile.provider;
    const user_profile = {
      user_email,
      user_nick,
      user_provider,
    };

    const user = await this.authService.validateUser(user_email);
    if (user === null) {
      return fail;
    }

    return done(null, user);
	
  }
}

• 물론 예시이다.
• 실제 구현한 코드에서는 프론트에서 백엔드 엔드포인트인 auth/naver로 요청 -> 네이버 로그인창 -> 백엔드 auth/naver/callback -> 프론트로 retrun 이런식으로 진행이 된다.

// naver-auth.guard.ts
import { AuthGuard } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';

@Injectable()
export class NaverAuthGuard extends AuthGuard('naver') {}

• 가드를 이런식으로 구현해두면 nest.js안에서 자동적으로 naver 가드를 적용해서 전략파일을 거친다.

// 유저 컨트롤러
@UseGuards(NaverAuthGuard)
  @Get('auth/naver')
  async naverlogin() {
    return;
  }

  @UseGuards(NaverAuthGuard)
  @Get('auth/naver/callback')
  async callback(@Req() req): Promise<any> {
    return req.user;
  }

• 이렇게 하면 로그인 성공시 req.user안에 유저 들이 담긴다
• 자세한 코드는 링크를 참조하자
• github 예제 링크에 카카오 로그인 예시도 존재한다.

https://github.com/2n-snails/nest-back/tree/main/src/auth

GitHub - 2n-snails/nest-back