문의 시 사용하시는 SDK 버전 정보와 플랫폼(Android / iOS) 및 디벨로퍼스 앱ID를 알려주세요.
SDK 버전 : kakao_flutter_sdk_user: ^1.9.1+2
플랫폼(Android / iOS) 및 디벨로퍼스 앱 ID : 앱 ID 1056015
확인후 답변 주시면 정말 정말 감사하겠습니다.
<질문 1 : Web 크롬에서 ‘Redirect URI 등록’ 방법을 모르겠습니다.>
Redirect URI를 뭐라고 등록해야할지 모르겠습니다. ㅠㅠ
[내 애플리케이션] > [카카오 로그인]에서 Redirect URI 등록해야 하는데
http://localhost:59994 를 등록해도 안되고 ← 실행할때마다 포트번호가 달라집니다.
- 크롬에서 앱 실행후 로그인 버튼을 클릭하면 카카오 로그인 페이지가 정상적으로 열림
=> 2단계 로그인까지 정상
Kakao
카카오메일 아이디, 이메일, 전화번호
비밀번호
간편로그인 정보 저장
도움말 보기
로그인
또는
QR코드 로그인
회원가입계정 찾기비밀번호 찾기
- 앱 관리자 설정 오류 (KOE006) 발생
앱 관리자 설정 오류 (KOE006)
sns_login 서비스 설정에 오류가 있어, 이용할 수 없습니다.
서비스 관리자의 확인이 필요합니다.
서비스 관리자라면 아래를 확인해보세요.
왜 에러가 발생하나요?접기
등록하지 않은 Redirect URI를 사용해 인가 코드를 요청했습니다.
사용한 Redirect URI: http://localhost:59994
어떻게 해결할 수 있나요?접기
[내 애플리케이션] > [카카오 로그인]에서 사용한 Redirect URI를 등록하거나, 등록된 Redirect URI를 인가 코드 요청의 redirect_uri 값으로 사용합니다.
<질문 2 : 안드로이드에서 오류로 멈추는데 해결방법을 모르겠습니다.>
- 본인의 안드로이드 폰에서 앱 실행후 로그인 버튼을 클릭하면 카카오 로그인 페이지(동의하고 계속하기)가 정상적으로 열림
=>
“동의하고 계속하기” 버튼 클릭시
콘솔에 아래와 같은 오류가 발생하면서 앱이 멈춤
I/ViewRootImpl@c4739fbMainActivity: stopped(false) old = false
I/ViewRootImpl@c4739fbMainActivity: bhv=DEFAULT
I/ViewRootImpl@c4739fbMainActivity: fitSides= naviIconColor=0}
I/ViewRootImpl@c4739fbMainActivity: bhv=DEFAULT
I/ViewRootImpl@c4739fbMainActivity: fitSides= naviIconColor=0}
I/ViewRootImpl@c4739fbMainActivity: MSG_WINDOW_FOCUS_CHANGED 1 0
a. 환경 설정
- 카카오 사이트 설정
[앱 키]
네이티브 앱 키 9c3e7d4ec6dbe1a554bb5ffd90f74ac3
REST API 키 9b3f2a7a72778e0d58b58ef27a7769b3
JavaScript 키 93e601db969707e623e693bfd727c53b
Admin 키 d16360c938ed61bbd59fe0c21ddf5711
[플랫폼 등록]
Android :
패키지명 com.example.sns_login
마켓 URL market://details?id=com.example.sns_login
키 해시
MT8/Pz8/XHU/BT8/Cg==
Web :
사이트 도메인
http://localhost
기본 도메인
http://localhost
-
[android\app\src\main\AndroidManifest.xml] 설정
<!-- 카카오 로그인 커스텀 URL 스킴 설정 --> <activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity" android:exported="true"> <intent-filter android:label="flutter_web_auth"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <!-- "kakao${YOUR_NATIVE_APP_KEY}://oauth" 형식의 앱 실행 스킴 설정 --> <!-- 카카오 로그인 Redirect URI --> <data android:scheme="kakao9c3e7d4ec6dbe1a554bb5ffd90f74ac3" android:host="oauth"/> </intent-filter> </activity>
b. 로그인 코드 작성
- [main.dart]
void main() {
WidgetsFlutterBinding.ensureInitialized(); //1.웹환경에서도 초기화 잘되게함
KakaoSdk.init(
nativeAppKey: ‘9c3e7d4ec6dbe1a554bb5ffd90f74ac3’, // 카카오에서 발급받은 키
javaScriptAppKey: ‘93e601db969707e623e693bfd727c53b’,
); //Kakao SDK 초기화
runApp(const MyApp());
}
- 뷰 : [login_view.dart] 파일에 카카오 로그인 버튼 추가
class LoginView extends StatefulWidget {
const LoginView({super.key});
@override
State createState() => _LoginViewState();
}
class _LoginViewState extends State {
final kakaoViewModel = KakaoViewModel(KakaoLogin());
//카카오 로그인 뷰모델
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘카카오 로그인’, style: Theme.of(context).textTheme.titleLarge)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
await kakaoViewModel.login();
setState(() {});
},
child: const Text(“LogIn”),
),
Text(
‘로그인상태:${kakaoViewModel.isLogined}’,
style: Theme.of(context).textTheme.headlineSmall,
),
ElevatedButton(
onPressed: () async {
await kakaoViewModel.logout();
setState(() {});
},
child: const Text(“Logout”),
), ], ), ), ); }
}
- 뷰모델 : [kakao_view_model.dart]
class KakaoViewModel {
final SocialLogin _socialLogin;
bool isLogined = false;
User? user;
KakaoViewModel(this._socialLogin);
Future login() async {
isLogined = await _socialLogin.login();
if (isLogined) {
user = await UserApi.instance.me(); //카카오 사용자 정보 가져오기
print(“로그인 성공 : ${user!.kakaoAccount}”);
}
}
Future logout() async {
await _socialLogin.logout();
isLogined = false;
user = null;
}
}
4.레포지토리 :
[social_login.dart] - 추상 클래스
abstract class SocialLogin {
Future login();
Future logout();
}
[kakao_login.dart] 파일에 카카오 로그인 버튼 추가
class KakaoLogin implements SocialLogin {
@override
Future login() async {
try {
bool isInstalled = await isKakaoTalkInstalled(); //카카오톡 설치여부 확인
if (isInstalled) {
try {
await UserApi.instance.loginWithKakaoTalk(); // 카카오톡 로그인
return true;
} catch (e) {
return false;
}
} else {
try {
await UserApi.instance.loginWithKakaoAccount(); // 카카오계정 로그인
return true;
} catch (e) {
return false;
}
}
} catch (e) {
return false;
}
}
@override
Future logout() async {
try {
await UserApi.instance.unlink();
return true;
} catch (e) {
return false;
}
}
}