24.03.13 #64일차 (카카오 로그인 API 구현 성공)

신규섭·2024년 3월 13일

API OAuth 2.0 SDK

개인 프로젝트

목록 보기

11/20

갑작스런 오류

카카오 로그인 기능을 구현하려고 카카오 개발자 페이지에서 로그인 기능 활성화를 하고
테스트 겸 프로젝트가 잘 작동하는지 확인하려고 서버를 켰는데

어? 너 뭐하는?

프로젝트 홈으로 갔더니 대뜸 로그인을 하라고 해서 이게 뭐지 싶었다.

찾아보니 Spring Security 와 관련된 로그인 페이지 같은데 어제 스포티파이 API 관련해서 pom.xml 파일을 만졌던게 문제같다.

pom.xml 파일을 백업 파일로 대체하니 정상적으로 프로젝트 홈으로 이동

Spring Security

카카오 로그인 API 구현 성공

과정

Spotify API로 재생 플레이어를 불러오려면 OAuth 2.0 인증이 필요했는데 바로 따라하기 어려웠고
마침 카카오 로그인 API는 OAuth 2.0 기반의 소셜 로그인 서비스 였고 설명도 보다 자세했으며 무엇보다 한국어로 되어있는게 이렇게 편할줄이야..

그리고 소프트웨어 개발 키트(SDK)와 OAuth 인증 후 인가 코드, 토큰 등을 구현을 하며 겪은 과정을 남겨보려고 한다.

1. 첫번째 시도

첫 시도는 REST API를 이용해보았는데 카카오 로그인 API 이곳을 참고하여 따라해 보려고 했다.

카카오 개발자 앱은 지도 API를 이용할때 만들어놨으니 카카오 로그인 기능 활성화, Redirect URI만 등록했다.

Redirect URI는 인증을 하고 Code를 받을 주소를 말한다. 후에 다시 설명 하겠지만 여기에서 많이 헤맸다.

인증에 필요한 유저의 개인정보 동의 항목도 설정을 해주면 본격적으로 구현할 준비가 끝난다.

REST API를 이용한 카카오 로그인 과정은 이렇게 된다

크게 3가지 Step으로 나뉘는데

인가 코드 받기

토큰 받기

사용자 정보 가져오기를 통한 로그인 처리

우선 나는 첫걸음인 인가 코드 받기부터 시간을 정말 많이 소비했다.

이 예제처럼 무작정 메서드도 만들고 어떤 방식으로 요청이 전달되고 받아오는지 전혀 모르고 있었다.

결국 몇시간동안 의미없이 헤매다가 REST API의 방식으로는 이해조차 힘들것 같아서 Javascript를 이용하는 방식으로 바꿔보기로 했다.

2. 두번째 시도

애초에 내가 뭘 모르는지 모르는 상태였고 구글링과 GPT에게 물어보고 내가 어떤걸 알아야 하는지부터 공부했다.

Javascript를 활용하려면 소프트웨어 개발 키트 즉 SDK를 설치해야 했다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.0/kakao.min.js" integrity="sha384-l+xbElFSnPZ2rOaPrU//2FF5B4LB8FiX5q4fXYTlfcG4PGpMkE1vcL7kNXI6Cci0" crossorigin="anonymous"></script>
  <script>
    // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해야 합니다.
    Kakao.init('4f69b55c9c466f91d08d33415d35266a');

    // SDK 초기화 여부를 판단합니다.
    console.log(Kakao.isInitialized());
  </script>

설치 후 초기화가 필요했고 초기화가 잘 됐다면 console에 true가 출력이 된다.

출력 확인 후 본격적으로 준비가 끝났고 구현만 하면 된다.

첫번째로 카카오 API 기능인 Kakao.Auth.authorize()함수를 호출하여 간편로그인을 요청해야 했다.

여기서부터 헷갈렸는데 Kakao.Auth.authorize() 함수를 실행하여 여기로 보내면 코드를 주는건가 싶었고

그저 비슷하게 따라 할 뿐이었고 그 결과는 각종 오류가 나를 반겨주었다.

<a id="kakao-login-btn" href="javascript:loginWithKakao()">
  <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222"
    alt="카카오 로그인 버튼" />
</a>
<p id="token-result"></p>

<script>
  function loginWithKakao() {
    Kakao.Auth.authorize({
      redirectUri: 'http://localhost:8081/usr/home/KakaoLoginAPI',
    });
  }
  

</script>

kakao 로그인 (javascript)를 참고하여 로그인 버튼을 만들고 설정할때 등록했던 Redirect URI를 Kakao.Auth.authorize() 함수 내부에 입력해주었다.

나온다!!

하지만 여기에서 문제 발생.

Redirect URI 이게 뭐하는 녀석인지 전혀 몰랐다.
Redirect URI에 현재 로그인 페이지와 동일한 주소를 입력하고 있었고 이걸 몰랐던 나는 동의하고 계속하기를 누르면 다시 이전 페이지로 돌아가는 무한 루프 현상이 발생했다.

구글링 결과
로그인에 성공하면 다른 페이지로 돌아가야 하는데 그 돌아갈 페이지의 주소가 redirect_uri 입니다

이걸 알기까지 몇시간이 걸렸다ㅋㅋ

사실 카카오 공식 페이지에도 알려주고 있었고 다른곳도 알려주고 있었는데 스스로 이해하지 못했던 것이었다.

여기 이후부터는 간단한 오류 몇개 빼고는 잘 흘러갔다.

새로운 페이지를 생성하고 Redirect URI로 새로운 페이지와 연결 시켜주었다.

	@RequestMapping("/usr/home/KakaoLogin")
	public String KakaoLoginAPI(@RequestParam String code, Model model) {
		System.err.println("code name : " + code);
		
		model.addAttribute("code", code);
		
		return "/usr/home/KakaoLogin";
	}

파라미터로 인가 코드를 받아주고 이 코드를 로그인 후의 페이지에 넘겨주었다.

<div> ${code } </div>로 코드가 잘 넘어오는지 확인

다음으로 서비스 서버에서 인가 코드를 사용해 REST API로 토큰 받기를 요청하여 로그인을 완료해야 하고 인가 코드만으로는 로그인 할 수 없다.

POST로 요청할 파라미터

<script>
    var codetext = `${code }`;

    $.ajax({
        type : "POST"
        , url : 'https://kauth.kakao.com/oauth/token'
        , data : {
            grant_type : 'authorization_code',
            client_id : '7381a40d2ee391d72b200979558a901a',
            redirect_uri : 'http://localhost:8081/usr/home/KakaoLogin',
            code : codetext
        }
        , contentType:'application/x-www-form-urlencoded;charset=utf-8'
        , success : function(response) {
            Kakao.Auth.setAccessToken(response.access_token);
            document.querySelector('button.api-btn').style.visibility = 'visible';
        }
        ,error : function(jqXHR, error) {
        }
    });
</script>

Ajax 방식으로 토큰 받기를 시도했고 다른곳에서는 문제가 없어보이는데 code : codetext 이 부분에서 바로 ${code }를 넣었더니 오류가 났다.

백틱 문제였고 수정 후 다시 요청하니 더이상 오류는 발생하지 않았다.

오류는 나오지 않는데 성공을 한건지 의문이 들었고 테스트를 위해 현재 로그인한 유저의 사용자 정보를 가져와 보기로 했다.

<script>
    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>

사용자 정보를 가져올 함수를 작성하고 버튼과 연결하여 나오는지 확인 해보았다.

^-^v

alert으로 잘 나오는걸 확인했고 마지막으로 로그아웃 기능도 추가해보았다.

<script>
    function kakaoLogout() {
        Kakao.API.request({
          url: '/v1/user/unlink',
        })
          .then(function(response) {
   			 console.log(response);
          })
          .catch(function(err) {
        		    console.log(error);
          });
    }
 </script>