[TIL]2025.04.29

1. 구글 Oauth 2.0 소셜 로그인 무작정 따라하기!

---

1. User Entity 작성

가장 먼저 회원 정보를 저장할 Usuer 엔티티를 만들어야 겠죠?
우리는 엔티티를 수 없이 만들어 보았으니, 금방 작성 하실거에요!

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
@Builder
@Entity
@Table(name = "users")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false, unique = true)
    private String email; // 구글로부터 받은 이메일

    @Column(nullable = false)
    private String password; // 소셜 로그인은 고정 패스워드 사용

    @Column(nullable = false)
    private String nickname; // 닉네임 (랜덤 생성)
}

---

2. Repository 작성

스탭 2!
이메일로 회원을 조회하거나 저장할 인터페이스 설계!

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByEmail(String email); // 이메일로 회원 조회
}

---

3. Service 작성

이메일로 기존 회원을 찾고, 없으면? 자동가입을 시켜준다~

@Service
@RequiredArgsConstructor
public class UserServiceImpl {

    private final UserRepository userRepository;

    // 이메일로 회원을 찾고, 없으면 새로 가입시킴
    public User registerIfNeed(String email) {
        return userRepository.findByEmail(email)
                .orElseGet(() -> {
                    User newUser = User.builder()
                            .email(email)
                            .password("SOCIAL_LOGIN") // 고정 패스워드
                            .nickname("구글유저_" + UUID.randomUUID().toString().substring(0, 8))
                            .build();
                    return userRepository.save(newUser);
                });
    }
}

---

4. Controller 작성

로그인 성공 시 이탈할 Controller도 작성합니다.

@Controller
@RequiredArgsConstructor
public class LoginSuccessController {

    private final UserServiceImpl userService;

    @GetMapping("/login/success")
    public String oauthSuccess(@AuthenticationPrincipal OAuth2User oAuth2User) {
        // 1. 구글 로그인 완료 후 사용자 정보 가져오기
        String email = oAuth2User.getAttribute("email");

        // 2. 이메일로 회원가입 or 로그인 처리
        User user = userService.registerIfNeed(email);

        // 3. 로그인 성공 후 리다이렉트 (프론트 화면 경로)
        return "redirect:/welcome.html"; // 원하는 경로로 변경 가능
    }
}

---

5. SecurityConfig 작성

Config 설정은 어려울 수 있어요! 차근차근 진행 해 보자구요?

@Configuration
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeHttpRequests(authorize -> authorize
                .requestMatchers("/", "/login/**").permitAll()
                .anyRequest().authenticated()
            )
            .oauth2Login(oauth2 -> oauth2
                .defaultSuccessUrl("/login/success") // 로그인 성공 시 이동할 URL
            );

        return http.build();
    }
}

---

6. application.properties 작성

이제 코드 작성은 끝! properties에 아래 내용을 붙여 넣어주세요!

spring.security.oauth2.client.registration.google.client-id=YOUR_GOOGLE_CLIENT_ID
spring.security.oauth2.client.registration.google.client-secret=YOUR_GOOGLE_CLIENT_SECRET
spring.security.oauth2.client.registration.google.scope=email,profile

spring.security.oauth2.client.provider.google.authorization-uri=https://accounts.google.com/o/oauth2/v2/auth
spring.security.oauth2.client.provider.google.token-uri=https://oauth2.googleapis.com/token
spring.security.oauth2.client.provider.google.user-info-uri=https://www.googleapis.com/oauth2/v2/userinfo

YOUR_GOOGLE_CLIENT_ID와 YOUR_GOOGLE_CLIENT_SECRET이 뭐냐구요?


그렇군요. 여기 까지 온 당신! 이제 인터넷을 켜세요!

---

7. Google Oauth 설정

이제 구글 서버에 우리 서비스를 등록해서, 인증기능을 사용하기 위한 설정을 진행합니다!

1. 구글 클라우드 접속 → https://console.cloud.google.com/

2. 좌 상단의
   

프로젝트 선택 클릭

3. 우측의 새 프로젝트 클릭
   

4. 프로젝트 이름 입력 후 만들기
   

5. 2번 프로젝트 선텍 클릭 후 만든 프로젝트로 진입

6. 좌 상단의 햄버거 버튼 클릭 → API 및 서비스 -> OAuth 클릭
   

7. 시작 하기
   

8. 앱 이름, 이메일 작성 후 다음
   

9. 대상 외부
   

10. 나머지 정보 작성 후 만들기
    

11. 클라이언트 → 클라이언트 만들기
    

12. 내용 작성합니다!
    
    

13. 만든 클라이언트 클릭!
    

14. 클라이언트 ID와 보안 비밀번호 복사
    

15. application.properties에 ID와 비밀번호 작성

• 클라이언트 ID

spring.security.oauth2.client.registration.google.client-id=YOUR_GOOGLE_CLIENT_ID

• 보안 비밀번호

spring.security.oauth2.client.registration.google.client-secret=YOUR_GOOGLE_CLIENT_SECRET

2. 위치기반 API - Kakao MAP 무작정 따라하기!

위치 정보를 가져오기 위해 외부 API(카카오맵 API)를 사용합니다.

---

1. RestTemplate 설정

외부 API 서버(카카오)에 요청을 보내기 위한 기본 설정!

@Configuration
public class RestTemplateConfig {

    @Bean
    public RestTemplate restTemplate() {
        return new RestTemplate();
    }
}

---

2. KakaoAddressClient 작성

카카오맵 서버에 좌표(x, y)를 보내고, 주소를 받아오는 역할이에요

@Component
@RequiredArgsConstructor
public class KakaoAddressClient {

    private final RestTemplate restTemplate;

    @Value("${kakao.rest-api-key}")
    private String kakaoApiKey;

    // 좌표(x, y)를 받아 주소를 요청하는 메서드
    public String getAddress(double longitude, double latitude) {
        String url = "https://dapi.kakao.com/v2/local/geo/coord2address.json?x=" + longitude + "&y=" + latitude;

        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "KakaoAK " + kakaoApiKey);

        HttpEntity<Void> request = new HttpEntity<>(headers);

        ResponseEntity<String> response = restTemplate.exchange(
                url,
                HttpMethod.GET,
                request,
                String.class
        );

        return response.getBody(); // 그대로 JSON String 리턴
    }
}

---

3. RegionService 작성

KakaoAddressClient를 이용해 비즈니스 로직을 처리합니다.

@Service
@RequiredArgsConstructor
public class RegionService {

    private final KakaoAddressClient kakaoAddressClient;

    // 위도, 경도를 받아서 주소 문자열을 반환하는 메서드
    public String getAddress(double longitude, double latitude) {
        return kakaoAddressClient.getAddress(longitude, latitude);
    }
}

---

4. RegionController 작성

API 엔드포인트를 만들어, 프론트 요청을 받습니다.

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/region")
public class RegionController {

    private final RegionService regionService;

    @GetMapping("/address")
    public ResponseEntity<String> getAddress(@RequestParam double longitude, @RequestParam double latitude) {
        // ex) /api/region/address?longitude=126.9780&latitude=37.5665
        String address = regionService.getAddress(longitude, latitude);
        return ResponseEntity.ok(address);
    }
}

---

5. application.properties 작성

카카오 REST API 키를 등록합니다.

# 카카오 REST API 키 입력
kakao.rest-api-key=YOUR_KAKAO_REST_API_KEY

---

6. 카카오 REST API 키 발급 방법

카카오맵 API를 사용하려면 키를 발급받아야 합니다.

[진행 순서]

1. 카카오 개발자 사이트 접속 → https://developers.kakao.com/

2. 로그인 후, 상단 시작하기 클릭!
   

3. "애플리케이션 추가하기" 클릭
   

4. 내용을 작성하고, 저장!
   

5. 좌측 메뉴 → 플랫폼 → 웹(Web) 등록
   (http://localhost:8080)

   주의: 플랫폼(Web) 등록을 안 하면 CORS 오류나 인증 오류가 발생할 수 있습니다.

6. 좌측 메뉴 → 카카오맵 → 활성화 ON
   

7. "앱 키" 탭에서 "REST API 키" 복사

8. application.properties에 복사한 키 붙여넣기

여기까지 왔다면...

축하합니다!

여러분은 혼자서도 소셜로그인와 위치기반 API를 사용 할 수 있게 되었습니다!!