구글 로그인 결과를 저장하는 REST API 제작

리액트에서 구글 OAuth2 API를 이용해서 받아온 로그인 정보를 저장하는 스프링부트 기반의 REST API를 만드는 과정입니다.

 

리액트에서 구글 OAuth2 API를 이용하는 방법은 "리액트 구글 OAuth2 API를 이용한 로그인"을 참조하세요.

 

 

#1 Spring Initializr 사이트에서 프로젝트 정보와 의존성을 추가 후 GENERATE 버튼 클릭

https://start.spring.io/

 

#2 다운로드 받은 googlelogin.zip 파일을 압축 해제

 

#3 이클립스에서 프로젝트 임포트

 

#4 Entity 클래스 생성

저장할 데이터 구조를 정의한 Entity 클래스를 생성

package com.example.googlelogin.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@NoArgsConstructor
@Entity
@Table(name = "User")
public class UserEntity {
	@Id
	@Column(name = "id", nullable = false)
	private String id;
	
	@Column(name = "name", nullable = false)
	private String name;
	
	@Column(name = "email", nullable = false)
	private String email;
	
	@Column(name = "image_url")
	private String imageUrl;
	
	@Column(name = "token", columnDefinition = "TEXT")
	private String token;
	
	@Builder
	public UserEntity(String id, String name, String email, String imageUrl, String token) {
		this.id = id;
		this.name = name;
		this.email = email;
		this.imageUrl = imageUrl;
		this.token = token;	
	}
}

 

#5 DTO 클래서 생성

구글에서 전달받은 정보를 담을 DTO(Data Transfer Object) 클래스를 생성

package com.example.googlelogin.dto;

import com.example.googlelogin.entity.UserEntity;

import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

// 클라이언트에서 전달하는 데이터를 담는 객체
@Getter
@NoArgsConstructor
public class UserDto {
	private String id;
	private String name;
	private String email;
	private String imageUrl;
	private String token;
	
	@Builder
	public UserDto(String id, String name, String email, String imageUrl, String token) {
		this.id = id;
		this.name = name;
		this.email = email;
		this.imageUrl = imageUrl;
		this.token = token;		
	}
	
	// Dto 객체를 Entity 객체로 변환해서 반환하는 유틸리티 메서드
	public UserEntity toEntity() {
		return UserEntity.builder().id(id).name(name).email(email).imageUrl(imageUrl).token(token).build();
	}
}

 

#5 Repository 생성

package com.example.googlelogin.repository;

import org.springframework.data.repository.CrudRepository;
import org.springframework.stereotype.Service;

import com.example.googlelogin.entity.UserEntity;

@Service 
public interface UserRepository extends CrudRepository<UserEntity, String> {

}

 

#6 Service 생성

package com.example.googlelogin.service;

import javax.transaction.Transactional;

import org.springframework.stereotype.Service;

import com.example.googlelogin.dto.UserDto;
import com.example.googlelogin.repository.UserRepository;

import lombok.RequiredArgsConstructor;

@RequiredArgsConstructor
@Service
public class UserService {
	
	private final UserRepository userRepository;
	
	@Transactional
	public String save(UserDto userDto) {
		return userRepository.save(userDto.toEntity()).getId();
	}
}

 

#7 Controller 생성

package com.example.googlelogin.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.googlelogin.dto.UserDto;
import com.example.googlelogin.service.UserService;

import lombok.RequiredArgsConstructor;

@RequiredArgsConstructor
@RestController
public class UserController {

	private final UserService userService;
	
	@CrossOrigin("http://localhost:3000")
	@PostMapping(value = "/api/v1/user", consumes = "application/json")
	public String save(@RequestBody UserDto userDto) {
		return userService.save(userDto);
	}
}

 

#8 application.properties 속성 추가

쿼리 실행 로그 출력 및 H2 콘솔 활성화 

# 쿼리 실행 로그 출력
spring.jpa.show-sql=true

# H2 웹 콘솔 활성화
spring.h2.console.enabled=true

 

#9 리액트 코드 수정

구글 로그인 성공 시 로그인 정보를 DB에 저장하는 서비스를 호출하는 기능을 추가

import React, { Component } from 'react';

class Login extends Component {

    componentDidMount() {
        this.googleSDK();
    }

    prepareLoginButton = () => {
        this.auth2.attachClickHandler(this.refs.googleLoginBtn, {},
            // 로그인 성공 시 로그인 정보 저장 서비스 호출
            (googleUser) => {
                // 저장할 데이터를 자바스크립트 객체로 생성
                let profile = googleUser.getBasicProfile();
                const data = { 
                    id: profile.getId(), 
                    name: profile.getName(), 
                    email: profile.getEmail(),
                    imageUrl: profile.getImageUrl(), 
                    token: googleUser.getAuthResponse().id_token
                };
                // 저장 서비스 주소
                const url = 'http://localhost:8080/api/v1/user';
                // JSON 형식의 데이터를 POST 방식으로 전달 
                fetch(url, {
                    method: 'POST', 
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(responseData => {
                    console.log(responseData);        
                });
            }, 
            // 로그인 실패
            (error) => { 
                alert(JSON.stringify(error, undefined, 2));
            });
    }

    googleSDK = () => {
        // 생략
    }

    render() {
        // 생략
    }
}

export default Login;

 

#10 테스트

저장 서비스 호출 결과(ID)가 로그로 출력되는지 확인

H2 콘솔 접속 (JDBC URL ≫ jdbc:h2:mem:testdb)

로그인 정보 저장 확인