문의 시 사용하시는 SDK 버전 정보와 플랫폼(Android / iOS) 및 디벨로퍼스 앱ID를 알려주세요.
앱 ID : 884817
kakao_flutter_sdk_talk: ^1.9.5
kakao_flutter_sdk_auth: ^1.9.5
안녕하세요. flutter로 웹 서비스를 만들고 있습니다.
웹에서 카카오 로그인 하는 경우를 만들다 특정 조건에서 로그인 후 화면이 다시 전환되지 않는 경우가 있어 해결 방법을 여쭙고자 질문 드립니다.
Future<OAuthToken?> loginWithKakao() async {
// 카카오 로그인 구현 예제
// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
try {
return await UserApi.instance.loginWithKakaoTalk();
} catch (error) {
try {
return await UserApi.instance.loginWithKakaoAccount();
} catch (error) {
debugPrint('카카오계정으로 로그인 실패 $error');
}
}
return null;
}
해당 코드로 카카오 로그인을 구현해 사용하고 있습니다.
웬만한 경우에는 잘 작동하나, 휴대폰에 카카오톡이 설치되어있지 않은 안드로이드 유저인 경우에 카카오 계정으로 로그인하는 화면이 뜹니다.
해당 화면이 새 탭에서 동작하는게 아니라 기존 탭에서 동작하는 방식이라, 로그인을 완료해도 “사용 중이던 서비스로 이동하여 로그인을 완료해 주세요.” 라는 문구만 뜨고 다시 서비스 페이지로 돌아가는 방법이 없습니다.
해당 문제를 해결 할 수 있는 방법이 있을까요??
추가적으로 찾아보다가 리다이렉션 방식으로 진행하면 해결되는 것 처럼 보여서 시도를 해봤습니다.
/// 카카오 리다이렉트 구현
Future<String?> loginWithKakaoRedirect() async {
bool talkInstalled = await isKakaoTalkInstalled();
// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
if (talkInstalled) {
// 카카오톡으로 로그인
try {
return await AuthCodeClient.instance.authorizeWithTalk(
redirectUri: 'http://localhost:5001',
);
} catch (error) {
print('Login with Kakao Talk fails $error');
}
} else {
// 카카오계정으로 로그인
try {
return await AuthCodeClient.instance.authorize(
redirectUri: 'http://localhost:5001',
);
} catch (error) {
print('Login with Kakao Account fails. $error');
}
}
}
Login with Kakao Account fails. PlatformException(NotImplemented, null, KakaoFlutterSdk for web doesn’t implement the method accountLogin, null)
해당 에러가 생겨 진행이 안됩니다.
이 부분에 대해서도 해결 방법을 알려주시면 감사하겠습니다.
감사합니다.
안녕하세요
우선 첫번째로 문의주신 안드로이드 디바이스에서 '카카오 계정 로그인’을 실행하면 기존 페이지에서 동작한다고 말씀주셨는데요, 이슈가 발생하는 웹 브라우저 이름과 버전 정보를 알 수 있을까요? 추가 웹 브라우저의 캐시를 제거해도 동일하게 현상이 발생하는지도 궁금합니다.
두 번째로 말씀주신 이슈는 SDK 버그로 이슈 수정은 되었지만 아직 배포 되지 못했습니다. 해당 이슈 수정된 버전은 빠른 시일 내에 배포하도록 하겠습니다. 혹시라도 배포되기 전에 사용하고 싶으시다면 아래와 같이 의존성 설정해서 사용할 수 있는 점 참고부탁드립니다.
dependencies:
# 생략
kakao_flutter_sdk:
git:
url: https://github.com/kakao/kakao_flutter_sdk.git
ref: develop
웹 브라우저 구글 크롬을 사용중이고, 버전은 127.0.6533.103 입니다.
캐시를 지우고 해도 결과는 동일하고, 카카오 로그인에 대한 캐시를 남기고 해도 결과는 동일합니다.
두번째로 알려주신 방법으로 개발하면 문제 해결이 되는걸까요??
그리고 추가적으로 앱으로도 서비스를 제공하고 있는데,
Future<void> signInWithKakao() async {
try {
String token;
if (await isKakaoTalkInstalled()) {
try {
OAuthToken kakaoToken = await UserApi.instance.loginWithKakaoTalk();
token = kakaoToken.accessToken;
} catch (error) {
if (error is PlatformException && error.code == 'CANCELED') {
return;
}
OAuthToken kakaoToken = await UserApi.instance.loginWithKakaoAccount();
token = kakaoToken.accessToken;
}
} else {
OAuthToken kakaoToken = await UserApi.instance.loginWithKakaoAccount();
token = kakaoToken.accessToken;
}
} catch (e) {
print("카카오 로그인 에러 : $e");
}
}
위 코드로 카카오 로그인을 구현했는데, 아이폰 시뮬레이터 환경에서도 똑같이 카카오 계정으로 로그인 후 창이 닫히거나 앱으로 돌아가지 않는 문제가 있습니다.
시뮬레이터는 아이폰 15Pro 모델이고 ios 17.5 버전입니다.
말씀주신 두 이슈 재현 영상을 공유해주실 수 있을까요?
말씀주신 상황이 아직 정확하게 이해가지 않아서 영상이 있다면 이슈 및 상황 파악에 도움이 될 것 같습니다
웹 로그인 영상입니다. 중간에 카카오 계정 입력하는 부분은 편집했습니다.
모바일 환경 로그인 영상입니다. 마찬가지로 계정 입력 부분은 편집했습니다.
두 상황 모두 카카오톡이 깔려있지 않아 카카오 계정으로 로그인하는 경우입니다.
영상에서도 보이듯 두 상황 모두 로그인 창이 꺼지거나 기존 서비스로 돌아가지 않아 안드로이드 기본 뒤로가기 버튼이나 아이폰 뒤로가기 제스쳐를 통해 돌아가야하는 상황입니다.
뒤로 가면서 로그인 했던 부분을 지나쳐 다시 원래 서비스로 오기 때문에 굉장히 어색한 상황입니다.
해결 방법이 있을까요??
현재 안드로이드 웹 브라우저 ‘카카오톡으로 로그인’ 기능을 실행시키면 안드로이드의 intent를 통해 카카오톡을 실행시키고 있습니다. (참고 - Android 인텐트 사용 가이드)
그런데 안드로이드 intent는 intent로 호출한 앱을 실행시키지 못할 때 S.browser_fallback_url 로 전달된 url로 이동하도록 구현되어있고, SDK에서는 S.browser_fallback_url 값으로 '카카오계정 로그인 페이지’를 전달하고 있습니다.
말씀주신 현상은 카카오톡이 설치되어있지 않아서 S.browser_fallback_url 값으로 전달된 '카카오계정 로그인 페이지’로 이동하면서 발생한 현상이고, 팝업을 띄워서 S.browser_fallback_url로 이동시킬 수는 없는 것으로 확인됩니다.
(제보주신 현상에서 UserApi.instance.loginWithKakaoTalk() 호출에 의해 발생했고, UserApi.instance.loginWithKakaoAccount() 는 호출되지 않았습니다)
모바일 웹에서 특정 앱 설치 유무를 정확히 판단할 수가 없어서 kakao_flutter_sdk에서는 모바일 디바이스인 경우 카카오톡 설치 유무 결과를 항상 true로 반환하고 있습니다. (참고 - 가이드)
현재로서는 안드로이드 웹 브라우저에서 ‘카카오톡으로 로그인’ 기능을 실행했을 때 디바이스에 카카오톡이 설치되어있지 않다면 동일한 현상이 발생할 수 밖에 없는 상황이라서, 안드로이드 웹 브라우저 환경인 경우 항상 '카카오계정 로그인’을 실행시키거나 로그인 버튼을 분리해서 ‘카카오톡으로 로그인’, ‘카카오계정으로 로그인’ 버튼으로 분기하는 방법 등으로 처리해야할 것 같습니다.
안드로이드 이슈와 별개로 아이폰의 경우는 앱을 구현하신거라고 하셨는데, 서버 로그를 확인했을 때는 웹 환경인 것으로 확인됩니다. 혹시 앱이라고 말씀하신게 카카오SDK를 사용한 웹페이지를 웹 뷰로 띄워서 앱으로 만든 형태인가요?
