nestJs로 소셜로그인

oauth2.0

우선 소셜로그인이 라는 현대 웹서비스에선 없어서는 빠질수없는 기능을 구현하기전 먼저 그것들의 뿌리 기능을 하는 oauth2.0에 대해서 알고가야 한다. 물론 기능적으로는 정말 세세하고 알아야 할것들이 많지만 간단하게 왜 oauth2.0이 소셜로그인을 하는데 알아야 하는것인지에 대해 간단하게 설명하자면 oauth2.0(authorization code)는 사용자가 우리 서비스에 회원가입이나 로그인과 같이 인증(authentication)과 인가(authorization)를 얻을때 서드파티 즉 카카오, 구글, 네이버와 같은 사용자와 우리 서비스가 아닌 제3자를 통해 정보를 제공하고 사용자 자신이 우리 서비스를 이용하기 위해 얻어야하는 인증과 인가를 얻을수있게 하는 기능이다.

소셜로그인

소셜 로그인을 구현함에 있어서 이번에 내가 사용했던 방법은 passport를 통한 전략(strategy)였다. 각 플랫폼에서 제공하는 개발자 사이트에서 클라이언트id, 클라이언트secret, callbackURL을 입력하고 사이트에서 정한 데이터를 얻어올수있는 scope를 설정하는 방식으로 서버 자체에서 사용자 데이터를 받아오고 회원가입 및 로그인에 필요한 로직을 수행했다. 처음엔 별 문제가 없어보였지면 사수와의 대화를 통해 깨달은 점이 있었다. 물론 잘못된것은 아니지만 passport로 소셜로그인을 구현하면 서버사이드에서 할일이 많다는것을 놓치고 있었다. 할일이 많아진다는건 서버에 부담이 증가한다는 뜻이기에 passport를 통해 사용자 데이터를 받아오려던 것을 각 플랫폼에서 제공하는 open API를 사용할수있게 하는 JS SDK를 사용하여 서버사이드에서 사용자 데이터를 generating하는것이 아니라 클라이언트 사이드에서 generating할수있게 바꾸고 싶었지만 아직 백엔드 만 해도 벅찬 나로서는 클라이언트 사이드까지 건드릴수가 없어 포기했다. 하지만 언젠가 새로운 서비스를 시작할때는 프론트 개발자의 협력을 받아 passport가 아닌 js sdk로 구현해보도록 하겠다.

경험했던 에러

사실좀 바보같은 실수를 해서 반나절을 꼬박 까먹어 버린 에러였다. 어쩌면 실수가 아니라 nestJS를 완전히 이해하지 못해 일어났던 에러였을수도 있겠다 싶다는 생각도 들긴한다.

_jwt-naver.ts_

import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Profile, Strategy } from 'passport-naver';

@Injectable()
export class NaverStrategy extends PassportStrategy(Strategy, 'naver') {
  constructor() {
    super({
      clientID: process.env.NAVER_CLINET_ID,
      clientSecret: process.env.NAVER_CLIENT_SECRET,
      callbackURL: process.env.NAVER_CALLBACK_URL,
      scope: ['email', 'name', 'birthyear', 'nickname', 'age'],
    });
  }
  async validate(accessToken: string, refreshToken: string, profile: Profile) {
    return {
      email: profile._json.email,
      name: profile.displayName,
      age: 29,
      password: profile.id,
    };
  }
}

auth.controller.ts의 naver 부분

@Get('login/naver/callback')
  @UseGuards(AuthGuard('naver'))
  async loginNaver(@Req() req: Request & IOauthUser, @Res() res: Response) {
    try {
      return this.socialLogin(req, res);
    } catch (e) {
      console.log(e);
    }
  }

이것이 네가 네이버 소셜로그인을 위해 작성해두었던 passport를 위한 전략 방식이다. 이것을 auth.controller.ts에서 naver callbackURL에 사용했을때 왜인지 모르게 AuthGuard('naver')가 이것을 인식하지 못하는것이 아닌가...?

에러 내용
[Nest] 22480  - 2022. 08. 06. 오후 7:42:25   ERROR [ExceptionsHandler] Unknown authentication strategy "naver"
Error: Unknown authentication strategy "naver

아니 해줄꺼 다해줬는데 왜 인식을 못하는거야... 라고 생각했지만 중요한점을 빼먹고 있었다. nestJS에서 @injectable()한 클래스를 사용하기 위해서는 모듈에 인식을 시켜줘야한다. 하지만 나는 NaverStrategy(네이버 소셜로그인을 위해 만든 클래스이름)를 모듈에 있는 Provider에 넣어주지도 않고 실행했기 때문이다.

혹시나 해서 하는 마음에 잠깐 모듈 기능들을 조금 설명해 보자면

• provider: 비지니스 로직을 담당하는 클래스를 원하는 모듈에 inject하여 사용할수있게 하는것이다(dependancy injection).
• controller: 비지니스 로직을 사용하여 사용자가 요청한 서비스를 리턴하는 역할을 하며 이 각 controller들은 이곳에 조립된다.
• import: 로컬에서 내가 만들 클래스 말고 외부 npm이나 yarn을 통해 가져온 패키지들을 사용할때 init해주는 역할을한다.

소셜로그인 처음에는 쉬운줄알았는데 의외로 신경쓸것이 많았다. 하지만 뭔가 알아가는 과정이 즐거웠고 그 과정속에서 nest를 좀더 깊게 이해한거 같은 느낌이었다.