Flutter에서 카카오 로그인을 사용하려면 Flutter 코드만 작성하면 되는 것이 아니다.
카카오 개발자 페이지에서 앱을 등록하고, Android와 Web 플랫폼 설정을 먼저 해야 한다.
전체 흐름은 다음과 같다.
Kakao Developers에서 애플리케이션 생성
|
v
Android 플랫폼 등록
|
v
Web 플랫폼 등록
|
v
카카오 로그인 활성화
|
v
Flutter 프로젝트에 Kakao SDK 추가
|
v
main.dart에서 KakaoSdk 초기화
|
v
AndroidManifest.xml 설정
|
v
카카오 로그인 실행1. Kakao Developers에서 애플리케이션 설정하기
먼저 Kakao Developers 사이트에 접속한다.
https://developers.kakao.com/접속 후 다음 순서로 이동한다.
Kakao Developers
|
v
내 애플리케이션
|
v
애플리케이션 선택 또는 생성
|
v
플랫폼 설정Flutter에서 카카오 로그인을 사용하려면 사용하는 플랫폼에 맞게 설정해야 한다.
Android 앱에서 사용
-> Android 플랫폼 설정 필요
Flutter Web에서 사용
-> Web 플랫폼 설정 필요2. Android 플랫폼 설정하기
Android에서 카카오 로그인을 사용하려면 다음 두 가지 정보가 필요하다.
Android 설정에 필요한 값
- 패키지명
- 키 해시패키지명 확인하기
패키지명은 Android 프로젝트의 applicationId 값을 사용한다.
보통 다음 파일에서 확인할 수 있다.
android/app/build.gradle
또는
android/app/build.gradle.kts예시는 다음과 같다.
android {
namespace = "com.example.myapp"
defaultConfig {
applicationId = "com.example.myapp"
}
}여기서 카카오 개발자 페이지에 입력해야 하는 값은 applicationId다.
입력할 패키지명
-> com.example.myapp3. Android 키 해시 구하기
카카오 로그인은 Android 앱을 식별하기 위해 키 해시를 사용한다.
디버그 환경에서는 debug keystore 기준으로 키 해시를 생성한다.
Windows에서는 OpenSSL을 설치한 뒤 명령어를 실행할 수 있다.
OpenSSL 설치 주소
https://slproweb.com/products/Win32OpenSSL.html설치 후 OpenSSL 또는 CMD에서 다음 명령어를 실행한다.
keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64명령어를 실행하면 키 해시 값이 출력된다.
출력된 키 해시
-> Kakao Developers Android 플랫폼 설정에 입력흐름은 다음과 같다.
debug.keystore
|
v
keytool로 인증서 추출
|
v
openssl로 해시 변환
|
v
카카오 키 해시 생성
|
v
Kakao Developers에 등록정리하면 Android 플랫폼에는 다음 값을 입력한다.
패키지명
- android/app/build.gradle의 applicationId
키 해시
- keytool + openssl 명령어로 생성한 값4. Web 플랫폼 설정하기
Flutter Web에서도 카카오 로그인을 사용하려면 Web 플랫폼을 등록해야 한다.
Kakao Developers에서 Web 플랫폼을 추가하고 사이트 도메인을 입력한다.
예를 들어 로컬에서 Flutter Web을 실행하는 경우 다음과 같이 입력할 수 있다.
http://localhost:7777도메인을 등록해야 하는 이유는 카카오가 허용된 사이트에서만 로그인을 처리하기 때문이다.
Flutter Web 실행 주소
|
v
Kakao Developers에 등록된 도메인인지 확인
|
v
등록된 도메인이면 로그인 진행만약 Flutter Web 실행 주소와 등록한 도메인이 다르면 로그인이 정상적으로 동작하지 않을 수 있다.
5. 카카오 로그인 활성화하기
플랫폼 설정을 마쳤다면 카카오 로그인을 활성화해야 한다.
Kakao Developers에서 다음 메뉴로 이동한다.
내 애플리케이션
|
v
제품 설정
|
v
카카오 로그인
|
v
활성화 설정 ON카카오 로그인을 사용하려면 이 설정이 켜져 있어야 한다.
카카오 로그인 활성화 OFF
-> SDK 설정을 해도 로그인 불가
카카오 로그인 활성화 ON
-> 카카오 로그인 사용 가능6. Flutter 패키지 추가하기
Android Studio 또는 프로젝트 터미널에서 필요한 패키지를 추가한다.
flutter pub add kakao_flutter_sdk
flutter pub add http각 패키지의 역할은 다음과 같다.
kakao_flutter_sdk
- Flutter에서 카카오 SDK 사용
http
- HTTP 요청 처리
- URL 호출이나 서버 통신에 사용 가능패키지를 추가한 뒤에는 pubspec.yaml에 의존성이 추가된다.
7. main.dart에서 Kakao SDK 초기화하기
카카오 SDK는 앱이 실행되기 전에 초기화해야 한다.
main.dart에서 runApp()을 호출하기 전에 KakaoSdk.init()을 실행한다.
import 'package:flutter/material.dart';
import 'package:kakao_flutter_sdk/kakao_flutter_sdk.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
KakaoSdk.init(
nativeAppKey: '네이티브 앱 키',
javaScriptAppKey: '자바스크립트 앱 키',
);
runApp(const MyApp());
}각 코드의 의미는 다음과 같다.
WidgetsFlutterBinding.ensureInitialized()
- Flutter 엔진과 플러그인 사용 준비
- runApp() 전에 호출
KakaoSdk.init()
- 카카오 SDK 초기화
- 카카오 앱 키 등록
nativeAppKey
- Android / iOS native 앱에서 사용
javaScriptAppKey
- Flutter Web에서 사용키 값은 Kakao Developers의 내 애플리케이션에서 확인할 수 있다.
Kakao Developers
|
v
내 애플리케이션
|
v
앱 설정
|
v
앱 키8. AndroidManifest.xml 설정하기
Android에서 카카오 로그인을 사용하려면 AndroidManifest.xml 설정이 필요하다.
공식 문서의 Android 설정 코드를 참고해서 추가한다.
공식 문서
https://developers.kakao.com/docs/latest/ko/kakaologin/android보통 수정하는 파일은 다음 위치에 있다.
android/app/src/main/AndroidManifest.xml카카오 로그인은 로그인 후 앱으로 다시 돌아오는 과정이 필요하다.
그래서 AndroidManifest에 카카오 로그인 Redirect 처리를 위한 intent 설정이 들어간다.
카카오 로그인 실행
|
v
카카오톡 또는 카카오 계정 화면으로 이동
|
v
로그인 성공
|
v
다시 내 앱으로 돌아옴
|
v
AndroidManifest 설정을 통해 Redirect 처리9. Android minSdkVersion 설정하기
카카오 SDK를 사용할 때 Android 최소 SDK 버전 설정이 필요할 수 있다.
android/app/build.gradle 또는 build.gradle.kts에서 minSdkVersion을 확인한다.
android {
defaultConfig {
minSdk = 21
}
}또는 Groovy 방식이면 다음처럼 작성할 수 있다.
android {
defaultConfig {
minSdkVersion 21
}
}minSdkVersion은 앱이 지원하는 최소 Android 버전을 의미한다.
minSdkVersion 21
- Android 5.0 이상 지원
- 일부 라이브러리 요구 조건 충족라이브러리 충돌이나 최소 SDK 버전 문제로 빌드가 실패한다면 minSdkVersion을 확인해야 한다.
10. Flutter Web 실행하기
Flutter Web에서 테스트하려면 Chrome으로 실행한다.
사용자가 작성한 실행 명령어는 다음과 같다.
flutter run -d chrome --web-renderer html이 명령어는 Flutter Web을 Chrome에서 실행한다.
flutter run -d chrome
- Chrome으로 Flutter Web 실행
--web-renderer html
- HTML 렌더러 사용단, Flutter 버전이나 환경에 따라 Web 렌더러 옵션 지원 방식이 다를 수 있다.
실행 중 옵션 관련 에러가 발생하면 단순히 다음 명령어로 실행해볼 수 있다.
flutter run -d chrome11. 카카오 로그인 구현 흐름
설정이 끝나면 Flutter 코드에서 카카오 로그인을 실행할 수 있다.
일반적인 흐름은 다음과 같다.
로그인 버튼 클릭
|
v
카카오톡 설치 여부 확인
|
v
카카오톡 로그인 또는 카카오 계정 로그인 실행
|
v
토큰 발급
|
v
사용자 정보 요청
|
v
앱 로그인 처리예시 코드는 다음과 같다.
Future<void> loginWithKakao() async {
try {
OAuthToken token;
if (await isKakaoTalkInstalled()) {
token = await UserApi.instance.loginWithKakaoTalk();
} else {
token = await UserApi.instance.loginWithKakaoAccount();
}
final user = await UserApi.instance.me();
print('카카오 로그인 성공');
print('accessToken: ${token.accessToken}');
print('user id: ${user.id}');
} catch (error) {
print('카카오 로그인 실패: $error');
}
}이 코드는 다음처럼 동작한다.
카카오톡 설치됨
-> loginWithKakaoTalk()
카카오톡 설치 안 됨
-> loginWithKakaoAccount()
로그인 성공
-> OAuthToken 발급
사용자 정보 요청
-> UserApi.instance.me()12. 정리
Flutter에서 카카오 로그인을 사용하려면 Flutter 코드와 Kakao Developers 설정을 함께 해야 한다.
핵심 순서는 다음과 같다.
1. Kakao Developers에서 애플리케이션 생성
2. Android 플랫폼 등록
3. 패키지명 입력
4. 키 해시 등록
5. Web 플랫폼 도메인 등록
6. 카카오 로그인 활성화
7. Flutter 프로젝트에 kakao_flutter_sdk 추가
8. main.dart에서 KakaoSdk.init() 호출
9. AndroidManifest.xml 설정
10. minSdkVersion 확인
11. 로그인 코드 작성Android 설정 핵심은 다음과 같다.
Android
- applicationId를 패키지명으로 등록
- debug keystore 기준 키 해시 생성
- Kakao Developers에 키 해시 등록
- AndroidManifest.xml 설정
- minSdkVersion 21 확인Web 설정 핵심은 다음과 같다.
Web
- 사이트 도메인 등록
- 예: http://localhost:7777
- javaScriptAppKey 사용Flutter 코드 핵심은 다음과 같다.
void main() {
WidgetsFlutterBinding.ensureInitialized();
KakaoSdk.init(
nativeAppKey: '네이티브 앱 키',
javaScriptAppKey: '자바스크립트 앱 키',
);
runApp(const MyApp());
}즉, 카카오 로그인은 다음 세 가지가 맞아야 정상적으로 동작한다.
Kakao Developers 설정
+ Flutter SDK 초기화
+ Android / Web 플랫폼 설정