[내일배움캠프_Spring Boot 심화주차] 소셜 로그인(OAuth), 카카오 로그인

소셜 로그인

소셜 로그인 탄생 배경

• 모든 웹 사이트에서 회원가입 과정을 거치는 것은 사용자에게 부담이 됨
• 매번 번거로운 회원가입 과정을 수행해야 할 뿐 아니라, 웹 사이트마다 다른 아이디와 비밀번호를 기억해야함
• 또한, 웹 사이트를 운영하는 측에서도 회원들의 개인정보를 지켜야하는 역할이 부담됨
• 이러한 문제를 해결하기 위해 OAuth를 사용한 소셜 로그인이 등장함

소셜 로그인 예시(왓챠)

OAuth

OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접근 위임을 위한 개방향 표준

• 사용자가 애플리케이션에게 모든 권한을 넘기지 않고 사용자 대신 서비스를 이용할 수 있게 해주는 HTTP 기반의 보안 프로토콜
• OAuth를 사용하는 서비스 제공자는 대표적으로 구글, 페이스북 등이 있음. 국내에는 대표적으로 카카오, 네이버 존재

카카오 로그인

카카오 로그인 과정

카카오 로그인 사용 승인 받기

1. 카카오 디벨로퍼스 접속 후 로그인

2. 상단에 앱 클릭 > 우측에 앱 생성 버튼 클릭

3. 앱 생성 모달 창 내에 정보 입력 후 저장 클릭

4. JavaScript SDK 도메인과 카카오 로그인 리다이렉트 URI 입력

• 카카오 로그인 리다이렉트 URI는 인가 토큰을 받을 리다이렉트 URI임

5. 메뉴 > 제품 설명 > 카카오 로그인 > 일반 클릭 후, 사용 설정 ON으로 변경

6. 메뉴 > 앱 > 앱 설정 > 앱 > 일반 > 비즈니스 정보의 개인 개발자 비즈 앱의 '카카오비즈니스 통합 서비스 약관 동의' 클릭

• 일반 앱이 아니라 비즈 앱으로 인정이 되어야만 카카오 이메일 계정 가져올 수 있음

7. 동의항목 설정

---

카카오 사용자 정보 가져오기

login.html 내 카카오 로그인 버튼 추가

<button id="login-kakao-btn" onclick="location.href='https://kauth.kakao.com/oauth/authorize?client_id={JAVASCRIPT_KEY}&redirect_uri=http://localhost:8080/api/user/kakao/callback&response_type=code'">
	카카오로 로그인하기
</button>

• JAVASCRIPT_KEY 키 추가

JavaScript 키

• 카카오 로그인 진행이 되면, Redirect URI(http://localhost:8080/api/user/kakao/callback)로 해당 요청(+인가 코드)이 리턴됨

리다이렉트 요청을 받을 로직

Controller 추가(UserController)

@Slf4j
@Controller
@RequiredArgsConstructor
@RequestMapping("/api")
public class UserController {

    private final UserService userService;
    private final FolderService folderService;
    private final KakaoService kakaoService;
    
    ...

    @GetMapping("/user/kakao/callback")
    public String kakaoLogin(@RequestParam String code, HttpServletResponse response) throws JsonProcessingException {
        String token = kakaoService.kakaoLogin(code);

        // 카카오 로그인 성공하면 template로 리다이렉트
        return "redirect:/";
    }
}

 

로직 처리할 Service 추가(KakaoService)

 

서비스에서는 실질적으로 인가 코드를 활용해서 토큰을 발급받고, 그 토큰을 사용해서 실제 사용자 정보 가져오고 최종적으로 회원가입 진행과 JWT 반환

• Kakao에서 동의항목 설정한 정보에 대한 DTO 추가

package com.sparta.myselectshop.dto;

import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@NoArgsConstructor
public class KakaoUserInfoDto {
    private Long id;
    private String nickname;
    private String email;

    public KakaoUserInfoDto(Long id, String nickname, String email) {
        this.id = id;
        this.nickname = nickname;
        this.email = email;
    }
}

• RestTemplate Bean 수동 등록을 위한 RestTemplateConfig 추가

package com.sparta.myselectshop.config;

import org.springframework.boot.web.client.RestTemplateBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.client.RestTemplate;

import java.time.Duration;

@Configuration
public class RestTemplateConfig  {
    @Bean
    public RestTemplate restTemplate(RestTemplateBuilder restTemplateBuilder) {
        return restTemplateBuilder
                // RestTemplate 으로 외부 API 호출 시 일정 시간이 지나도 응답이 없을 때
                // 무한 대기 상태 방지를 위해 강제 종료 설정
                .setConnectTimeout(Duration.ofMillis(5000)) // 5초
                .setReadTimeout(Duration.ofMillis(5000)) // 5초
                .build();
    }
}

• 인가 코드로 액세스 토큰 요청할 getToken 메서드 생성

private String getToken(String code) throws JsonProcessingException {
    // 요청 URL 만들기
    URI uri = UriComponentsBuilder
            .fromUriString("https://kauth.kakao.com")
            .path("/oauth/token")
            .encode()
            .build()
            .toUri();

    // HTTP Header 생성
    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

    // HTTP Body 생성
    MultiValueMap<String, String> body = new LinkedMultiValueMap<>();
    body.add("grant_type", "authorization_code");
    body.add("client_id", "본인의 REST API키"); // REST API 키 추가
    body.add("redirect_uri", "http://localhost:8080/api/user/kakao/callback");
    body.add("code", code);
    
    // Client Secret 키 추가
    body.add("client_secret", "본인의 Client Secret 코드");

    RequestEntity<MultiValueMap<String, String>> requestEntity = RequestEntity
            .post(uri)
            .headers(headers)
            .body(body);

    // HTTP 요청 보내기
    ResponseEntity<String> response = restTemplate.exchange(
            requestEntity,
            String.class
    );

    // HTTP 응답 (JSON) -> 액세스 토큰 파싱
    JsonNode jsonNode = new ObjectMapper().readTree(response.getBody());
    return jsonNode.get("access_token").asText();
}

• 토큰을 사용해 사용자 정보를 가져올 메서드 추가

private KakaoUserInfoDto getKakaoUserInfo(String accessToken) throws JsonProcessingException {
    // 요청 URL 만들기
    URI uri = UriComponentsBuilder
            .fromUriString("https://kapi.kakao.com")
            .path("/v2/user/me")
            .encode()
            .build()
            .toUri();

    // HTTP Header 생성
    HttpHeaders headers = new HttpHeaders();
    headers.add("Authorization", "Bearer " + accessToken);
    headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

    RequestEntity<MultiValueMap<String, String>> requestEntity = RequestEntity
            .post(uri)
            .headers(headers)
            .body(new LinkedMultiValueMap<>());

    // HTTP 요청 보내기
    ResponseEntity<String> response = restTemplate.exchange(
            requestEntity,
            String.class
    );

    JsonNode jsonNode = new ObjectMapper().readTree(response.getBody());
    Long id = jsonNode.get("id").asLong();
    String nickname = jsonNode.get("properties")
            .get("nickname").asText();
    String email = jsonNode.get("kakao_account")
            .get("email").asText();

    log.info("카카오 사용자 정보: " + id + ", " + nickname + ", " + email);
    return new KakaoUserInfoDto(id, nickname, email);
}

• Service 내 kakaoLogin 메서드

package com.sparta.myselectshop.service;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.sparta.myselectshop.dto.KakaoUserInfoDto;
import com.sparta.myselectshop.jwt.JwtUtil;
import com.sparta.myselectshop.repository.UserRepository;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpHeaders;
import org.springframework.http.RequestEntity;
import org.springframework.http.ResponseEntity;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.util.UriComponentsBuilder;

import java.net.URI;

@Slf4j(topic = "KAKAO Login")
@Service
@RequiredArgsConstructor
public class KakaoService {

    private final PasswordEncoder passwordEncoder;
    private final UserRepository userRepository;
    private final RestTemplate restTemplate; // RestTemplate은 RestTemplateBuilder를 통해서 생성(수동 등록)
    private final JwtUtil jwtUtil;

    public String kakaoLogin(String code) throws JsonProcessingException {
        // 1. "인가 코드"로 "액세스 토큰" 요청
        String accessToken = getToken(code); // 카카오 로그인을 통해 사용자 정보를 가져올 수 있는 토큰

        // 2. 토큰으로 카카오 API 호출 : "액세스 토큰"으로 "카카오 사용자 정보" 가져오기
        KakaoUserInfoDto kakaoUserInfo = getKakaoUserInfo(accessToken);

        return null;
    }

    private String getToken(String code) throws JsonProcessingException {
        ...
    }

    private KakaoUserInfoDto getKakaoUserInfo(String accessToken) throws JsonProcessingException {
        ...
    }

}

---

카카오 사용자 정보로 회원가입 구현

현재 회원(User) 테이블

컬럼명	컬럼타입	중복허용	설명
id	Long	X	테이블 ID(PK)
username	String	X	회원 ID
password	String	O	패스워드
email	String	X	이메일 주소
role	String	O	역할 1) 사용자: USER 2) 관리자: ADMIN

 

카카오로부터 받은 사용자 정보

• kakaoId
• nickname
• email

카카오 사용자 정보 JSON 예시

테이블 설계 옵션

1. 카카오 User를 위한 테이블(ex: KakaoUser) 하나 더 만들기

• 장점: 결합도가 낮아짐
  • 성격이 다른 유저 별로 분리 → 차후 각 테이블의 변화에 서로 영향을 주지 않음
  • ex) 카카오 사용자들만 profile_image 컬럼 추가해서 사용 가능
• 단점: 구현 난이도 올라감
  • ex) 관심상품 등록 시, 회원별로 다른 테이블을 참조해야 함
    - 일반 회원: User-Product
    - 카카오 회원: KakaoUser-Product

2. 기존 회원(User) 테이블에 카카오 User 추가

• 장점: 구현이 단순해짐
• 단점: 결합도가 높아짐
  • 폼 로그인을 통해 카카오 로그인 사용자의 username, password를 입력해서 로그인을 할 경우, 고려해야 할 부분이 많아짐

회원 테이블에 카카오 User 추가

컬럼명	컬럼타입	중복허용	설명	카카오 사용자
id	Long	X	테이블 ID(PK)	테이블 ID(PK)
username	String	X	회원 ID	nickname
password	String	O	패스워드	UUID(랜덤으로 생성한 문자열)
email	String	X	이메일 주소	email
role	String	O	역할 1) 사용자: USER 2) 관리자: ADMIN	"USER"로 고정
kakaoId	String(Nullable)	X	카카오 로그인 ID	kakaoId

카카오 사용자 정보로 회원가입 구현

흐름

회원가입 메서드 추가(필요 시에 진행)

• 인가 코드를 통해서 카카오 서비스에서 가져온 액세스 토큰으로 카카오 유저 정보 가져옴

public String kakaoLogin(String code) throws JsonProcessingException {
    // 1. "인가 코드"로 "액세스 토큰" 요청
    String accessToken = getToken(code); // 카카오 로그인을 통해 사용자 정보를 가져올 수 있는 토큰

    // 2. 토큰으로 카카오 API 호출 : "액세스 토큰"으로 "카카오 사용자 정보" 가져오기
    KakaoUserInfoDto kakaoUserInfo = getKakaoUserInfo(accessToken);

    // 3. 필요시에 회원가입
    User kakaoUser = registerKakaoUserIfNeeded(kakaoUserInfo);

    // 4. JWT 토큰 반환
    String createToken = jwtUtil.createToken(kakaoUser.getUsername(), kakaoUser.getRole());

    return createToken;
}

private User registerKakaoUserIfNeeded(KakaoUserInfoDto kakaoUserInfo) {
    // DB 에 중복된 Kakao Id 가 있는지 확인
    Long kakaoId = kakaoUserInfo.getId();
    User kakaoUser = userRepository.findByKakaoId(kakaoId).orElse(null);

    if (kakaoUser == null) {
        // 카카오 사용자 email과 동일한 email 가진 회원이 있는지 확인
        // ex) aaa.kakao.com으로 직접 회원가입 진행한 후, 추후에 카카오 소셜 로그인으로 회원가입 진행하는 경우
        String kakaoEmail = kakaoUserInfo.getEmail();
        User sameEmailUser = userRepository.findByEmail(kakaoEmail).orElse(null);
        if (sameEmailUser != null) {
            kakaoUser = sameEmailUser;
            // 기존 회원정보에 카카오 Id 추가
            kakaoUser = kakaoUser.kakaoIdUpdate(kakaoId);
        } else {
            // 신규 회원가입
            // password: random UUID
            String password = UUID.randomUUID().toString();
            String encodedPassword = passwordEncoder.encode(password);

            // email: kakao email
            String email = kakaoUserInfo.getEmail();

            kakaoUser = new User(kakaoUserInfo.getNickname(), encodedPassword, email, UserRoleEnum.USER, kakaoId);
        }

        userRepository.save(kakaoUser);
    }
    return kakaoUser;
}

• User 엔티티에 카카오 User 추가

@Entity
@Getter
@Setter
@NoArgsConstructor
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false, unique = true)
    private String username;

    @Column(nullable = false)
    private String password;

    @Column(nullable = false, unique = true)
    private String email;

    @Column(nullable = false)
    @Enumerated(value = EnumType.STRING)
    private UserRoleEnum role;

    private Long kakaoId;

    public User(String username, String password, String email, UserRoleEnum role) {
        this.username = username;
        this.password = password;
        this.email = email;
        this.role = role;
    }

    public User(String username, String password, String email, UserRoleEnum role, Long kakaoId) {
        this.username = username;
        this.password = password;
        this.email = email;
        this.role = role;
        this.kakaoId =kakaoId;
    }

    public User kakaoIdUpdate(Long kakaoId) {
        this.kakaoId = kakaoId;
        return this;
    }
}

• 토큰을 쿠키에 직접 넣어주기

@Slf4j
@Controller
@RequiredArgsConstructor
@RequestMapping("/api")
public class UserController {

    private final UserService userService;
    private final FolderService folderService;
    private final KakaoService kakaoService;

    @GetMapping("/user/kakao/callback")
    public String kakaoLogin(@RequestParam String code, HttpServletResponse response) throws JsonProcessingException {
        String token = kakaoService.kakaoLogin(code);

        Cookie cookie = new Cookie(JwtUtil.AUTHORIZATION_HEADER, token.substring(7)); // 순수한 쿠키(Bearer 없애기)
        cookie.setPath("/");
        response.addCookie(cookie);

        // 카카오 로그인 성공하면 template로 리다이렉트
        return "redirect:/";
    }
}