카카오싱크 로그인 테스트

문의 사항에 따라 필요한 정보를 먼저 입력하시면 더 빠르게 대응해 드릴 수 있습니다.

  • 개발 과정에서 문제가 있을 경우

    • 앱 아이디(app ID): 762199
    • 호스팅 사: 아임웹
    • 서비스 URL :
    • 오류 내용 :
      카카오싱크 검수 끝나고 로그인 테스트 중이였는데
      KakaoTalk_Photo_2022-09-20-12-50-28
      이미지처럼 선택창이 나오고 둘 중 아무거나 눌러도 해당 앱으로 이동 후에 아무런 반응이 없습니다.
      혹시 왜 이런지 알 수 있을까요?
  • 퍼머링크 생성이 필요할 경우 (자세한 신청 방법은 가이드 참고)

    • 카카오싱크 퍼머링크의 서비스 랜딩URL:
    • 디벨로퍼스 앱과 연결된 카카오톡 채널의 검색용 아이디:

카카오 로그인 관련 에러(Invalid redirect. 예: KOE006)가 발생할 경우, 가이드를 참고합니다.
카카오 싱크 관련 자주하는 질문은 FAQ를 참고합니다.

안녕하세요.

제가 재현할 수 있는 절차 좀 설명해주시겠어요?

카카오 로그인 버튼 누르면 먼저
스크린샷 2022-09-20 오후 1.35.34
요 팝업창이 뜹니다 필수 동의 체크하고 계속하기 버튼 누르면
스크린샷 2022-09-20 오후 1.37.04
팝업창이 한 번 더 뜨는데 여기서 동의 체크하고 계속하기 버튼 누르면
원글의 이미지처럼 크롬이랑 저희 앱 선택하는 팝업창이 뜹니다.
여기서 Chrome 선택하면 아무런 반응이 없고 밑에 있는 flutter_web_auth 누르면 저희 앱 첫 화면으로 돌아갑니다.

카카오 로그인 버튼을 어디에서 클릭하나요?

웹사이트 URL알려주시겠어요?

어… 웹사이트는 아니고 저희 앱에서 클릭합니다.
스크린샷 2022-09-20 오후 1.49.57

아하. 넵.

제가 안드로이드 앱 설치 해보니 카카오 로그인 기능이 준비중인 것으로 나오네요.
재현은 못하고 로그와 말씀하신 내용을 토대로 유추해보면

(1) 카카오 동의창에 동의 후, 서비스로 되돌아가고
(2) 제작하신 앱에서 다시한번 인가요청하는 것으로 보입니다.
(3) 두번째 동의창으로 로그인 시도하고
(4) 동의 후, 서비스로 되돌아가기 위한 브라우저를 선택하는 것 같구요.

싹다잡아 앱이 브라우저앱이라 크롬과 함께 표시되는듯한데.

제작하신 앱에서 (3)번의 두번째 동의창을 띄우는 로직이 있을 것으로 보입니다.


제작하신 앱에 종속적인 문제로 보이는데, 빈 프로젝트에 카카오 로그인만 적용해서 테스트 한번 해보시겠어요?

빈 프로젝트에서 테스트 해봤는데 똑같은 증상이 나타납니다;;

작성하신 로그인 코드블럭 공유해주시겠어요?

스크린샷 2022-09-20 오후 3.34.18

print log는 어떻게 진행되나요? catch문 타는지 확인해주시겠어요?

flutter SDK담당자에게 전달할 수 있도록
로그인 과정의 full log도 첨부 부탁드려요.

스크린샷 2022-09-20 오후 3.47.34
catch문은 안 타고 try문 탑니다

스크린샷 2022-09-20 오후 3.49.23
팝업창이 뜨고 크롬 선택했을때 log이고

스크린샷 2022-09-20 오후 3.51.17 복사본
크롬 말고 저희 앱 선택했을때 log 입니다

Performing hot reload...
Syncing files to device sdk gphone64 arm64...
Reloaded 0 libraries in 56ms (compile: 16 ms, reload: 0 ms, reassemble: 25 ms).
D/EGL_emulation(18434): app_time_stats: avg=2096.45ms min=14.32ms max=4178.58ms count=2
D/EGL_emulation(18434): app_time_stats: avg=4867.08ms min=4867.08ms max=4867.08ms count=1
[log] [🔬] https://kauth.kakao.com/oauth/authorize?client_id=9f31b09e60b6384f0928344e826e8ef3&redirect_uri=kakao9f31b09e60b6384f0928344e826e8ef3%3A%2F%2Foauth&response_type=code&codeChallenge=NYsU032oZhK97rcPdUUosY%2BZFoIA8VdCqcTgNz%2BDRK0%3D&codeChallengeMethod=S256&ka=sdk%2F1.2.2+sdk_type%2Fflutter+os%2Fandroid-31+lang%2Fko-KR+origin%2FFxlBBlNDy4eTDQ76Ktv29vjC8HI%3D+device%2FSDK_GPHONE64_ARM64+android_pkg%2Fcom.example.untitled4+app_ver%2F1.0.0
D/CustomTabsCommonClient(18434): Choosing com.android.chrome as custom tabs browser
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Localization initialized
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Start
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Init state
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Build
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Init Localization Delegate
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Init provider
I/flutter (18712): [🌎 Easy Localization] [WARNING] Localization key [safe] not found
I/flutter (18712): [🌎 Easy Localization] [WARNING] Localization key [malware] not found
I/flutter (18712): [🌎 Easy Localization] [WARNING] Localization key [notSafe] not found
I/flutter (18712): [🌎 Easy Localization] [WARNING] Localization key [remote] not found
I/flutter (18712): [🌎 Easy Localization] [WARNING] Localization key [pornoSite] not found
I/flutter (18712): [🌎 Easy Localization] [WARNING] Localization key [gambleSite] not found
I/flutter (18712): [🌎 Easy Localization] [DEBUG] Load Localization Delegate
E/flutter (18712): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: 'package:flutter_easyloading/src/easy_loading.dart': Failed assertion: line 425 pos 7: 'overlayEntry != null': You should call EasyLoading.init() in your MaterialApp
E/flutter (18712): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)
E/flutter (18712): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)
E/flutter (18712): #2      EasyLoading._show (package:flutter_easyloading/src/easy_loading.dart:425:7)
E/flutter (18712): #3      EasyLoading.show (package:flutter_easyloading/src/easy_loading.dart:256:22)
E/flutter (18712): #4      MainController.onWebViewCreated (package:all_catch/controller/main_controller.dart:450:19)
E/flutter (18712): <asynchronous suspension>
E/flutter (18712): 
E/flutter (18712): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(NOT_A_WEB_SCHEME, Flutter Custom Tabs only supports URL of http or https scheme., null, null)
E/flutter (18712): #0      launch (package:flutter_custom_tabs/src/launcher.dart:47:5)
E/flutter (18712): #1      MainController.onWebViewCreated (package:all_catch/controller/main_controller.dart:470:17)
E/flutter (18712): <asynchronous suspension>
E/flutter (18712):

안녕하세요 Flutter SDK 담당자입니다.

이슈를 재현해보려했는데 재현되지 않네요.

테스트해보신 카카오 로그인만 적용한 프로젝트를 보내주실 수 있을까요?

앱 키가 유출 방지를 위해 개인 메시지로 전달 부탁드리겠습니다.

보내주신 프로젝트를 빌드해서 확인해봤습니다.

카카오톡으로 로그인하는 경우 동의창 한번만 뜨고 정상적으로 잘 동작하고, 카카오계정으로 로그인의 경우 AndroidManifest.xml 등록이 잘못되어있어서 보내주신 프로젝트를 그대로 빌드했을 때는 ‘동의하고 계속하기’ 버튼을 눌러도 아무런 반응이 없습니다.

Android 설정 가이드 참고해서 AndroidManifest.xml 파일을 수정하면 동의창이 한번만 뜨고 정상동작하는 것도 확인했습니다.

flutter clean 명령어로 캐시를 제거하고 다시 빌드해서 확인 부탁드리겠습니다.

좋아요 2

덕분에 로그인만 적용된 프로젝트에서는 해결됐습니다.
그런데 기존 앱에서도 똑같이 수정했는데 여전히 이미지 파일 처럼 뜹니다.
스크린샷 2022-09-20 오후 7.49.46

크롬 선택하면 아무런 반응이 없지만 ‘flutter_web_auth’ 선택하면 로그인이 되긴 합니다.

해당 앱의 AndroidManifest.xml 를 확인해보시면 아래와 같은 형태의 인텐트필터가 선언되어있는 것으로 추측됩니다.

<intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="http" />
        <data android:scheme="https" />
</intent-filter>

해당 인텐트 필터를 넣게 되면 안드로이드 디바이스에서 앱을 '웹 브라우저’로 인식하게 됩니다.
사진에 첨부하신 팝업 화면은 크롬 브라우저에서 띄우는 것으로, 크롬 브라우저에서 다른 '웹 브라우저’로 이동할 때 띄우고 있습니다.

팝업이 떴을 때 크롬을 누른다는 것은 로그인 과정 중에 해당 앱으로 돌아가지 않고 크롬 앱에 머물러 있겠다는 의미이므로 아무런 반응이 없는 것이 정상이고, flutter_web_auth를 누르게 되면 해당 앱으로 돌아간다는 의미이므로 로그인이 완료되는 것입니다.

해당 팝업을 뜨게 하지 않는 방법은 크게 2가지가 있을 것으로 보이는데요, 디바이스 자체의 기본 브라우저를 크롬 앱이 아닌 다른 앱으로 변경하시는 방법과 개발 중인 앱에서 위의 인텐트 필터 부분을 제거하는 방법입니다.

앱의 기능이나 목적을 모르기 때문에 해당 앱이 왜 브라우저 앱으로 구현되어 있는지는 알 수 없기 때문에 상황에 맞는 방법을 선택해서 개발하시면 될 것 같습니다.

좋아요 1

친절한 설명 감사합니다!

좋아요 1