[OAuth2.0] Google Social Login 구현 - 백엔드 중앙 관리식 로직 구현

npm install passport-google-oauth20

npm install --save-dev @types/passport-google-oauth20

import { Injectable, Logger, UnauthorizedException } from '@nestjs/common'; import { PassportStrategy } from '@nestjs/passport'; import { Strategy, VerifyCallback } from 'passport-google-oauth20'; import { AuthService } from '../auth.service'; import { Profile } from 'passport'; @Injectable() export class GoogleStrategy extends PassportStrategy(Strategy, 'google') { private readonly logger = new Logger(GoogleStrategy.name); constructor( private readonly authService: AuthService, ) { super({ clientID: process.env.GOOGLE_CLIENT_ID, // Google 클라이언트 ID clientSecret: process.env.GOOGLE_CLIENT_SECRET, // Google 클라이언트 시크릿 callbackURL: process.env.GOOGLE_REDIRECT_URI, // Google 리디렉션 URI scope: ['profile', 'email'], // 요청할 사용자 정보 범위 }); } async validate(accessToken: string, refreshToken: string, profile: Profile, done: VerifyCallback): Promise<any> { this.logger.debug('Google Profile:', profile); try { const { emails, displayName } = profile; const email = emails?.[0]?.value; if (!email) { throw new UnauthorizedException('Google 계정에 이메일 정보가 없습니다.'); } // AuthService의 signInWithGoogle 메서드를 활용하여 사용자 조회 또는 생성 const user = await this.authService.findOrCreateGoogleUser({ email, name: displayName, }); if (!user) { return done(null, false); } return done(null, user); // 사용자 객체 반환 } catch (error) { this.logger.error('Google 로그인 검증 실패:', error); return done(error, false); } } }

GOOGLE_REDIRECT_URI=http://localhost:3100/api/auth/google/callback

import { Injectable } from '@nestjs/common'; import { AuthGuard } from '@nestjs/passport'; @Injectable() export class GoogleAuthGuard extends AuthGuard('google') { constructor() { super(); } }

import { Global, Module } from '@nestjs/common'; import { AuthService } from './auth.service'; import { AuthController } from './auth.controller'; import { JwtStrategy } from './strategies/jwt.strategy'; import { User } from '../users/entities/user.entity'; import { TypeOrmModule } from '@nestjs/typeorm'; import { JwtModule } from '@nestjs/jwt'; import { RolesGuard } from './custom-guards-decorators/roles.guard'; import { UsersModule } from '../users/users.module'; import { PassportModule } from '@nestjs/passport'; import { GoogleAuthGuard } from './custom-guards-decorators/google-auth.guard'; import { GoogleStrategy } from './strategies/google.strategy'; @Global() @Module({ imports: [ UsersModule, PassportModule.register({ defaultStrategy: 'jwt' }), TypeOrmModule.forFeature([User]), JwtModule.register({ secret: process.env.JWT_SECRET, signOptions: { expiresIn: '1h' }, }), ], providers: [ AuthService, JwtStrategy, RolesGuard, GoogleAuthGuard, GoogleStrategy, ], controllers: [AuthController], exports: [AuthService, PassportModule, RolesGuard], }) export class AuthModule {}

import { BadRequestException, Body, ConflictException, Controller, HttpStatus, Logger, Post, Res, Get, UseGuards, Req, UnauthorizedException } from '@nestjs/common'; import { AuthService } from './auth.service'; import { SignInRequestDto } from './dto/sign-in-request.dto'; import { Response } from 'express'; import { ApiResponseDto } from 'src/common/api-response-dto/api-response.dto'; import { CreateUserRequestDto } from 'src/users/dto/create-user-request.dto'; import { UsersService } from 'src/users/users.service'; import { Request } from 'express'; import { GoogleAuthGuard } from './custom-guards-decorators/google-auth.guard'; import { User } from 'src/users/entities/user.entity'; @Controller('api/auth') export class AuthController { private readonly logger = new Logger(AuthController.name); private readonly frontendUrl: string; constructor( private authService: AuthService, private usersService: UsersService, ) { this.frontendUrl = process.env.FRONTEND_URL || 'http://localhost:4200'; } // Sign-Up @Post('/signup') async createUser( @Body() createUserRequestDto: CreateUserRequestDto ): Promise<ApiResponseDto<void>> { this.logger.verbose(`Visitor is trying to create a new account with email: ${createUserRequestDto.email}`); try { await this.usersService.createUser(createUserRequestDto); this.logger.verbose(`New account created Successfully`); return new ApiResponseDto(true, HttpStatus.CREATED, '회원가입이 완료되었습니다.'); } catch (error) { if (error instanceof ConflictException) { throw new ConflictException(error.message); } else if (error instanceof BadRequestException) { throw new BadRequestException(error.message); } throw new BadRequestException('회원가입 중 오류가 발생했습니다.'); } } // Sign-In @Post('/signin') async signIn( @Body() signInRequestDto: SignInRequestDto, @Res() res: Response ): Promise<void> { this.logger.verbose(`User with email: ${signInRequestDto.email} is trying to sign in`); try { const user = await this.authService.signIn(signInRequestDto); const jwtToken = await this.authService.generateJwt(user); this.logger.verbose(`User with email: ${signInRequestDto.email} issued JWT ${jwtToken}`); res.setHeader('Authorization', `Bearer ${jwtToken}`); const response = new ApiResponseDto(true, HttpStatus.OK, 'User logged in successfully', { jwtToken }); res.send(response); } catch (error) { this.logger.error(`Sign-in failed: ${error.message}`); res.status(HttpStatus.UNAUTHORIZED).send(new ApiResponseDto(false, HttpStatus.UNAUTHORIZED, '이메일 또는 비밀번호를 확인해주세요.')); } } @Get('/google/login') @UseGuards(GoogleAuthGuard) async googleAuth() { this.logger.verbose(`User is trying to Google social sign-in`); // Google 로그인 페이지로 리디렉션 (Passport가 처리) } @Get('/google/callback') @UseGuards(GoogleAuthGuard) async googleAuthRedirect(@Req() req: Request, @Res() res: Response): Promise<void> { this.logger.verbose(`Processing Google authentication callback`); if (!req.user) { this.logger.error(`Google authentication failed, req.user is null`); return res.redirect(`${this.frontendUrl}/auth/sign-in?error=google_auth_failed`); } try { const jwtToken = await this.authService.generateJwt(req.user as User); // User 타입 캐스팅 this.logger.verbose(`Google authentication successful for user, JWT issued.`); // JWT 토큰을 쿼리 파라미터로 프론트엔드 콜백 URL에 추가 const callbackUrlWithToken = `${this.frontendUrl}/auth/google-callback?jwtToken=Bearer ${jwtToken}`; // 헤더에 토큰을 담지 않고, 쿼리 파라미터로 리디렉션 return res.redirect(callbackUrlWithToken); } catch (error) { this.logger.error(`Error processing Google callback for user: ${req.user ? (req.user as any).id : 'unknown'}`, error.stack); return res.redirect(`${this.frontendUrl}/auth/sign-in?error=jwt_generation_failed`); } } }

import { Injectable, Logger, UnauthorizedException } from '@nestjs/common'; import * as bcrypt from 'bcryptjs'; import { SignInRequestDto } from './dto/sign-in-request.dto'; import { JwtService } from '@nestjs/jwt'; import { UsersService } from 'src/users/users.service'; import { UserRole } from 'src/users/entities/user-role.enum'; import { CreateGoogleUserRequestDto } from 'src/users/dto/create-google-user-request.dto'; import { User } from 'src/users/entities/user.entity'; @Injectable() export class AuthService { private readonly logger = new Logger(AuthService.name); private readonly googleClientId: string; constructor( private jwtService: JwtService, private userService: UsersService, ) { this.googleClientId = process.env.GOOGLE_CLIENT_ID; } // Sign-In async signIn( signInRequestDto: SignInRequestDto ): Promise<User> { this.logger.verbose(`User with email: ${signInRequestDto.email} is signing in`); const { email, password } = signInRequestDto; try { const existingUser = await this.userService.findUserByEmail(email); if (!existingUser || !(await bcrypt.compare(password, existingUser.password))) { throw new UnauthorizedException('Invalid credentials'); } this.logger.verbose(`User with email: ${signInRequestDto.email} found`); return existingUser; } catch (error) { this.logger.error(`Invalid credentials or Internal Server error`); throw error; } } async findOrCreateGoogleUser(googleProfile: { email: string, name: string }): Promise<User | null> { const { googleId, email, name } = googleProfile; let existingUser = await this.userService.findUserByEmail(email).catch(() => null); if (!existingUser) { const createGoogleUserRequestDto: CreateGoogleUserRequestDto = { email, username: name || email.split('@')[0], role: UserRole.STUDENT, }; await this.userService.createUserByGoogle(createGoogleUserRequestDto); existingUser = await this.userService.findUserByEmail(email); } return existingUser; } async generateJwt(user: User): Promise<string> { const payload = { id: user.id, email: user.email, username: user.username, role: user.role, }; return await this.jwtService.sign(payload); } }

import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { AuthService } from 'src/app/core/services/auth/auth.service'; @Component({ selector: 'app-google-callback', templateUrl: './google-callback.component.html', styleUrls: ['./google-callback.component.scss'] }) export class GoogleCallbackComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router, private authService: AuthService ) { } ngOnInit(): void { const jwtToken = this.route.snapshot.queryParamMap.get('jwtToken'); console.log('Google login callback: ', jwtToken); if (jwtToken) { this.authService.saveToken(jwtToken); console.log('Token saved successfully.'); window.location.href = '/'; } else { console.error('Google login callback: Token not found in URL query parameters.'); this.router.navigate(['/auth/sign-in'], { queryParams: { error: 'google_token_missing' } }); } } }

<app-toast [message]="errorMessage"></app-toast> <div class="my-10 space-y-6"> <div class="text-center"> <h2 class="mb-1 text-3xl font-semibold text-foreground">Hello Again <span class="text-primary">!</span></h2> <p class="text-sm text-muted-foreground">Enter your credential to access your account.</p> </div> <!-- Oauth 2.0 Google --> <div> <app-button (click)="onGoogleSignIn()" full impact="bold" tone="light" shape="rounded" size="medium"> <svg-icon src="assets/icons/google-logo.svg" [svgClass]="'h-6 w-6 mr-2'"> </svg-icon> Sign In with Google </app-button> </div> ... </div>

<app-toast [message]="errorMessage"></app-toast> <div class="my-10 space-y-6"> <div class="text-center"> <h2 class="mb-1 text-3xl font-semibold text-foreground">Sign Up <span class="text-primary">!</span></h2> <p class="text-sm text-muted-foreground">Let's get started with your passion.</p> </div> <!-- Oauth 2.0 Google --> <div> <app-button (click)="onGoogleSignIn()" full impact="bold" tone="light" shape="rounded" size="medium"> <svg-icon src="assets/icons/google-logo.svg" [svgClass]="'h-6 w-6 mr-2'"> </svg-icon> Sign Up & Sign In with Google </app-button> </div> ... </div>

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; // ActivatedRoute 추가 import { SignInRequest } from 'src/app/core/models/auth/sign-in-request.interface'; import { AuthService } from 'src/app/core/services/auth/auth.service'; import { ToastComponent } from 'src/app/core/components/toast/toast.component'; @Component({ selector: 'app-sign-in', templateUrl: './sign-in.component.html', styleUrls: ['./sign-in.component.scss'], }) export class SignInComponent implements OnInit { signInForm: FormGroup; errorMessage: string = ''; ... onGoogleSignIn() { this.authService.initiateGoogleSignIn(); } ... }

import { HttpClient, HttpHeaders } from "@angular/common/http"; import { BehaviorSubject, map, Observable, tap } from "rxjs"; import { Router } from "@angular/router"; import { AuthResponse } from "../../models/auth/auth-response.interface"; import { Injectable } from "@angular/core"; import { jwtDecode } from 'jwt-decode'; import { DecodedToken } from "../../models/auth/decoded-token.interface"; import { environment } from 'src/environments/environment'; import { CreateUserRequest } from "../../models/users/user-request.interface"; import { UserResponse } from "../../models/users/user-response.interface"; import { ApiResponse } from "../../models/common/api-response.interface"; import { SignInRequest } from "../../models/auth/sign-in-request.interface"; @Injectable({ providedIn: 'root' }) export class AuthService { private currentUserSubject = new BehaviorSubject<DecodedToken | null>(null); public currentUser$ = this.currentUserSubject.asObservable(); private apiUrl = environment.apiUrl + '/auth'; private readonly TOKEN_KEY = 'jwtToken'; constructor(private http: HttpClient, private router: Router) { this.loadUserFromToken(); } getToken(): string | null { return sessionStorage.getItem(this.TOKEN_KEY); } // 토큰 저장 및 사용자 정보 업데이트 saveToken(jwtToken: string): void { sessionStorage.setItem(this.TOKEN_KEY, jwtToken); this.loadUserFromToken(); } ... // 일반 이메일/비밀번호 로그인 signIn(signInRequestData: SignInRequest): Observable<AuthResponse> { ... } initiateGoogleSignIn(): void { window.location.href = `${this.apiUrl}/google/signin`; } signOut(): void { sessionStorage.removeItem(this.TOKEN_KEY); this.currentUserSubject.next(null); this.router.navigate(['/auth/sign-in']); } loadUserFromToken(): DecodedToken | null { const jwtToken = sessionStorage.getItem('jwtToken'); if (jwtToken) { try { const decoded = (jwtDecode as (token: string) => DecodedToken)(jwtToken); this.currentUserSubject.next(decoded); return decoded; } catch (error) { this.currentUserSubject.next(null); return null; } } return null; } // 토큰 만료 여부 확인 isTokenExpired(): boolean { ... } }