이 게시물의 내용은 제가 플러터를 사용하여 카카오톡 로그인 기능을 직접 구현하며 정리한 내용입니다! 혹시 잘못된 내용이나 오타, 개선할 사항이 있으시면 편하게 댓글 남겨주세요! 🙇‍♂️

참고자료
- Kakao Flutter SDK pub dev: https://pub.dev/packages/kakao_flutter_sdk
- Kakao SDK 사전 준비 문서 : https://developers.kakao.com/docs/latest/ko/flutter/getting-started
- Kakao 로그인 문서: https://developers.kakao.com/docs/latest/ko/kakaologin/flutter

⚙️ 1. 사전 환경 설정

사전 설정할 것들이 꽤나 많은데요!! 차근차근 살펴보겠습니다 👏

0) kakao developers 앱 생성

우선 https://developers.kakao.com/에 접속 후 로그인 한 다음 상단의 내 애플리케이션을 클릭하고 애플리케이션을 하나 추가합니다.

1) 안드로이드 설정

flutter 프로젝트 폴더의 android > app > src > main > AndroidManifest.xml 파일에 아래의 내용을 반영하여 내용 추가
- 카카오 로그인
  - <application> 엘리먼트(Element) 하위에 카카오 로그인 Redirect URI 설정을 위한 <activity> 엘리먼트 추가
- 카카오톡 공유, 카카오톡 메시지
  - android:name=".MainActivity" 속성을 갖는 <activity> 엘리먼트(Element) 하위에 <data android:host="${PRODUCT_NAME}" android:scheme="kakao${YOUR_NATIVE_APP_KEY}" /> 형식의 엘리먼트를 포함하는 <intent-filter> 추가
- Android 12(API 31) 이상 타깃 앱인 경우, exported 속성을 반드시 true로 선언
- 위 내용들을 반영한 AndroidManifest.xml은 아래 내용들을 포함합니다. (ChatGPT에 현재 AndroidManifest.xml 코드 넣고 아래 코드 반영해달라고 하시면 쉽게 추가 가능합니다 😆)

<application>

    <!-- 카카오 로그인 커스텀 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="kakao${YOUR_NATIVE_APP_KEY}" android:host="oauth"/>
        </intent-filter>
    </activity>

    <!-- 카카오톡 공유, 카카오톡 메시지 커스텀 URL 스킴 설정 -->
    <activity
        android:name=".MainActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:exported="true"
        android:hardwareAccelerated="true"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:windowSoftInputMode="adjustResize">
        <!-- 생략 -->

        <intent-filter>
            <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}://${PRODUCT_NAME}" 형식의 앱 실행 스킴 설정 -->
            <!-- 카카오톡 공유, 카카오톡 메시지 -->
            <data android:host="kakaolink"
                android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
        </intent-filter>
    </activity>
</application>

이때 위의 코드에서 ${YOUR_NATIVE_APP_KEY}에는 Kakao Developers에서 만든 앱 페이지로 들어간 다음 “앱 키”에 있는 네이티브 앱 키를 추가합니다. (앱 키가 12345면 kakao12345로 작성해면 됩니다)

2) iOS 설정

아래와 같이 2가지 항목 수행
- 앱 실행 허용 목록 추가
- 커스텀 URL 스킴 설정

앱 실행 허용 목록

flutter 프로젝트 폴더의 ios > Runner > Info.plist에 아래의 내용 추가

<key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
      <!-- 카카오톡 공유 -->
      <string>kakaolink</string>
      <!-- 카카오톡 채널 -->
      <string>kakaoplus</string>
  </array>

커스텀 URL 스킴

ios 폴더를 우클릭하고 “Open in Xcode” 클릭
다음으로 Runner를 클릭한 다음 아래 그림과 같이 Info의 URL Types에 [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 kakao${NATIVE_APP_KEY} 형식으로 등록
- 예를 들어 네이티브 앱 키가 "123456789"라면 [URL Schemes]에 "kakao123456789"를 입력

이때 ios > Runner > Info.plist에 아래와 같은 내용이 추가되었는지를 확인합니다. 해당 내용이 없으면 추가해주셔야합니다.

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>kakao123456789</string>
			</array>
		</dict>
	</array>

에러 발생

저의 경우는 아래와 같은 에러가 발생했는데요

Error: The plugin "kakao_flutter_sdk_common" requires a higher minimum iOS deployment version than your application is targeting.
To build, increase your application's deployment target to at least 13.0 as described at https://flutter.dev/to/ios-deploy
Error running pod install
Error launching application on iPhone 15.

이 경우 ios/Podfile 을 열고 아래의 내용을 수정하니 해결되었습니다.

# ios/Podfile

platform :ios, '13.0'  # ✅ 이 줄을 수정

3) 설치

pubspecs.yaml의 dependencies에 아래와 같이 추가해서 설치 가능 (kakao_flutter_sdk: ^1.9.5 하나만 추가해서 전체 설치해도 됨 )

dependencies:
  kakao_flutter_sdk: ^1.9.5 # 전체 추가
  kakao_flutter_sdk_user: ^1.9.5 # 카카오 로그인 API 패키지
  kakao_flutter_sdk_share: ^1.9.5 # 카카오톡 공유 API 패키지
  kakao_flutter_sdk_talk: ^1.9.5 # 카카오톡 채널, 카카오톡 소셜, 카카오톡 메시지 API 패키지
  kakao_flutter_sdk_friend: ^1.9.5 # 피커 API 패키지
  kakao_flutter_sdk_navi: ^1.9.5 # 카카오내비 API 패키지

혹은 아래와 같이 터미널에 명령어를 입력해 전체 패키지를 추가할 수도 있음

$ flutter pub add kakao_flutter_sdk

4) 초기화

다음으로 Flutter 프로젝트의 main() 함수 안에서 Flutter SDK 초기화 메서드인 init()을 호출
- runApp() 메서드 호출 전 Flutter SDK를 초기화해야함
초기화 시 앱 키를 입력해야 함 → init() 메서드 호출 시 아래 내용을 참고해 필요한 앱 키를 전달
- 네이티브 앱만 서비스
  - 네이티브 앱 키를 사용해 모든 카카오 API 호출
  - init() 호출 시 nativeAppKey 파라미터로 네이티브 앱 키 전달
- 웹만 서비스
  - JavaScript 키를 사용해 모든 카카오 API 호출
  - init() 호출 시 javaScriptAppKey 파라미터로 JavaScript 키 전달
- 웹, 네이티브 앱 모두 서비스
  - JavaScript 키를 사용해 일부 카카오 API 호출, 네이티브 앱 키와 JavaScript 키 모두 필요
  - init() 호출 시 nativeAppKey 파라미터로 네이티브 앱 키, javaScriptAppKey 파라미터로 JavaScript 키 각각 전달
예시 코드

import 'package:kakao_flutter_sdk_common/kakao_flutter_sdk_common.dart';

void main() {
    ...
    // 웹 환경에서 카카오 로그인을 정상적으로 완료하려면 runApp() 호출 전 아래 메서드 호출 필요
    WidgetsFlutterBinding.ensureInitialized();

    // runApp() 호출 전 Flutter SDK 초기화
    KakaoSdk.init(
        nativeAppKey: '${YOUR_NATIVE_APP_KEY}',
        javaScriptAppKey: '${YOUR_JAVASCRIPT_APP_KEY}',
    );
    runApp(MyApp());
    ...
}

5) 플랫폼 등록

Kakao developers의 앱 페이지에서 앱설정 > 플랫폼을 클릭하고 원하는 플랫폼에 등록합니다.

iOS 플랫폼 등록

이때 iOS의 경우 iOS 플랫폼 등록을 클릭 후 번들 ID를 입력해야합니다.
- 이는 ios/Runner.xcodeproj/project.pbxproj 파일에 PRODUCT_BUNDLE_IDENTIFIER의 값을 입력합니다.
- 예를 들어 코드가 다음과 같이 되어있으면 com.yourcompany.yourapp을 입력하면 됩니다.

PRODUCT_BUNDLE_IDENTIFIER = com.yourcompany.yourapp;

안드로이드 플랫폼 등록

안드로이드는 아래 그림과 같이 패키지명과 키 해시를 입력해야합니다.

"패키지명"의 경우 android/app/build.gradle 파일 내부에 보면 아래와 같은 예시와 같이 applicationId에 적힌 값을 "패키지 명"에 입력하면 됩니다. (현재 예시에서는 com.yourcompany.yourapp를 입력)

android {
    namespace = "com.yourcompany.yourapp"
    compileSdk = flutter.compileSdkVersion
    ndkVersion = flutter.ndkVersion

    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId = "com.yourcompany.yourapp"

"키 해시"의 경우 플러터에서 아래와 같은 함수를 사용하여 얻은 Key Hash의 값을 입력하면 됩니다.

Future<void> _printKakaoKeyHash() async {
  try {
    String keyHash = await KakaoSdk.origin;
    print('현재 앱의 Kakao Key Hash: $keyHash'); // Logger를 사용하여 출력
  } catch (e) {
    print('Kakao Key Hash를 가져오는 중 오류 발생: $e'); // 오류 발생 시 로그 출력
  }
}

🔑 2. 카카오톡 로그인하기

참고: https://developers.kakao.com/docs/latest/ko/kakaologin/flutter#login-with-kakao-talk
카카오를 기반으로 하는 로그인은 다음과 같이 앱 서비스와 웹 서비스환경에 대해 적용이 가능하고 이 중에서도 카카오톡을 실행해서 로그인 하는 방식과 카카오 계정 로그인 페이지로 로그인 하는 두가지 방식이 있습니다.

이 글에서는 이 중 네이티브 앱 서비스에서 카카오톡을 실행해 카카오 로그인을 하는 방식과 카카오 계정으로 로그인 하는 내용에 대해 살펴보겠습니다

1) 예제 로그인 코드

우선 Kakao Developers 페이지에서 제공하는 Flutter로 카카오톡 로그인을 수행하는 dart의 예제 코드는 다음과 같습니다.

// 카카오 로그인 구현 예제

// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
if (await isKakaoTalkInstalled()) {
  try {
      await UserApi.instance.loginWithKakaoTalk();
      print('카카오톡으로 로그인 성공');
  } catch (error) {
    print('카카오톡으로 로그인 실패 $error');

    // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
    // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
    if (error is PlatformException && error.code == 'CANCELED') {
        return;
    }
    
    // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
    try {
        await UserApi.instance.loginWithKakaoAccount();
        print('카카오계정으로 로그인 성공');
    } catch (error) {
        print('카카오계정으로 로그인 실패 $error');
    }
  }
} else {
  try {
    await UserApi.instance.loginWithKakaoAccount();
    print('카카오계정으로 로그인 성공');
  } catch (error) {
    print('카카오계정으로 로그인 실패 $error');
  }
}

우선 isKakaoTalkInstalled()를 사용하여 카카오톡 실행 가능 여부를 확인합니다.
- true가 반환되는 경우 카카오톡으로 로그인을 수행하는 loginWithKakaoTalk 을 실행합니다.
- false가 반환되는 경우 카카오 계정으로 로그인을 수행하는 loginWithKakaoAccount를 실행합니다.
현재 제가 사용하고 있는 시뮬레이터에서는 카카오톡이 설치되어 있지 않기 때문에 아래와 같이 UserApi.instance.loginWithKakaoAccount()를 통해 카카오 계정으로 로그인하도록 합니다. 이에 따라 아래와 같은 창이 나오는 것을 확인할 수 있습니다.

여기서 카카오 계정으로 로그인 하는 경우 다음과 같은 창이 나오는 것을 확인할 수 있습니다.

여기서 확인하고 계속하기를 누르면 로그인이 성공적으로 완료됩니다! 🥳

또한 카카오 계정 로그인 말고 loginWithKakaoTalk을 통해 카카오톡으로 로그인이 잘 되는지 확인하기 위해 시뮬레이터가 아니라 카카오톡이 설치된 핸드폰에 앱을 설치하고 사용했을 때에도 로그인이 잘 됩니다! 🎊

🚫 잠깐!! → 하지만 이렇게 하면 매번 앱에 접속할때마다 카카오톡이나 카카오 계정으로 로그인을 해야합니다! 만약 사용자가 기존에 로그인을 해서 기존에 유효한 토큰이 있다면 로그인 과정을 생략하도록 구현을 해보겠습니다

2) 유효한 토큰이 있으면 로그인 생략하기

이를 위해 아래와 같이 함수를 구현을 했습니다.
- logger를 통해 관련 정보를 출력하도록 했습니다.
- navigateToScreen(context, const OnboardingScreen()); 은 화면을 OnboardingScreen()으로 전환하는 함수입니다.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';
import 'package:app/screens/start/onboarding_screen.dart';
import 'package:app/utils/navigate.dart';
import 'package:logger/logger.dart';

final logger = Logger();

Future<void> handleKakaoLogin(BuildContext context) async {
  try {
    if (await AuthApi.instance.hasToken()) {
      try {
        AccessTokenInfo tokenInfo = await UserApi.instance.accessTokenInfo();
        OAuthToken? token =
            await TokenManagerProvider.instance.manager.getToken();

        logger.i(
            '✅ 기존 토큰 유효: userId=${tokenInfo.id}, accessToken=${token?.accessToken}');

        User user = await UserApi.instance.me();
        logger.i('✅ 자동 로그인 성공: 닉네임=${user.kakaoAccount?.profile?.nickname}');

        if (context.mounted) {
          navigateToScreen(context, const OnboardingScreen());
        }
        return;
      } catch (error) {
        if (error is KakaoException && error.isInvalidTokenError()) {
          logger.w('⚠️ 토큰 만료됨, 재로그인 필요');
        } else {
          logger.e('❌ 토큰 유효성 체크 실패: $error');
        }
      }
    } else {
      logger.w('🔑 저장된 토큰 없음, 로그인 필요');
    }

    bool isInstalled = await isKakaoTalkInstalled();
    logger.i('카카오톡 설치 여부 확인 결과: $isInstalled');

    if (isInstalled) {
      try {
        OAuthToken token = await UserApi.instance.loginWithKakaoTalk();
        logger.i('✅ 카카오톡 로그인 성공: accessToken=${token.accessToken}');
        User user = await UserApi.instance.me();
        logger.i(
            '✅ 사용자 정보: userId=${user.id}, 닉네임=${user.kakaoAccount?.profile?.nickname}');
        if (context.mounted) {
          navigateToScreen(context, const OnboardingScreen());
        }
        return;
      } catch (error) {
        logger.w('❌ 카카오톡 로그인 실패: $error');
        if (error is PlatformException && error.code == 'CANCELED') return;

        try {
          OAuthToken token = await UserApi.instance.loginWithKakaoAccount();
          logger.i('✅ 카카오계정 로그인 성공: accessToken=${token.accessToken}');
          User user = await UserApi.instance.me();
          logger.i(
              '✅ 사용자 정보: userId=${user.id}, 닉네임=${user.kakaoAccount?.profile?.nickname}');
          if (context.mounted) {
            navigateToScreen(context, const OnboardingScreen());
          }
          return;
        } catch (error) {
          logger.e('❌ 카카오계정 로그인 실패: $error');
          return;
        }
      }
    } else {
      try {
        OAuthToken token = await UserApi.instance.loginWithKakaoAccount();
        logger.i('✅ 카카오계정 로그인 성공: accessToken=${token.accessToken}');
        User user = await UserApi.instance.me();
        logger.i(
            '✅ 사용자 정보: userId=${user.id}, 닉네임=${user.kakaoAccount?.profile?.nickname}');
        if (context.mounted) {
          navigateToScreen(context, const OnboardingScreen());
        }
      } catch (error) {
        logger.e('❌ 카카오계정 로그인 실패: $error');
      }
    }
  } catch (e, stack) {
    logger.e("⚠️ 로그인 중 예외 발생: $e\n$stack");
  }
}

먼저 AuthApi.instance.hasToken()를 통해 이미 토큰이 있다면 로그인 과정을 수행하지 않고 아래의 정보들을 출력하고 화면을 OnboardingScreen()으로 이동시킵니다.
- 사용자 아이디 (tokenInfo.id)
- 사용자 access token (token?.accessToken)
- 사용자 nickname (user.kakaoAccount?.profile?.nickname)
만약 토큰이 만료되었거나, 유효성 체크를 실패했거나, 저장된 토큰이 없는 경우 예제 코드와 동일하게 카카오톡 로그인이나 카카오 계정 로그인을 시도합니다. 로그인이 완료되면 화면을 OnboardingScreen()으로 이동시킵니다.

여기까지의 내용으로 Flutter로 만든 앱에 카카오톡 로그인을 구현하기 위한 사전 준비와 예시 코드들을 모두 살펴보았습니다! 🚀

'스터디 > Flutter' 카테고리의 다른 글

Flutter에 에러 기록을 위한 Sentry 적용하기 (2)	2025.07.13

박사개구리의 블로그

Flutter로 카카오톡 로그인 구현하기

⚙️ 1. 사전 환경 설정

0) kakao developers 앱 생성

1) 안드로이드 설정

2) iOS 설정

앱 실행 허용 목록

커스텀 URL 스킴

에러 발생

3) 설치

4) 초기화

5) 플랫폼 등록

iOS 플랫폼 등록

안드로이드 플랫폼 등록

🔑 2. 카카오톡 로그인하기

1) 예제 로그인 코드

2) 유효한 토큰이 있으면 로그인 생략하기

'스터디 > Flutter' 카테고리의 다른 글

티스토리툴바

Flutter로 카카오톡 로그인 구현하기

⚙️ 1. 사전 환경 설정

0) kakao developers 앱 생성

1) 안드로이드 설정

2) iOS 설정

앱 실행 허용 목록

커스텀 URL 스킴

에러 발생

3) 설치

4) 초기화

5) 플랫폼 등록

iOS 플랫폼 등록

안드로이드 플랫폼 등록

🔑 2. 카카오톡 로그인하기

1) 예제 로그인 코드

2) 유효한 토큰이 있으면 로그인 생략하기

'스터디 > Flutter' 카테고리의 다른 글

관련글

티스토리툴바