24.02.09

어제 계속 인가코드를 code 파라미터로 받으려고 하면서 파라미터가 존재하지 않는다는 에러가 발생해서 파라미터가 왜 전달되지 않고있을까를 고민했다

카카오 로그인을 구현하기 위해서는 클라이언트 측과 서버 측 모두의 코드가 필요하며
클라이언트 측에서는 사용자가 카카오 로그인 버튼을 클릭하면 카카오 인증 서버로부터 인가코드를 받을 수 있도록 설정되어야 한다
이 인가코드는 클라이언트에서 서버로 전달되어야 하고 서버는 이 인가코드를 이용하여 카카오로부터 액세스 토큰을 요청하고 사용자 정보를 얻어와야 한다 라는 내용을 보고 리다이렉트를 받는 controller를 생성했다

그러나 서버 측에서는 인가코드를 받아 처리하는 코드가 필요합니다. 앞서 제공한 KakaoController의 코드를 이용하여 서버 측에서 인가코드를 받아 처리할 수 있습니다. 클라이언트에서 리디렉션된 '/login/kakao/callback' 엔드포인트로 인가코드가 전달되고, 해당 엔드포인트에서는 인가코드를 받아 처리하는 코드가 있어야 합니다.

따라서 클라이언트와 서버 간의 통신을 통해 카카오 로그인을 구현할 수 있습니다. 클라이언트에서는 사용자 인가코드를 받아와 서버로 전달하고, 서버에서는 해당 인가코드를 받아 카카오로부터 액세스 토큰을 요청하고 사용자 정보를 가져오는 과정을 거치면 됩니다.

KakaoRedirectController.java

@Controller
public class KakaoRedirectController {

	//카카오 로그인 요청 시 사용자를 리디렉션하는 컨트롤러 생성
	 private static final String KAKAO_AUTH_URL = "https://kauth.kakao.com/oauth/authorize";
	    private static final String CLIENT_ID = "000000";
	    private static final String REDIRECT_URI = "http://localhost:8080/home/home-list-view";

	    @GetMapping("/login/kakao")
	    public String kakaoLogin() {
	        return "redirect:" + KAKAO_AUTH_URL
	                + "?client_id=" + CLIENT_ID
	                + "&redirect_uri=" + REDIRECT_URI
	                + "&response_type=code";
	    }
}

/login/kakao 엔드포인트로 요청이 들어오면 카카오 로그인 페이지로 리다이렉션하고
사용자가 로그인 후에는 /login/kakao/callback 엔드포인트로 카카오에서 인가 코드를 전달하게 된다

/login/kakao로 요청을 했더니 앱 관리자 설정 오류 (KOE101) 가 발생했다

앱 키는 오타 없이 잘 썼다고 생각했는데..
뭔가 내가 모르고있는게 있나 싶어서 서칭 해봤다

(KOE101)이 코드는 CLIENT_ID에 해당하는 값에 문제가 있는 것이고
CLIENT_ID에는 앱의 REST API KEY를 사용해야 하며
CLIENT SECRET은 또 다른 값을 사용해야한다는 것이다

kakao developers에서
내 어플리케이션 > 제품 설정 > 카카오 로그인 > 보안 으로 가면
client secret 코드를 발급 받을 수 있다

앱 키값들을 수정 해주니 /login/kakao 요청에서 나타났던 에러는 사라졌다
하지만 /login/kakao/callback 요청에서는 여전히 code 파라미터가 넘어가지 않는 에러가 있었다

찾아보다가 내가 사용자 정보 가져오는 코드를 작성하지 않았다는 것을 알아서 추가해줬다

<script>
//카카오 로그인 코드 확인(버튼 누르면 메소드실행-> 카카오auth서버로 이동해 로그인화면으로 진입)
function loginWithKakao() {
    //인가코드 받기
	Kakao.Auth.authorize({
	      redirectUri: 'http://localhost:8080/home/home-list-view',
	      state: 'userme',
	    });
	  }

//사용자 정보 가져오기
function requestUserInfo() {
	Kakao.API.request({
	   url: '/v2/user/me',
	})
	.then(function(res) {
	   alert(JSON.stringify(res));
	})
	 .catch(function(err) {
	   alert(
	     'failed to request user information: ' + JSON.stringify(err)
	 	 );
	  });
  }
</script>