카카오 로그인 api질문

JavaScript
1

현재 카카오 로그인 모두 front에서 하려고하는데
로그인버튼클릭시 redirectUri까지 와서 code뒤에 인가코드까지는 가져왔는데
해당 인가코드를 post방식으로 프론트에서 카카오api로 보내려면 어떻게 해야할까요?

2

안녕하세요.

redirect_uri 프론트에서 접근토큰 발급받고자 하시는건가요?

3

네 맞습니다 ㅠㅠ
현재 jsp에서 로그인클릭후 리다이렉트uri를 로그인클릭한 페이지로 다시받아와서 회원정보가져오기 버튼을 클릭했을때 post로 보내려고합니다

4

획득하신 인가코드(code)로 접근토큰 발급 후, 해당 접근토큰을 사용하여 사용자 정보 가져오기 하실 수 있습니다.
하지만, 프론트에서 이와 같은 구현이 필요 하실지는 의문입니다.

아래 코드는 참고만 하시고, 실제 구현은 고민해 보시길 바랍니다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js" integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8" crossorigin="anonymous"></script>

...

<script>

const code = new URLSearchParams(location.search).get('code');
const res = await fetch('https://kauth.kakao.com/oauth/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `grant_type=authorization_code&client_id=${JAVASCRIPT_APP_KEY}&code=${code}&redirect_uri=${encodeURIComponent('your redirect uri')}` + 
});
const tokenObj = await res.json();

Kakao.init(`${JAVASCRIPT_APP_KEY}`);
Kakao.Auth.setAccessToken(tokenObj.access_token);
const userObj = await Kakao.API.request({
  url: '/v2/user/me',
})

</script>
5

감사합니다 카카오로그인까지 완료하였는데요
추가적인 질문있습니다. 저희가 이거를 한이유가
qr코드를 활용해서 빠른가입을 테스트해보고싶어서 테스트중인데

qr코드를 테스트용으로 받으려면 어떻게 해야할까요?
로그인까지는 구현된상태고
찾아보니 퍼머링크?던데 읽어봐도 어떻게 해야되는지 모르겠어서요

6

퍼머링크는 인가요청 주소를 단축 URL로 만들고 URL접근 시, 모바일 기기의 카카오톡 인앱브라우저로 진입하여 ID/PW을 별도로 입력하지 않고 카카오톡앱으로 인증하여 간단히 회원가입 할 수 있게 제공하는 기능입니다.

카카오싱크 도입하시고, 아래 FAQ참고 부탁드립니다.

카카오싱크 퍼머링크(일명 카카오싱크 qr) 발급 안내

7

카카오싱크 퍼머링크가 랜딩될 서비스 URL 확인 방법

카카오 로그인을 JavaScript 방법으로 연동한 경우
서비스 URL이 https://example.com/login/kakao 라고 가정하면, 사용자가 해당 페이지를 볼 때 '카카오싱크 간편가입 화면(카카오 로그인)'을 호출해주세요.

이부분이 이해가 안가는데요 만약에 예를들어 localhost:8080/kakao/auth/kakao.jsp에서
버튼을눌러 로그인페이지를 부른다면 저위의 주소가 랜딩 URL인가요?

8

안녕하세요.

퍼머링크는 기본적으로 카카오 로그인 인가 코드 받기 주소를 사용합니다.

사용자가 곧바로 회원가입하고 서비스를 이용할 수 있도록 하기위해 해당 주소를 사용하는 것인데요
이를 위해 인가 코드 받기 주소를 사용 하셔야 합니다.

다만, 문의 주신 내용처럼 서비스측 특정 URL로 작성하고, 해당 URL에서 인가 코드 받기 요청을 곧바로 하도록 구현하실 수도 있습니다.