안드로이드에서 카카오 로그인 자바스크립트 sdk 연동 문의

JavaScript
#1

안드로이드에서 자바스크립트 SDK 이용해서 웹뷰로 카카오 로그인을 할 때 아래와 같이 URL 값이 넘어옵니다.

`intent:#Intent;action=com.kakao.talk.intent.action.CAPRI_LOGGED_IN_ACTIVITY;launchFlags=0x08880000;S.com.kakao.sdk.talk.appKey=f924*****;S.com.kakao.sdk.talk.redirectUri=;S.com.kakao.sdk.talk.extraparams=%7B%22client_id%22%3A%22f924d71380759c40f5673b7bd1e5842d%22%2C%22redirect_uri%22%3A%22;end;`

전체 코드를 복사한건 아니구요. 대략적으로 이런식으로 넘어옵니다.

궁금한 부분은 자바스크립트로 실행할 경우
https://developers.kakao.com/docs/latest/ko/kakaologin/common#login
해당 페이지 설명에

스마트폰 기기: 카카오톡에 연결된 카카오계정 정보 이용
PC 또는 Mac 기기: 카카오계정 정보 입력 웹 페이지 이용

이렇게 되어 있습니다.

현재 저희 웹페이지에서 모바일 브라우저로 실행 시에는 카카오톡이 잘 실행되면서 카카오 로그인이 되지만
안드로이드 앱의 웹뷰에서 실행하면 저희 웹뷰에 카카오계정 정보 입력 웹페이지가 열리고 있습니다.
가이드 내용을 보면 PC 또는 Mac일 경우 카카오계정 정보 입력 웹페이지를 이용한다고 되어 있습니다.

혹시 웹뷰에서 실행할 때 PC로 인식하고 있지 않은가 생각됩니다.
저희 웹페이지에서 뭔가 설정을 해줘야 하는건가요?
아니면 웹뷰에서 뭔가 설정을 해줘야 하는건지 카카오에서 웹뷰로 실행 시 스마트 기기로 인식을 못하는건지요?

#2

남겨주신 URL은 JS SDK가 카카오톡 앱을 실행시키기 위해 사용하는 intent 입니다.

웹뷰 환경에서 카카오톡 앱을 실행하기 위해서는 추가로 네이티브 구현을 해주셔야 해요.
아래 링크를 참고해주세요.
https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js#hybrid-app

#3

말씀하신 네이티브 부분은 이미 구현이 되어 있습니다.

저 인텐트가 웹뷰 쪽에 들어오고 카카오톡 앱이 실행이 안되고 웹뷰 안에서 카카오계정 입력 페이지가 보이는 게 문제입니다.

그러면 안드로이드 카카오 SDK를 사용해서 웹뷰로 구현하는 게 맞는지요?

아니면 지금처럼 자바스크립트 SDK를 사용해서 하이브리드 형태로 구현을 해야 하는건지요?

현재는 자바스크립트 SDK를 사용해서 하이브리드 형태로 추가 네이티브 코드 구현되어 있는 상태입니다.

#4

웹뷰 환경에서 구현하시려면 JS SDK를 사용하시는게 맞습니다.

네이티브 코드에서 intent 파싱이 잘되었는지 확인해주세요.
카카오디벨로퍼스의 예제 코드 기준으로 만약 파싱이 정상적으로 이루어지지 않았다면 아래와 같은 네이티브 로그가 남게됩니다.

Log.e(TAG, "Could not parse anythings")

shouldOverrideUrlLoading 메소드를 어떻게 구현하셨는지 남겨주실 수 있으신가요?

#5

순수 안드로이드 네이티브는 아니고 현재 플러터로 개발 중입니다.

                          shouldOverrideUrlLoading: (controller,
                              shouldOverrideUrlLoadingRequest) async {
                            if (_returnUrl.isNotEmpty) {
                              _returnUrl = "";
                              return ShouldOverrideUrlLoadingAction.ALLOW;
                            }

                            String url = shouldOverrideUrlLoadingRequest.url;
                            ShouldOverrideUrlLoadingAction result =
                                await checkUrl(url);
                            return result;
                          },


Future<ShouldOverrideUrlLoadingAction> checkUrl(String url) async {
    var uri = Uri.parse(url);
    if (!["http", "https", "file", "chrome", "data", "javascript", "about"]
        .contains(uri.scheme)) {
      if (Platform.isAndroid) {
        if (await canLaunch(url) || url.startsWith("intent") == true) {
          try {
            final AndroidIntent intent = AndroidUtils.parseUri(url, 1 << 0);

            await intent.launch();
            await setSchemeCallback(intent.arguments["browser_fallback_url"]);
          } catch (e) {
            showNotExistApp();
            return ShouldOverrideUrlLoadingAction.CANCEL;
          }
          return ShouldOverrideUrlLoadingAction.CANCEL;
        }
      }
    }
    return ShouldOverrideUrlLoadingAction.ALLOW;
}

지금 이렇게 사용 중입니다.

#6

안녕하세요?

혹시 Android 11 환경에서 테스트 중 이시라면 AndroidManifest에
kakaotalk 설정 하셨을까요? 확인 부탁 드려요

참조: https://developer.android.com/training/basics/intents/package-visibility?hl=ko

#7

Android 10 환경입니다.

메니페스트에 아래와 같이 설정되어 있습니다.

<activity android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth" -->
                <data android:host="oauth"
                        android:scheme="kakaof924d71380759c40f5673b7bd1e5842d" />
            </intent-filter>
        </activity>

<meta-data
            android:name="com.kakao.sdk.AppKey"
            android:value="f924d71380759c40f5673b7bd1e5842d" />
#8

제가 안드로이드 코드로 똑같이 해봤는데 플러터에서 나타나는 증상이 동일합니다.

카카오 계정 입력 페이지가 나타납니다. “Could not parse anythings” 오류는 로그에 안 찍혔습니다.

제가 생각하기로는 모바일 기기로 인식 못하고 PC로 인식되면서 카카오계정 입력 페이지로 이동하는 거 같은데요.

아닌가요?

#9

혹시 매니페스트에

<queries>
        <package android:name="com.example.store" />
        <package android:name="com.example.services" />
    </queries>

이 부분에 카카오톡 패키지명이 설정되어 있어야 하나요?

#10

Android 11 환경에서는 아래와 같이 포함 되어야 합니다.

<queries>
        <package android:name="com.kakao.talk" />
   </queries>

추가적으로
아래 코드 intent 로그 출력해서 공유 부탁 드려요.
저의 의견은 intent Parsing이 잘못 되서 browser_fallback_url이 실행 된 것 같습니다.

    final AndroidIntent intent = AndroidUtils.parseUri(url, 1 << 0);

    await intent.launch();
#11 
                        // Intent 생성
                        val intent = Intent.parseUri(request.url.toString(), Intent.URI_INTENT_SCHEME)

                        // 실행 가능한 앱이 있으면 앱 실행
                        if (intent.resolveActivity(packageManager) != null) {
                            startActivity(intent)
                            Log.d(TAG, "ACTIVITY: ${intent.`package`}")
                            return true
                        }

안드로이드 코드입니다. 명시 해주신 코드는 제가 구글 원본 파싱 자바 파일을 컨버팅 한거라 동일합니다.
안드로이드 코드, 플러터 모두 인텐트 실행된 거 확인되어서 말씀하신 현상은 아닌거 같습니다.
매니페스트에 해당 내용 추가해서 확인중입니다.

가이드에 카카오톡 패키지명 설정하는 부분이 없네요. 추가해주셔야지 될거 같습니다.

#13

다시 해보니 카카오톡에서 외부앱 연동하는 화면이 보이는데 이 화면이 카카오톡에서 실행되는 게 아니고 저희 앱에서 실행이 되네요. 앱 미리보기로 하면 저희 앱 아이콘이 카카오톡 아이콘 이미지로 변경되서 보입니다.
카카오톡은 별도로 실행중인 상태입니다.

이렇게 되는게 맞나요?

#14

공유 주신 내용 글로 이해가 잘 안되네요;; 가능 하시다면 비디오로 공유 부탁 드려요

그리고 첨부 주신 로그는 Intent Parsing 전 로그 인것 같은데요

Intent Parsing 후 로그 공유 부탁 드려요
final AndroidIntent intent = AndroidUtils.parseUri(url, 1 << 0); 이후 에 intent 로그

보통 Parsing이 잘 되면 아래 내용 처럼 만 나와야 되서요. 뒤에 파라미터들은 없습니다.
Intent { act=com.kakao.talk.intent.action.CAPRI_LOGGED_IN_ACTIVITY flg=0x8880000 (has extras) }

#16

안녕하세요?
디바이스에 카톡 미설치 이거나,
AndroidUtils.parseUri() 내부에서 어떤 동작을 하는지 정확하게 모르겟으나, Intent Parsing이 잘 안되서 카카오톡 앱 실행이 안되는 것 같습니다.

Webview 구현 문제이며, 내부 코드 확인 부탁 드려요

#17

알겠습니다. 다시 확인해보겠습니다. 인텐트 코드는 문제 없는거죠?

#18

WebView로 전달 되는 request url의 intent 형식은 문제 없어 보입니다.

안드로이드 웹뷰에서 카카오 간편 로그인