Kakao 간편 로그인 여러번 시도시 resolve를 하지 못합니다

JavaScript
1

안녕하세요
javascript kakao login 간편 api를 promise로 래핑해서 사용하려는데, Kakao.Auth.login를 여러번 호출했을때 success콜백에서 resolve를 하지 못하는 문제가 있습니다. 다른 함수는 모두 호출가능한데, 특이하게 resolve만 호출하지 못하는것 같습니다. 그렇다고 에러가나는것도 아니고 response는 정상적으로 받아옵니다. 그런데 promise의 resolve를 실행시키질 못합니다.
사용한 코드는 아래와 같고, 이 증상은 모바일에서만 재현됩니다. 모바일과 데탑의 인증방식이 어떻게 다른지 알려주시면 감사하겠습니다!

const kakaoLogin = () => {
  const GET_USER_DATA_URL = '/v2/user/me';

  return new Promise((resolve, reject) => {
    const success = (authObj) => {
      window.Kakao.API.request({
        url: GET_USER_DATA_URL,
        success(response) {
          resolve({ userData: response, tokenData: authObj });
        },
        fail(error) {
          reject(error);
        }
      });
    };
    const fail = (error) => reject(error);

    window.Kakao.Auth.login({ success, fail });
  });
};

kakaoLogin().then(e => {
  console.log(e); // 정상
})
kakaoLogin().then(e => {
  console.log(e); // 아무것도 안찍힘
})

39
53
09

2

데스크탑 환경에서는 간편로그인 기능을 제공하고 있지 않습니다.
혹시 iOS나 Android 환경에서도 동일한 현상을 발견하셨나요?

추가로, JS SDK는 PC 또는 모바일에 따라 동작이 변경되는 부분들이 있어서
user agent가 임의로 변경된 환경 (크롬 브라우저 > 개발자모드 > 모바일 설정)을 지원하지 않습니다.
참고 부탁드립니다.

3

"간편로그인"이라는 이름이 아래의 동적로그인 과는 다른것인가요?
https://developers.kakao.com/tool/demo/login/login
위 url에 아무 모바일브라우저(저는 크롬 및 사파리로 테스트했습니다)로 접근한 뒤 동적 로그인 버튼 클릭, 코드 확인 및 편집에 아래코드를 붙여넣은 후 여러번 실행시켜보면 처음 실행에서는 alert가 잘 보이나, 두번째 실행의 resolve는 호출이 되지 않는 것을 확인 할 수 있습니다

<a id="custom-login-btn" href="javascript:loginWithKakao()">
  <img
    src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>
<script type="text/javascript">
  function loginWithKakao() {
    const kakaoLogin = () => {
    const GET_USER_DATA_URL = '/v2/user/me';
  
    return new Promise((resolve, reject) => {
      const success = (authObj) => {
        window.Kakao.API.request({
          url: GET_USER_DATA_URL,
          success(response) {
            resolve({ userData: response, tokenData: authObj });
          },
          fail(error) {
            reject(error);
          }
        });
      };
      const fail = (error) => reject(error);
  
      window.Kakao.Auth.login({ success, fail });
    });
  };
  
  kakaoLogin().then(e => {
   alert(JSON.stringify(e));
  })
  }
</script>
4

현상 제보해주셔서 감사합니다.

원인을 분석해본 결과, 저희 SDK 내부에서 사용하고 있는 라이브러리에 버그가 있어서 발생했습니다.
해당 현상을 개선하기 위해 여러 방향을 검토 중이지만 시일이 조금 걸릴 것 같습니다.
번거로우시겠지만, 아래와 같이 콜백을 중첩해서 사용하는 방향으로 먼저 가이드 드립니다.

Kakao.Auth.login({
  success(authObj) {
    Kakao.API.request({
      url:'/v2/user/me',
      success(response) {
        // { userData: response, tokenData: authObj }
      },
      fail() { /* Handle error */ },
    });
  },
  fail() { /* Handle error */ },
})

간편로그인은 모바일 환경에서 카카오톡 앱을 이용한 로그인을 의미하고,
동적로그인은 클라이언트에서 토큰 발급까지 받는 것을 의미합니다.
동적로그인에 간편로그인 기능이 포함되어 있다고 이해하시면 될 것 같습니다.

5

네 감사합니다

6

Blockquote
return new Promise((resolve, reject) => {
window.Kakao.Auth.login({
success (response) {
Kakao.API.request({
url: ‘/v2/user/me’,
success(user) {
console.warn(‘kakao get user :’, user);
resolve(user);
},
fail(error) {
console.error('kakao login error : ', error);
reject(error);
}
});
},
fail() {
return reject(error)
}
});
});

와 같이 콜백을 중첩으로 사용해도 해당 현상이 발생하고 있습니다.

테스트 시 kakao.min.js 파일을 import 했을 경우에 발생하고 있습니다. kakao.js 파일을 import 했을 경우에는 발생하지 않았습니다.

7

@chocolleto
앞서 가이드 드린 내용은 콜백을 중첩해서 사용하되, Promise로 감싸지 않는 방법이었습니다.
다시 확인 부탁드려요.

해당 이슈에 대한 근본적인 원인은 아직 해결되지 못한점 양해부탁드립니다.

8

혹시 이 이슈 수정되었나요?

1개의 좋아요
9

아직 수정되지 않았습니다.
외부 라이브러리와 연결된 이슈라 해결이 더딘점 양해를 구합니다.

10

해당 이슈 해결 여부에 대하여 업데이트 부탁드립니다.

1개의 좋아요
11

안녕하세요.

내부 검토 해봤지만 JS SDK에서 사용하는 3rd Party 라이브러리 버그로 해당 내용 개선이 되지 않아
아쉽지만, 개선되지 않았습니다.

그리고, 클리이언트로 토큰발급하는 Kakao.Auth.login 팝업 방식 로그인은
JS SDK V2에서는 보안상의 이유로 더이상 제공하지 않게되었습니다.

Kakao.Auth.authorize (리다이렉트) 방식 함수를 사용해주세요.

JavaScript | Kakao Developers JavaScript

2개의 좋아요