문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.
___ID 992950
현재 sveltekit 과 capacitor를 이용해서 앱을 만들고 있습니다.
웹에서는 로그인이 잘 동작하는데,
앱에서 웹뷰를 띄워서 카카오톡 로그인을 구현하려고 할 시에 id pw를 치는 창이 나오고 바로 카카오톡으로 가지 않습니다.
혹시 capacitor를 사용할 때에 카카오로그인을 구현하는 가이드가 따로 있나요?
JS SDK authorize 함수를 사용하셨는데, 카카오톡앱으로 로그인이 안되고
ID/PW을 입력하는 카카오계정 로그인 화면이 나왔다는 것은 카카오톡앱으로 로그인이 실패 했다는 의미 입니다.
테스트하시는 환경에 카카오톡앱은 로그인 되어 있는 상태인가요?
JS SDK authorize를 사용시에 ios에서는 kakao로 넘어가는데 android에서는 아무런 실행도 안되고 아래와 같은 이벤트 객체만 받아오고 실패했었습니다.
- rc8pam8kcsd: 380
- _result: undefined
- _state: undefined
- _subscribers:
그래서 위의 예시는 capacitor browser를 이용해서 카카오 로그인을 구현할 때 예시를 들었었습니다.
로그를 보니 아래 UA로 호출한 케이스에 JS SDK 가 authorize하고 응답을 못받고 폴링호출로 응답 대기만 한 이력이 있어요.
Mozilla/5.0 (Linux; Android 14; sdk_gphone64_arm64 Build/UE1A.230829.036.A2; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/113.0.5672.136 Mobile Safari/537.36
즉, 웹뷰에서 카카오톡앱을 호출 못한 것으로 보입니다.
카카오톡 앱 호출 권한 설정이 잘 되어있는지 확인해보시겠어요?
현재 안드로이드 에뮬레이터로 테스트 중입니다.
Kakao.Auth.authorize 를 사용해서 로그인을 구현하고 있습니다.
카카오톡이 설치되어 있지 않으면 웹으로 뜨는걸로 알고 있는데 위에설명했던 이벤트만 발생하며, 어떠한 팝업도 뜨지 않습니다.
ios에서는 카카오톡이 설치되어 있지 않을 경우 웹으로 뜨고 있습니다.
하지만 안드로이드는 여기서 부터 막혀서 진행되고 있지 않는 상황입니다.
아래 가이드를 따라 하려고 해도 저가 안드로이드 개발자가 아니기에 capacitor를 사용해서, 위 가이드를 어떻게 이용해야 할 지 모르겠습니다.
https://developers.kakao.com/docs/latest/ko/javascript/hybrid
capacitor를 이용해서 하이브리드 앱을 만들때 카카오톡 로그인을 구현하는 방법이 궁금합니다…
제가 궁금한건 Kakao.Auth.authorize가 ios에서는 되고 android에서는 안되는 이유가 궁금합니다.
iOS 에서는 유니버셜링크 사용하기에 iOS가 앱 전환을 담당할 수 있지만
안드로이드의 경우 커스텀 스킴이 사용되기에 구현하신 웹뷰에서 이를 직접 핸들링 하셔야만 합니다.
추가로 capacitor에서 모바일 웹 브라우저로 인식되지 않도록 UserAgent를 수정하신 경우라면 JS SDK는 카카오톡 인증을 요청하지 않습니다.
따라서, capacitor android 프로젝트에서 커스텀 스킴 호출을 어떻게 제어하고 계신지, user-angent를 달리 할당하지 않으셨는지 확인 부탁드립니다.
user agent는 따로 할당하지 않았습니다.
그리고 커스텀 스킴 호출은 아래와 같이 하고 있습니다.
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- <data android:scheme="https" android:host="surveymoa.com" /> -->
<data android:scheme="@string/custom_url_scheme" />
</intent-filter>
<string name="custom_url_scheme">io.dabitiz.surveymoa</string>
구현하신 웹뷰에서 이를 직접 핸들링 해야된다는말이 이해가 되지 않습니다.
웹뷰로 띄우는게아닌 Kakao.Auth.authorize를 사용해서 로그인을 구현했는데 어떻게 핸들링을 할 수 있는 건가요?
카카오 로그인과 무관하게 서비스 앱이 하이브리드 앱(웹뷰를 사용하는)으로 구성된게 아닌가요?
무관하게 웹뷰로 구성된게 맞습니다.
근데 웹뷰로 카카오 로그인을 띄울시 카카오톡으로 가지 않고 id, password를 쳐야하는 불편함이 있습니다.
그래서 Kakao.Auth.authorize를 사용중인데 ios에서만 동작합니다.
웹뷰의 UserAgent 값은 어떻게 설정하셨나요?
user agent값은 설정하지 않았습니다.
앞서 안내드린바와 같습니다.
안드로이드의 경우 웹뷰에서 앱 스킴 호출을 캐치하여 직접 앱을 실행시켜야만 합니다.
capacitor에서 설정은 해당 커뮤니티 가이드를 참고 부탁드립니다.