문의 시 사용하시는 SDK 버전 정보와 플랫폼(Android / iOS)를 알려주세요.
kakao_flutter_sdk: ^1.4.2
크롬 플랫폼 실행
https://developers.kakao.com/docs/latest/ko/kakaologin/flutter#kakaologin-sample
해당 가이드 문서 카카오 로그인 구현 예제를 사용하였습니다
안드로이드 실행시 로그인 함수가 정상 작동하고 print 메시지까지 확인가능합니다
다만 크롬 실행시 로그인 함수가 정상 작동하지 않습니다.
크롬 페이지에서는 카카오 계정을 입력하고 로그인을 시도하였지만 플러터에서는 아무일도 일어나지 않습니다.
어떠한 print 메시지도 찍히지 않았습니다.
한번더 카카오 계정 로그인을 시도하기 위해 버튼을 클릭하여 로그인 함수를 호출하면
KakaoFlutterSdkPlugin 클래스 handleMethodCall 함수에서 예외가 발생하며
Error: Bad state: Future already completed
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:49 throw
dart-sdk/lib/async/future_impl.dart 35:79 complete
packages/kakao_flutter_sdk_common/kakao_flutter_sdk_plugin.dart 56:29
디버그 콘솔에 위와 같은 로그가 찍히게 됩니다.
크롬에서 실행한 경우에만 해당 문제가 발생하는 이유가 무었인가요?
답변 감사드립니다.
구현한 코드는 아래와 같습니다.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';
import 'package:test_project/constants.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
Future<bool> kakaoLogin() async {
// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
if (await isKakaoTalkInstalled()) {
try {
await UserApi.instance.loginWithKakaoTalk();
print('카카오톡으로 로그인 성공');
} catch (error) {
print('카카오톡으로 로그인 실패 $error');
// 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
// 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
if (error is PlatformException && error.code == 'CANCELED') {
return false;
}
// 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
try {
await UserApi.instance.loginWithKakaoAccount();
print('카카오계정으로 로그인 성공');
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
}
}
} else {
try {
await UserApi.instance.loginWithKakaoAccount();
print('카카오계정으로 로그인 성공');
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
}
}
return true;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: context.theme.colorScheme.background,
appBar: AppBar(
elevation: 2,
backgroundColor: context.theme.appBarTheme.backgroundColor,
titleTextStyle: context.theme.appBarTheme.titleTextStyle,
iconTheme: context.theme.appBarTheme.iconTheme,
title: const Text(
"Login",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(defaultPadding),
child: Column(
children: [
SizedBox(
width: 200,
height: 100,
child: IconButton(
onPressed: () async {
await kakaoLogin();
},
icon: Image.asset("assets/images/kakao_login_large_narrow.png"),
),
),
],
),
),
);
}
}
네 알겠습니다
void main() {
// 웹 환경에서 카카오 로그인을 정상적으로 완료하려면 runApp() 호출 전 아래 메서드 호출 필요
WidgetsFlutterBinding.ensureInitialized();
// runApp() 호출 전 Flutter SDK 초기화
KakaoSdk.init(
nativeAppKey: 'nativeAppKey',
javaScriptAppKey: 'javaScriptAppKey',
);
runApp(const MyApp());
}
MyApp 빌드는
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Admin Panel',
themeMode: ThemeMode.system,
theme: _lightTheme,
darkTheme: _darkTheme,
initialRoute: '/',
routes: {
'/': (context) => const LoginScreen(),
'/main': (context) => const MainScreen(),
},
);
}
}
이렇게 하고 있습니다.
안녕하세요 말씀하신 내용 중에 헷갈리는 부분이 있는데요,
아래의 내용에서 ‘안드로이드 실행시’ 라고 말씀하신건 '안드로이드 앱 형태로 빌드해서 앱의 로그인 실행’를 의미하는건가요? 아니면 '플러터 웹 형태로 빌드 후 안드로이드 디바이스에서 웹 페이지의 로그인 실행’을 의미하는건가요?
그리고 '크롬 실행시’라고 말씀 하신 부분도 '데스크탑의 크롬 브라우저로 웹 페이지의 로그인을 실행’시킨건지, '안드로이드 디바이스에 설치된 크롬 브라우저에서 웹 페이지의 로그인을 실행’시킨건지 정확하게 파악하기가 어렵습니다.
확인 후에 답변 부탁드립니다.
추가로 이슈 발생한 앱의 앱 id도 첨부해주시면 이슈 파악하는데 조금 더 도움이 될 것 같습니다.
(앱 id는 카카오 디벨로퍼스 사이트에서 확인할 수 있는 숫자 값 입니다)
1개의 좋아요
안드로이드 실행의 경우는 안드로이드 앱 형태로 빌드해서 실행을 하였습니다.
크롬 실행의 경우는 데스크탑 크롬 브라우저로 실행을 하였습니다.
앱 정보는 아래와 같습니다
앱 ID : 907756
앱 이름 : wjjeong_flutter
사업자명 : wjjeong
서버 로그를 확인했을 때는 크롬 브라우저로 로그인을 진행했을 때도 토큰 발급이 정상적으로 이뤄지는 것으로 보여 브라우저 캐시 문제의 가능성이 있을 것 같습니다.
브라우저의 캐시를 삭제하거나 크롬 브라우저의 시크릿 모드에서 정상 동작되는지 확인부탁드려요
1개의 좋아요
답변 감사드립니다.
말씀하신대로 확인해보겠습니다.
