[Flutter] Firebase 로그인 : Kakao

euni·2025년 3월 22일

Firebase flutter kakao

Flutter

목록 보기

2/12

카카오 로그인 연동은 Firebase 공식 지원 패키지가 아닌 서드파티 패키지이므로, 직접 구축한 서버에서 Custom Token을 발급 받을 수 있어야 합니다.

사전 준비 - kakao developer

1. 애플리케이션 추가하기

2. 플랫폼 등록하기

3. 안드로이드 키 해시 추출

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

시작하기

1. 안드로이드

Flutter 프로젝트의 [${Project}] > [android] > [app] > [src] 경로 내부의 AndroidManifest.xml 파일을 수정합니다.

<application> 엘리먼트(Element) 하위에 카카오 로그인 Redirect URI 설정을 위한 <activity> 엘리먼트 추가

<!-- 카카오 로그인 커스텀 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>

2. IOS

앱 실행 허용 목록
- 설정 경로: [TARGET] > [Info] > [Custom iOS Target Properties]
- kakaokompassauth: 카카오 로그인
[이미지 추가하기]
URL Schemes
- 설정 경로: [TARGET] > [Info] > [URL Types] > [URL Schemes]
- [Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 kakao${NATIVE_APP_KEY} 형식으로 등록

설치

1. pubspec.yaml 파일에 의존성 설정

kakao_flutter_sdk: ^1.9.5 # 전체 추가
kakao_flutter_sdk_user: ^1.9.5 # 카카오 로그인 API 패키지

2. 초기화

main() 함수 안에서 Flutter SDK 초기화 메서드인 init() 메서드 호출
- 반드시 runApp() 메서드 호출 전에 Flutter SDK를 초기화 할 것

작동 방식

💡 OAuthToken 방식
1. 카카오 sdk 로그인 → accessToken 발급
2. POST/auth/kakao 호출 → res : customToken 발급
3. FirebaseAuth.signInWithCustomToken (자체 API) 호출
→ CustomToken 이용한 Firebase 로그인 → UserCredential 반환 → Authentication 로그인 → Firebase Token 발급 가능
4. POST/auth 호출 → Firebase Token 이용하여, POST API 호출

코드 구현 예시

login_button_controller.dart

  case SigninWith.kakao:
    return FirebaseClient.instance.signInWithKakao().then((_) {
      return NetworkClient.auth.insert('kakao');
    });

firebase_client.dart

  // 카카오 로그인
  Future<UserCredential> signInWithKakao() async {
    return Kakao.UserApi.instance.loginWithKakaoAccount().then((accessToken) {
      return NetworkClient.auth
          .insertKakao(accessToken: accessToken.accessToken)
          .then((customToken) {
        // Firebase 로그인
        return auth.signInWithCustomToken(customToken);
      });
    });
  }

auth_network_provider

  // 카카오톡 로그인 위한 customToken 반환
  Future<String> insertKakao({required String accessToken}) {
    return getDioClient().then((api) {
      return api
          .post('/auth/kakao', data: {'accessToken': accessToken}).then((res) {
        return res.data['customToken'] as String;
      });
    });
  }