OAuth 2.0 인증하기 : 카카오

회원가입을 위해, 먼저 카카오 인증을 구현해보자!

1. 카카오 개발자 앱 등록

앱을 등록하고, 카카오 로그인 의 상태를 ON 으로 바꿔준다. OpenID Connect 활성화 설정을 고민해봐야 하는데, 일단은 Off(기본값)으로 해두고 필요하면 On으로 바꿔주자.

2. Redirect URI 설정

Redirect URI 설정은 굉장히 중요하다! 지금은 임의의 백엔드 주소로 설정해두었지만, 테스트 단계가 지나고 프론트와 연결하게 된다면 프론트 주소로 바꿔주어야 한다.
쉽게 말하면, 글쓴이의 주소를 그대로 따라 쓰지 않아도 된다는 말이다. 이 부분은 뒤에서 더 자세히 다루겠다.

3. 테스트

이제 테스트를 해보자. 가장 먼저 테스트할 것은, 인증코드 받기 이다.
확장성을 위해, 카카오 말고도 다른 provider 를 사용할 경우를 생각해서 @PathVariable 을 통해 메서드를 만든다.

@RestController
@Slf4j
@RequiredArgsConstructor
@RequestMapping("/api/oauth")
public class OAuthController {
	
	private final OAuthService oAuthService;
	
	@GetMapping("/{provider}/url") 
	@Operation(summary = "로그인 url 요청", description = "카카오 url을 요청합니다")
	@ApiResponse(responseCode = "200", description = "요청 성공")
	@ApiResponse(responseCode = "400", description = "요청 실패")
	public ResponseEntity<String> getLoginUrl(@PathVariable("provider") String provider) {
		String loginUrl = oAuthService.buildAuthUrl(provider);
		return ResponseEntity.ok(loginUrl);
	}
}

@Service
public class OAuthService {

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

	@Value("${spring.security.oauth2.client.registration.kakao.redirect-uri}")
	private String kakaoRedirectUri;

	public String buildAuthUrl(String provider) {
		// provider에 따라 clientId와 redirectUri 설정
		if ("kakao".equals(provider)) {
			System.out.println(
					"\"https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=\" + clientId + \"&redirect_uri=\" + redirectUri");
			return "https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=" + kakaoClientId
					+ "&redirect_uri=" + kakaoRedirectUri;
		}
		// 기타 처리
		return "error";
	}
}

  security:
    oauth2:
      client:
        registration:
          kakao:
            client-id: 클라이언트아이디
            client-secret: 클라이언트 비밀번호
            redirect-uri: "https://localhost:8080/login/oauth2/code/kakao"
            authorization-grant-type: authorization_code
            scope: 내가 요청한 권한에 맞게 작성
            client-name: Kakao
            provider: kakao

        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id  

이렇게 만들어준다.

포스트맨으로

GET : http://localhost:8080/api/oauth/kakao/url

요청을 보낸다.

200 OK 신호는 떴지만, 이상한 값이 찍히는 걸 알 수 있다.
자세히보면, html 파일이 반환되었음을 알 수 있다. 이를 검색창에서 실행해 보면

이런식으로 잘 나오는 것을 알 수 있다.
확인하고 계속하기 를 누르면, 아래의 창으로 이동하는데, 여기서 code 값만 따오면 된다.