하이브리드앱 로그인버튼 클릭시 응답없음 (not_found_auth_code, can't get an authorization_code)

ddukeong · 10월 12, 2023, 7:47오전

sdk: 2.4.0
앱ID: 844922
User Agent: Mozilla/5.0 (Linux; Android 12; SM-G977N Build/SP1A.210812.016; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/117.0.0.0 Mobile Safari/537.36

Ionic, Capacitor, Angular로 구성되어있는 하이브리드 앱에서 카카오 로그인을 구현하려고 합니다.
PC버전은 쉽게 구현이 돼서 안드로이드를 구현하려고 하는데 며칠째 애를 먹고있어서요.

하이브리드앱은 android폴더 세팅을 하고 네이티브 코드도 어느정도 만져줘야한다고 해서 우선 프론트에서 로그인 버튼을 누르고 카카오톡이 깔려있으면 실행하고, 아니면 ID/PW로 입력하도록 화면을 띄우는 과정을 먼저 진행해보려고 하고있습니다.

문제 상황

안드로이드 기기(갤럭시 S10 5G)에 띄운 Ionic 웹뷰에서 카카오로그인을 누르면 화면이 전혀 변하지 않고, Network 탭에 아래의 url을 1초정도마다 계속 보내고 응답을 받아옵니다.

PATH

https://kauth.kakao.com/apiweb/code.json?client_id=6aa6907dfa986287547dc06d0ac04605&auth_tran_id=0ysVEs0Yu.Uqup2T2qDavT.-4vbizYNsv9G0I2h8Oblnekgr1FNL4N8zgxp7&ka=sdk%2F2.4.0%20os%2Fjavascript%20sdk_type%2Fjavascript%20lang%2Fko-KR%20device%2FLinux_armv81%20origin%2Fhttps%253A%252F%252Flocalhost

Response

{
    "error_code": "300",
    "error": "not_found_auth_code",
    "error_description": "can't get an authorization_code",
    "status": "error"
}

분명 테스트 도중에는 기본브라우저가 틀어지고 RedirectUrl로 설정된 localhost:4300/login으로 이동하는 등 액션이 있었는데 현재는 아예 무반응인 상태입니다.

질문사항

Android 키 해시라든지 gradle 설정, Activity설정등을 완료해야 카카오톡을 띄우거나 ID/PW입력화면을 띄우거나 할 수 있는건가요?
현재는 capacitor-kakao-login-plugin라는 라이브러리를 사용중이라 Activity관련 코드작성 외에는 모두 하이브리드 앱 가이드와 안드로이드 가이드를 보고 얼추 따라해 놓은 상황입니다.
RedirectUrl을 localhost:4300/login같은 url로 해놓아도 안드로이드로 돌아와서 응답code를 받는데 문제가 없나요?
카카오 로그인 콜백을 href를 kauth페이지로 강제로 이동해버리면 기본 브라우저가 열리면서 카카오계정 선택할 틈도 없이 redirectUrl로 이동해버리는데, 안드로이드 앱이라 localhost로 이동해도 Connection_Refused페이지만 뜨더라구요.

최대한 혼자 해본다고 하는데 하이브리드라 그런지 A-Z가 전부 나와있는 가이드가 없어서 고생중이네요.
두서없는 설명 죄송합니다만 추가 정보 요청하시면 바로 달겠습니다!

[참고한 링크]
하이브리드 앱 가이드
안드로이드 가이드
하이브리드웹앱 카카오톡 로그인 시 (설치후 미로그인) 300 에러 해결방안
카카오 간편 로그인을 하려고 하는데 모바일 웹에서만 에러가 나고 있습니다

woody.ho · 10월 12, 2023, 9:03오전

안녕하세요.

1. /apiweb/code.json 설명
웹에서 JS SDK를 사용, 카카오톡으로 인증 시 웹에서는 카카오톡에서 인증 받았는지 여부를 직접 알 수는 없습니다.
때문에, 웹에서는 카카오 서버로 사용자의 카카오톡 인증이 완료 되었는지 지속적으로 확인하게 됩니다.
/apiweb/code.json 요청은 이러한 확인 과정에서 발생하는 정상적인 요청 입니다.

2. capacitor-kakao-login-plugin 사용이 필요한가요?
capacitor-kakao-login-plugin를 살펴보니 네이티브 전용 플러그인이라 설명하고 있고, 카카오에서 제공하는 네이티브 SDK를 설치하도록 가이드 하고 있습니다.

웹뷰를 사용하지만, 로그인은 네이티브 모듈을 사용하도록 의도하고 개발하시는건가요?
카카오측 로그에는 네이티브 모듈 사용 이력이 없는 것으로 보아 웹 서비스로만 개발하시는 것으로 보입니다.
이 경우 굳이 네이티브 모듈을 같이 사용하실 필요 없으므로 해당 플러그인은 제거하시고, 웹서비스에서 JS SDK를 사용하시면 됩니다. 그리고, ionic 웹뷰가 android intent scheme 처리할수 있도록 개발 하셔야만 합니다.

현재 안드로이드 환경에서 카카오 로그인 버튼을 눌러도 아무 반응이 없는 것은 ionic 웹뷰에서 intent scheme 처리를 하지 못하기 때문입니다.

3. 답변

gradle 설정, Activity설정등을…

capacitor-kakao-login-plugin 사용하지 않는다면 설정 필요 없습니다.

RedirectUrl을 localhost:4300/login같은 ur…

웹뷰에는 서비스측 컨텐츠가 표시됩니다. 응답 코드를 받아도 문제 없습니다.
Connection_Refused가 발생하는 것은 테스트 디바이스에서 localhost에 접속할 수 없기 때문입니다.
웹서비스에서 JS SDK의 Kakao.Auth.authorize 기능을 사용 부탁드립니다.

ddukeong · 10월 12, 2023, 1:51오후

아 Activity에서 setWebViewClient를 하면 무조건 Connection Refused화면이 뜨는 에러가 있어서 이것저것 시도해본거였는데, 계속 알아보니
Ionic의 Capacitor에서는 매개변수에 BridgeWebViewClient를 넣어줘야하는 이슈가 있더라구요…

덕분에 네이티브 SDK쪽 무시하고 Activity쪽만 알아보다가 결국 해결했습니다 감사합니다!

혹시 다른 분들에게 도움이 될 수 있을 까 싶어 android프로젝트 내의 MainActivity.java 전문 공유하겠습니다.

package io.ionic.starter;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.os.Build;
import android.webkit.WebSettings;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.BridgeWebViewClient;

import java.net.URISyntaxException;

public class MainActivity extends BridgeActivity {

  private static final String TAG = "MainActivity";

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView webView = this.getBridge().getWebView();
    Log.d(TAG, webView.toString());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webView.getSettings().setSupportMultipleWindows(true);
    //url 주소를 가져오기
    webView.setWebViewClient(new BridgeWebViewClient(bridge) {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {

        if (request.getUrl().getScheme().equals("intent")) {
          try {
            // Create an Intent
            Intent intent = Intent.parseUri(request.getUrl().toString(), Intent.URI_INTENT_SCHEME);

            // If there is an available app to handle the intent, launch it
            if (intent.resolveActivity(getPackageManager()) != null) {
              startActivity(intent);
              Log.d(TAG, "ACTIVITY: " + intent.getPackage());
              return true;
            }

            // If there's a Fallback URL, load it in the current WebView
            String fallbackUrl = intent.getStringExtra("browser_fallback_url");
            if (fallbackUrl != null) {
              view.loadUrl(fallbackUrl);
              Log.d(TAG, "FALLBACK: " + fallbackUrl);
              return true;
            }

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

          } catch (URISyntaxException e) {
            Log.e(TAG, "Invalid intent request", e);
          }
        }

        return false;
      }
    });
  }
}