웹 -> 카톡앱을 이용한 간편 로그인 지원(안드로이드)

JavaScript JavaScript FAQ
1

모바일 웹에서 크롬, 기본 브라우저 등 외부 브라우저에서는 ID/Password를 이용해야 하는 불편함이 있었습니다. 내 카카오톡에는 계정이 있음에도 불구하고 여러 카카오게임에서는 카카오톡으로 간편로그인을 하는데 왜 모바일 웹에서는 ID/Password를 입력하지?? 라고 많은 사용자들이 불편하셨을텐데요.

이제 드디어 모바일 웹에서도 카카오톡 앱을 이용한 간편 로그인이 지원됩니다!

    - 모바일에서만 가능
    - 안드로이드 버젼 키캣 이상
    - Chrome 엔진 v40이상
    - 외부 3rd 인앱 브라우저에서는 인앱 브라우저의 별도 구현이 필요
      - Android 샘플: https://github.com/CoderSpinoza/KakaoIntentWebViewExample
      - iOS 샘플: https://github.com/blomcheol/kakao-ios-webview-example
  1. 내 폰에서 외부 브라우저를 연다.
  2. 데모 보러가기 를 클릭한다.
  3. 로그인 버튼을 눌러본다!

Javascript 로그인 버튼만 붙이면 됩니다. 기존에 이미 연동하셨다면 아무것도 안하셔도 됩니다. :smile:

카카오로그인 가이드

PS) 점차 대상 안드로이드를 확대해 나갈 예정

– 어떻게 하면 보다 더 쉽고 간편하게 카카오 로그인을 사용할 수 있을까 매일매일 고민하는 카카오팀 드림 –

1개의 좋아요
3

안녕하세요. 우선 안드로이드 간편 로그인 기능 업데이트 감사드립니다.
몇가지 테스트 및 적용 중에 카카오톡 앱을 통한 로그인에 대해 궁금한 점이 있어서 문의 남깁니다.

환경) Chrome 49.0.2623.105 / Android 6.1
버전) v1.0.57
현상)

  • Intent Uri 동작 확률이 낮음
  • 기존 웹 로그인 팝업을 이용한 로그인 시, 브라우저 단에서 팝업 차단 허용 메시지가 뜸
  • 로그인 과정 중에 열렸던 about:blank 창이 남아있음

설명 1)
kakao sdk의 아래 code 부분의 timeout 인터벌 값이 250일 경우에 테스트 환경에서 intentUri 동작 확률이 매우 낮습니다(23/100 성공 - 갤럭시 S6 엣지). 개인적으로 실험해보니 250인 값을 800 정도로 변경했을 경우 확률이 많이 올라가는 것을 확인할 수 있었습니다. 물론 기존 값에도 동작을 잘하는 기기(넥서스 5X)도 존재하였고 3~4가지 기기에서 테스트 한 것 뿐이라서 조심스러운데… 인터벌 값 정하셨을 때의 기준이 궁금합니다. 기존 web2app에서와 같이 실험적으로 정하신 것인지요?

setTimeout(function(){
    if ( _loginWindow ){
      var _doc = _loginWindow.document;
      if ( _doc && ((_doc.hidden !== undefined && !_doc.hidden) || (_doc.webkitHidden !== undefined && !_doc.webkitHidden ))){
        _loginWindow = _k.windowOpen(loginUrl, LOGIN_POPUP_NAME, POPUP_FEATURES);
       }
    }
 }, 250);

설명 2, 3)
설명 1과 연장되는 현상인데, 1에서 앱을 통한 로그인에 실패하였을 경우 기존 웹 로그인 팝업이 뜨는데 이때 크롬의 “팝업이 자동으로 표시되지 않는” 기능으로 인해 팝업 허용 전에는 로그인 창이 뜨지 않습니다. 문제는 3의 about:blank 창이 닫히지 않아 해당 “팝업 허용” 관련 노티를 확인하기 어렵다는 점인데요. 앱을 통한 로그인을 실패할 경우에 새로 열린 about:blank 창이 원래는 닫히는 것인지, 그게 아니라면 자동으로 닫히는 기능에 대해 개발 계획이 있으신지 궁금합니다.

감사합니다.

3개의 좋아요
5

This topic is now pinned globally. It will appear at the top of its category and all topic lists until it is unpinned by staff for everyone, or by individual users for themselves.

6

사소한 버그를 수정하고 fallback 처리를 바꿔서 새로이 배포했습니다.
피드백 감사드리고 사용하시다가 궁금한 게 있으면 언제든지 글 남겨주세요~ 사소한거라도 좋습니다. 감사합니다 : )

1개의 좋아요
7

안녕하세요! 변경된 sdk를 확인하였고 현재 안드로이드 간편로그인 기능을 적용하였습니다 ^^

이 과정에서 알게된 이슈가 있어 공유드립니다!

버전 v1.0.59에서 안드로이드의 경우

  1. 안드로이드 버전 4.x 이상
  2. 크롬 버전 40 이상

일 경우 intent가 불리는데
카카오톡을 설치하였지만 로그인을 하지 않은 상태 (앱을 실행했을 때 전화번호를 입력하는 단계가 나오는 상태)의 유저의 경우,

앱을 통한 로그인이 되지 않고, 로그인 팝업도 나오지 않는 이슈가 있습니다.

감사합니다!

9

해당 내용은 이미 적용되어 있다면 적용을 하지 않아도 되는건가요??

아니면 변경사항이 필요한건가요?

10

@korea7030 넵. 별다른 조취는 필요 없습니다. JS SDK를 사용하고 계신다면 바로 지원됩니다.

11

javascript SDK 적용되어 있으면 카카오앱을 통한 로그인이 바로 가능하다는 말씀이신데

IOS도 해당되는 부분은 맞는거죠? 만든 하이브리드앱 상에서 앱을 처음 실행 후 로그인 시에는 아이디/pw 를 입력하게 되는데 첫 로그인 시에는 해당 안되는 건가요?

12

@korea7030 헛… 하이브리드 앱이군요. 거기까지는 저희가 공식적으로 해보지를 못해봤어요. OS 기본 브라우저, 크롬 등에서만 현재 해봤구요. 잘 될 수도 안될수도 있겠네요 ㅠㅜ

13

그럼 하이브리드의 경우는 아직 지원이 안되는건가요?

14

네 기본적으로 하이브리드는 지원이 어렵습니다만 하이브리드의 구현 형태에 따라 실행이 가능하도록 가이드 하는 경우도 있습니다.
cordova 같은 프레임웍을 사용하시지 않고 iOS 의 UIWebView 등을 이용해서 웹 페이지를 렌더링하는 방식이라면 UIWebView 를 커스터마이징 하셔서 JS SDK가 동작하도록 할 수도 있습니다.

15

넥서스 5X 에서 카카오톡의 인앱브라우저에서
커스텀 로그인 버튼 데모와 동일한 소스코드의 로그인 버튼이 있는 페이지를(앱키만 다름) 로딩해서 버튼을 눌렀을때
로그인이 동작하지 않습니다.
콜백으로 success fail 둘다 호출되지 않으며
로그인페이지도 나타나지 않습니다.
올려두신 https://developers.kakao.com/docs/js/demos/login 여기서는 넥서스5x 에서도 잘됩니다만
동일한 소스를 저희 서버에 올려서 앱키를 바꿔서 테스트 했는데 동작하지 않았습니다.
다른 폰이나 카톡 인앱브라우저가 아닌 웹 브라우저에서는 정상동작했습니다.
확인 부탁드립니다.

16

문제가 발생한 페이지의 URL을 알 수 있을까요? 공개하시기 곤란하다면 메시지로 주셔도 됩니다.

17

메세지로 전달 드렸습니다.
글쓸때 앱키를 포함시키지 말라고 옆에 써있어서… ㅎㅎ
감사합니다.