카카오 로그인 시 Ajax 사용 가능한가?

kauth는 CORS가 열려있어서 ajax로 요청해도 CORS 에러가 발생하지 않지만, 반면에 kapi는 CORS가 닫혀있어서 에러가 발생합니다. kapi도 CORS를 오픈하여 제공하도록 변경 되었습니다.

Test1. 인가 코드 받기

인가 코드 요청은 보통 다음과 같이 URL을 호출 합거나 카카오에서 제공하는 SDK를 호출합니다. 

/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code

/oauth/authorize 주소 요청 시, 현재 로그인 상태를 체크하여 Redirect Uri로 이동하거나 인증 페이지로 이동합니다. 

이는 Front나 Backend어디서든 /oauth/authorize 주소로 리다이렉트 해서 처리합니다. (Ajax 불가)

이러한 방식과 동일한 "카카오계정과 함께 로그아웃", "추가항목 동의 받기"도 리다이렉트 해서 처리해야합니다. 

GET /oauth/logout?client_id=?&logout_redirect_uri=?&state=?

GET /oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code&scope={required_scopes.join(',')} 

Test2. 토큰 요청

kauth.kakao.com 서버에 리다이렉트 없이 Ajax로 요청에 의한 응답 처리 할 수 있는 것은 토큰 요청이 유일합니다. (Ajax 가능)

그래서 유형별 토큰 요청 Ajax 호출에 대해 알아보겠습니다. 

1. jquery를 이용한 ajax 처리

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
const code = location.search.split('?code=')[1];
if (code !== undefined) {
    logoutWithKakaoAjax(code);
}

function logoutWithKakaoAjax(code) {
    const JS_APP_KEY ="22222222222222222222222";
    const REDIRECT_URI = "http://localhost/kakao.php";
    const makeFormData = params => {
        const searchParams = new URLSearchParams()
            Object.keys(params).forEach(key => {
                searchParams.append(key, params[key])
            })
        return searchParams
    }

    $.ajax({
        type: "POST",
        url: 'https://kauth.kakao.com/oauth/token',
        data: {
            grant_type: 'authorization_code',
            client_id: JS_APP_KEY,
            redirect_uri: REDIRECT_URI,
            code
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
        },
        success: function (res) {
            console.log("jquery");
            console.log(res);
        }
    });
}
</script>

 

2. axios를 이용한 ajax 처리

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
const code = location.search.split('?code=')[1];
if (code !== undefined) {
  requestToken(code)
    .then(({ data }) => {
      console.log('requestToken:', data)
    })
    .catch(err => {
      console.error('requestToken:', err)
    })
}

function requestToken(code) {
  const JS_APP_KEY ="222222222222222222222222222";
  const REDIRECT_URI = "http://localhost/kakao.php";
  const makeFormData = params => {
    const searchParams = new URLSearchParams()
    Object.keys(params).forEach(key => {
      searchParams.append(key, params[key])
    })

    return searchParams
  }

  return axios({   
    method: 'POST',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
    },
    url: 'https://kauth.kakao.com/oauth/token',
    data: makeFormData({
      grant_type: 'authorization_code',
      client_id: JS_APP_KEY,
      redirect_uri: REDIRECT_URI,
      code,
    })
  })
}
</script>

 

 

참고자료.

• CORS : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
• Kakao Login Guide : developers.kakao.com/docs/latest/ko/kakaologin/common