카카오로 로그인 api

안녕하세요
프로젝트 진행하면서 오픈 api 인 카카오로 로그인 api를 적용시켜보려고 하는데 잘 안되서 문의드립니다.
로그인 연동까지는 진행을 한 것 같은데,
access_token… 이런 팝업창이 뜬 다음 그 이후로는 아무 진행이 되지 않아서요…
로그인이 된것은 같은데, 그 뒤 화면단을 로그인 후의 화면으로 띄우고싶은데 넘어가질 못하고 있습니다.
계속 token 으로만 나오는 것 같은데…
token을 활용해서 db값을 전달 받거나 하는 방법이 따로 있는 것일까요??

안녕하세요~

앱ID알려주시면 확인해보겠습니다.

앱id는 어디서 확인할까요…??ㅜㅜ

image

팝업 방식 로그인을 사용하시는 군요.
팝업방식 로그인은 리다이렉트가 없습니다.
https://developers.kakao.com/docs/latest/ko/kakaologin/js#advanced-guide

프로필 조회 함수를 만드셔서 버튼클릭 성공부에서 바로 호출하시면됩니다.
https://developers.kakao.com/docs/latest/ko/kakaologin/js#req-user-info

리다이렉트 방식으로 진행할 때는 사용자 정보를 저장하여 로그인을 완료시킬 수 있을까요??

현재 방식에서는 팝업으로 access_Token… 등등이 뜨고 다시 로그인 화면으로 돌아가면서 아무 일이 일어나지않고 있어서요…

“사용자 정보를 저장” 어떤 방식으로 하시나요?

redirect URI로 넘어가는거까진 확인했는데,
거기에서 혹시 사용자 id, 닉네임 등 받아온느 정보를 확인할 수 있는 코드가 있을까요???

displayToken()
function displayToken() {
const token = getCookie(‘authorize-access-token’)
if(token) {
Kakao.Auth.setAccessToken(token)
Kakao.Auth.getStatusInfo(({ status }) => {
if(status === ‘connected’) {
document.getElementById(‘token-result’).innerText = 'login success. token: ’ + Kakao.Auth.getAccessToken()
} else {
Kakao.Auth.setAccessToken(null)
}
})
}
}
function getCookie(name) {
const value = “; " + document.cookie;
const parts = value.split(”; " + name + “=”);
if (parts.length === 2) return parts.pop().split(";").shift();
}

이 코드에서 token값들을 제꺼로 바꿔야하는걸까요???

위에서 사용하신 "Kakao.Auth.createLoginButton"로 로그인 버튼을 띄우고

버튼클릭하여 로그인하시면, 토큰까지 세팅이 됩니다.

사용자 정보 가져오기를 로그인 success에서 호출하시면 id, 닉네임 등 받아온 정보를 console에 출력 하실 수 있습니다.
https://developers.kakao.com/docs/latest/ko/kakaologin/js#req-user-info

샘플 예제에 있는거 그대로 옮겨 적으면 리다이렉트 형식으로 그림 뜨고, 로그인 잘 되는 것 까지는 이해했습니다.
근데 다시 한 번 밑에 적어드리는 해당 코드부터에서의 질문과 함께
몇가지 더 질문이 있어서 다시 답글 올립니다.

** 1. 이 부분 밑에부터는 작성하지 않아도 코드가 정상 작동 되는거같은데 맞을까요??**
** 2. ‘’ 홑따옴표로 되어있는 칸에는 해당되는 값들을 제가 직접 수정해줘야하는 부분인걸까요??
3. 안내해주신 링크를 타고 가서 봐도, 예시로 되어있기는한데 정확한 코드로 적혀있지않아서 제가 어떻게 적어야하는지 적용 및 활용이 되지않고 있습니다.ㅜㅜ
닉네임과 이메일을 화면으로 띄울 수 있는 방법이 있을까요?? 해당 코드 부탁드리겠습니다. **

  displayToken()
  function displayToken() {
    const token = getCookie('authorize-access-token')
    if(token) {
      Kakao.Auth.setAccessToken(token)
      Kakao.Auth.getStatusInfo(({ status }) => {
        if(status === 'connected') {
          document.getElementById('token-result').innerText = 'login success. token: ' + Kakao.Auth.getAccessToken()
        } else {
          Kakao.Auth.setAccessToken(null)
        }
      })
    }
    
  }
  function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
  }
</script>

코드 샘플

http://test-tam.pe.kr/kakao.html

여기 소스 보기 하셔서 한번 보시겠어요? Javascript SDK로 화면에 프로필 표시하는 실제 작동 예시입니다.