[OneStack]팀 프로젝트 개발 과정 - OAuth2 소셜 로그인

본 프로젝트 개발자 과정 학원의 파이널 프로젝트 기획, 개발, 배포 과정을 담고 있습니다. 

 

OneStack

 

---

1. 소셜 로그인이 필요한 이유

소셜 로그인은 사용자의 편의성을 높이고 보안을 강화하는 중요한 기능이다.

이를 통해 다음과 같은 장점을 얻을 수 있다.

• 사용자 편의성: 별도의 회원가입 없이 기존 계정으로 빠르게 로그인할 수 있다.
• 신뢰성 향상: 검증된 플랫폼의 인증 시스템을 활용할 수 있다.
• 개발 효율성: 보안 인증 로직을 외부 플랫폼에 위임할 수 있어 유지보수가 용이하다.

2. 전체 로그인 프로세스

소셜 로그인 구현에 앞서 전체적인 로그인 프로세스를 살펴보자.

1. 사용자가 카카오 또는 구글 계정을 이용해 로그인 요청을 보낸다.
2. OAuth2 인증 과정을 거쳐 액세스 토큰을 발급받는다.
3. 액세스 토큰을 이용해 사용자 정보를 가져온다.
4. 신규 회원인지 기존 회원인지 판별하여 처리한다.
5. 세션을 생성하고 클라이언트에게 인증 정보를 반환한다.

 

3. 카카오 로그인 구현

3.1 카카오 로그인 컨트롤러

@Value("${kakao.client-id}")
private String kakaoClientId;

@Value("${kakao.redirect-uri}")
private String kakaoRedirectUri;

@PostMapping("/login/kakao")
public ResponseEntity<?> kakaoLogin(@RequestParam String code) {
    String accessToken = kakaoAuthService.getAccessToken(code);
    User user = kakaoAuthService.getUserInfo(accessToken);
    return ResponseEntity.ok(user);
}

🔹 코드 설명

• @Value 어노테이션을 사용해 API 키를 환경 변수로 관리한다.
• 인증 코드로 액세스 토큰을 발급받은 후 사용자 정보를 가져온다.
• 신규 회원과 기존 회원을 구분해 처리하는 로직을 포함하고 있다.

3.2 카카오 API 호출 메소드

public String getAccessToken(String code) {
    RestTemplate restTemplate = new RestTemplate();
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);

    MultiValueMap<string, string=""> params = new LinkedMultiValueMap<>();
    params.add("grant_type", "authorization_code");
    params.add("client_id", kakaoClientId);
    params.add("redirect_uri", kakaoRedirectUri);
    params.add("code", code);

    HttpEntity<multivaluemap<string, string="">> request = new HttpEntity<>(params, headers);
    ResponseEntity response = restTemplate.postForEntity("https://kauth.kakao.com/oauth/token", request, Map.class);
    return response.getBody().get("access_token").toString();
}</multivaluemap<string,></string,>

🔹 코드 설명

• RestTemplate을 활용해 카카오 API와 통신한다.
• 토큰 요청과 사용자 정보 요청을 분리해 가독성을 높였다.
• HTTP 요청 헤더와 파라미터를 명확하게 설정해 API 호출 오류를 최소화했다.

4. 구글 로그인 구현

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
        .oauth2Login()
        .userInfoEndpoint()
        .userService(customOAuth2UserService);
    return http.build();
}

🔹 코드 설명

• Spring Security OAuth2를 활용해 구글 로그인을 구현했다.
• OAuth2 인증을 처리하는 customOAuth2UserService를 등록했다.
• 신규 회원 가입 시 임시 비밀번호를 안전하게 생성하고 암호화해 저장한다.

5. 회원 정보 통합 관리

🔹 설계 포인트

• 일반 회원과 소셜 로그인 회원을 하나의 테이블에서 통합 관리한다.
• isSocial 및 socialType 필드를 사용해 회원 유형을 구분한다.
• 소셜 로그인 사용자의 프로필 이미지를 함께 저장해 사용자 경험을 향상시킨다.

6. 보안 강화를 위한 인터셉터

🔹 보안 특징

• 로그인 상태와 회원 상태를 철저하게 검증해 보안을 강화했다.
• 회원 상태별(비활성화, 정지, 탈퇴 등) 접근 제어를 수행한다.
• 최신 회원 정보를 DB에서 조회하여 세션 정보와 비교함으로써 세션 하이재킹을 방지한다.

7. 내 로그인 코드의 특별한 점

✅ 유연한 회원 관리

• 일반/소셜 회원을 통합 관리하여 코드 중복을 최소화했다.
• 새로운 소셜 로그인 추가가 쉬운 확장성 있는 구조로 설계했다.

✅ 철저한 예외 처리

• 단계별 상세한 에러 로깅으로 문제 추적이 용이하다.
• 사용자 친화적인 에러 메시지를 제공해 UX를 향상시켰다.

✅ 강력한 보안

• 인터셉터를 활용한 세밀한 접근 제어로 보안을 강화했다.
• 회원 상태에 따른 차별화된 처리로 시스템 안정성을 높였다.
• 임시 비밀번호 생성 및 암호화로 소셜 계정도 안전하게 관리한다.

✅ 최적화된 사용자 경험

• 소셜 플랫폼의 프로필 이미지를 활용해 사용자 경험을 향상시켰다.
• 신규/기존 회원을 자동으로 구분하여 불필요한 회원가입 단계를 최소화했다.

8. 마무리 및 구현 팁

🔹 환경 변수 활용

• API 키와 시크릿은 반드시 환경 변수로 관리해야 한다.
• application.properties 또는 환경별 설정 파일에서 분리해 저장하면 편리하다.

🔹 예외 처리의 중요성

• 외부 API 호출은 항상 예외 처리를 철저히 해야 한다.
• 로깅을 활용하여 오류 추적이 가능하도록 구현하는 것이 좋다.

🔹 회원 데이터 설계

• 소셜 로그인 사용자와 일반 사용자를 통합 관리하면 코드가 단순해진다.
• socialType 필드를 명확하게 구분하여 추후 확장성을 고려해야 한다.

🔹 세션 관리

• 소셜 로그인 후 세션 정보를 적절히 저장하고 관리하는 것이 중요하다.
• 인터셉터를 활용하여 로그인 상태를 체크하면 보안을 강화할 수 있다.

이런 점들을 고려해 구현하면 안정적이고 사용자 친화적인 소셜 로그인 시스템을 만들 수 있다.

다음 포스팅에서는 프론트엔드에서 소셜 로그인 버튼을 어떻게 구현하는지 다뤄보도록 하겠다! 🚀

🔗 참고 자료

• 카카오 로그인 API 문서
• 구글 OAuth2 가이드
• Spring Security OAuth2 문서