구글 소셜로그인

Gwonyeong·2023년 5월 8일
0

유키독

목록 보기
1/11

구글은 생각보다 소셜로그인 구현이 쉽게 되어있다.

Inpa Dev님의 패스포트

사실, passport만 이해하면 웬만한 소셜로그인의 구동 방식은 비슷하기 때문에 하나만 성공해도 다른 소셜까지 구현 가능해진다.

사실 어렵게 생각할 것 없이 다음과 같은 순서를 따른다.
1. 개발자가 만든 서비스에서 Oauth를 제공하는 서버에 요청을 보낸다.
- 여기서 위 사진의 승인된 자바스크립트 원본 부분의 URL에서 요청이 들어와야 한다.
2. Oauth를 제공하는 서버에서는 자신들이 제공하는 로그인 창으로 redirect 시켜준다.
3. 사용자가 로그인 과정을 마치고, '로그인'버튼을 누르면 위 사진의 승인된 리디렉션 URI로 다시 요청을 보내준다.
4. 요청을 받았다면 Oauth서버에서 유저에 대한 정보를 보내준다.

  • 카카오는 유저이름, 프로필 사진 등등이고 (유저에게 동의를 얻는다면 성별, 나이 등 다른 여러 정보도 가져올 수 있음.)
  • 구글, 네이버 등등도 주는 방식만 다를 뿐 비슷한 데이터를 제공해준다.

import { Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class GoogleAuthGuard extends AuthGuard('google') {}

위와 같은 google.guard.ts를

  @UseGuards(GoogleAuthGuard)

와 같이 데코레이터로 호출해준다면 구글 passport는 인증과정을 거친다.

class GoogleStrategy extends PassportStrategy(Strategy, 'google')

에서 알 수 있듯 google이라는 문자열을 두번째 매개변수로 보내 PassportStrategy 클래스의 인스턴스를 만든다.
이 인스턴스를 이용해 인증과정을 거친다면 콜백으로 받은 구글 가드에서는 하단의 validate를 실행한다.

async validate(
    accessToken: string,
    refreshToken: string,
    profile: any,
    done: VerifyCallback,
  ): Promise<any> {
    const { emails, photos, id } = profile;
    const email = emails[0].value;
    const profileImage = photos[0].value;

    const appToken = await this.authSocialLoginService.execSocialLogin({
      email,
      snsId: id,
      profileImage,
      platform: 'google',
    });

    done(null, appToken);
  }

Oauth를 제공하는 서버에서는 자신들의 토큰을 함께 주는데 이는 해당 서비스를 이용하는 토큰이므로 절대 탈취당하지는 않도록 해야한다.
굳이 카카오의 다른 서비스를 이용한다거나 하는 필요가 없다면 독자적인 토큰을 만들어서 프론트에게 전달하는게 좋은 방법으로 보인다.

res.redirect(
     `http://localhost:4000/auth/social/callback?appToken=${req.user.appToken}`,
   );

블로그를 봐도 몇몇 코드들을 봐도 redirect로 토큰을 전달하는 편이다. 콜백을 받는 순간 요청은 oauth에서 온 것이라 그런지 response값으로 넘겨주려고 해도 전달되지 않는다.
쿼리값을 이용하는게 보안상 단점이 있어보이는데 이 부분은 해결방법을 찾아봐야겠다.

profile
부동의 첫사랑

0개의 댓글