24.02.20

서린·2024년 2월 20일

혼자개발

목록 보기
49/82

어제 카카오 로그인 과정을 다시 공부했고 공부한 것을 바탕으로 처음부터..
차근차근 해보기로 했다

먼저 로그인 버튼 만들고
signIn.jsp

<%--카카오 로그인 버튼 --%>
<div class="d-flex justify-content-center mt-4">
	<a id="kakao-login-btn" href="https://kauth.kakao.com/oauth/authorize?client_id=1f9ba23620000000000331eb10&redirect_uri=http://localhost:8080/kakao/callback&response_type=code">
		<img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" height="45" width="auto" alt="카카오 로그인 버튼">
	</a>
</div>

KakaoController.java

@Controller
@RequestMapping("/kakao")
public class KakaoController {

@ResponseBody
@GetMapping("/callback")
public String kakaoCallback(String code) { //data를 리턴해주는 컨트롤러 함수
    return "카카오 인증 완료 : 코드값 : code";
	}
}

카카오 인증은 완료 되었고
받아온 코드값을 통해서 accesstoken을 부여 받기 위한 코드를 작성한다
자원서버에 접근 할 수 있도록!

토큰 발급 요청 주소는 POST방식을 사용한다
Http body에 데이터를 전달할 것이기 때문에 (get방식인)쿼리 스트링으로 데이터를 전달하지 않는다
4가지 필수 데이터를 담아야 한다
MIME 타입 : application/x-www-form-urlencoded;charset=utf-8 (데이터를 key=value형태로 담아서 전달하라는 뜻)

KakaoController.java

@Controller
@RequestMapping("/kakao")
public class KakaoController {
	
	@ResponseBody
	@GetMapping("/callback")
	public String kakaoCallback(String code) { //data를 리턴해주는 컨트롤러 함수
		
		//POST 방식으로 key=value 데이터를 요청해야함 (카카오쪽으로)
		//Retrofit2(안드로이드)
		//OkHttp
		//RestTemplate
		
		RestTemplate rt = new RestTemplate();
		
		//HttpHeader 오브젝트 생성
		HttpHeaders headers = new HttpHeaders();
		headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
		
		//HttpBody 오브젝트 생성
		MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
		params.add("grant_type", "authorization_code");
		params.add("client_id", "1f9ba236274cc877d8d549827331eb10");
		params.add("redirect_uri", "http://localhost:8080/kakao/callback");
		params.add("code", code);
		
		//HttpHeader 와 HttpBody를 하나의 오브젝트에 담기
		HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest = 
				new HttpEntity<>(params, headers);
		
		//Http요청하기 - Post 방식으로-그리고 response 변수의 응답 받음
		ResponseEntity<String> response = rt.exchange(
			"https://kauth.kakao.com/oauth/token",
			HttpMethod.POST,
			kakaoTokenRequest,
			String.class
		);
		
		return "카카오 토큰요청 완료 : 토큰 요청에 대한 응답 :" + response;
		
	}

이렇게 작성하고 카카오 로그인 요청을하면 응답이 아래처럼 나타난다

여기서 response key들을 json parser로 복사하면

accesstoken을 가져온 것을 볼 수 있다
이제 카카오 로그인을 한 사용자의 정보에 접근할 수 있는 권한을 가지는 accesstoken 요청까지 완료 되었다

0개의 댓글