[Flutter] Firebase + Kakao Login 로그인 기능 만들기

Flutter 에서 Firebase Authentication 과 Kakao Login 을 활용해서 카카오 로그인 기능을 만드는 방법

 

순서는 다음과 같습니다.

1. Kakao 애플리케이션 생성 및 네이티브 앱 키 & Client Secret 키 생성

2. Firebase OpenID Connect 셋팅

3. Flutter 프로젝트 pubspec.yaml 파일에 kakao 패키지 추가

4. 플랫폼별 설정 작업

5. main() KakaoSDK 초기화 작업

6. 로그인 코드 구현

7. kakao developers 에서 각 플랫폼 등록

8. kakao developers 로그인에서 OpenID Connect 활성화 설정

 

1. Kakao 애플리케이션 생성

1. 애플리케이션 추가

kakao developers 방문해서 애플리케이션 추가

 

앱 이름, 회사명, 카테고리는 크게 큰 의미는 없다 입력만 되면 되는것 같습니다

 

2. 카카오 로그인 활성화

- 내 애플리케이션 > 앱 설정 > 대시보드 > 카카오 로그인 설정하기

or

- 내 애플리케이션 > 제품 설정 > 카카오 로그인

 

3. 네이티브 앱 키 메모지에 복사해놓기 (Firebase 셋팅때 사용)

내 애플리케이션 > 앱 설정 > 앱 키

4. 클라이언트 보안 비밀번호 메모지에 복사해놓기 (Firebase 셋팅때 사용)

내 애플리케이션 > 제품 설정 > 카카오 로그인 > 보안

코드 생성 해서 생성된 코드 복사해놓기

 

 

2. Firebase  OpenID Connect 셋팅

1. 새 제공업체 추가

 

2. OpenID Connect 추가

 

3. 새 OIDC 제공업체 정의

• 이름 : 원하는 이름으로 작성
• 클라이언트 ID : '내 애플리케이션 > 앱 설정 > 앱 키 ' 경로의 네이티브 앱 키
• 발급자(URL) : https://kauth.kakao.com (정확히 똑같이 입력)
• 클라이언트 보안 비밀번호 : '내 애플리케이션 > 제품 설정 > 카카오 로그인 > 보안 ' 에서 생성한 Client Secret 코드

자동적으로 odic.${이름} 으로 제공업체 id 가 생성

 

 

3. pubspec.yaml 파일에 kakao 패키지 추가

kakao_flutter_sdk 추가

2024.12.26 기준 kakao_flutter_sdk 1.9.6 버전 입니다. 참고!!

 

 

4. 플랫폼 별 kakao sdk 작업

1. Android 작업

공식 문서 참고

 

아래의 코드를 복사해서 AndroidManifest.xml 에 붙혀넣어봅시다!!!

 

경로는 -> 프로젝트/android/app/src/main/AndroidManifest.xml 경로에 추가하기

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="flutter_google_login"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:taskAffinity=""
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            ...
        </activity>

        // ------------- 추가해야하는 부분 (시작)-------------
        <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" />
                <data android:scheme="kakao${네이티브 앱 키}" android:host="oauth" />
            </intent-filter>
        </activity>
       // ------------- 추가해야하는 부분 (끝)-------------

        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>

    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT" />
            <data android:mimeType="text/plain" />
        </intent>
    </queries>
</manifest>

 

네이티브 앱 키 값이 12345678 이라면  <data android:scheme="kakao12345678" android:host="oauth" /> 라고 입력하면 된다.

 

 

2. iOS 작업

XCode 에서 직접 작업해주거 VScode or AndroidStudio 에서 작업하는 2가지 방법이 있습니다.

 

2.1 XCode 외 VScode 혹은 AndroidStudio 에서 직접 추가

경로 -> 프로젝트/ios/runner/Info.plist 경로에 추가

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>kakao${네이티브 앱 키}</string>
        </array>
    </dict>
</array>

 

2.2 Xcode 에서 URL Types 추가

Runner -> TARGETS RUnner -> Info -> URL Types 에서 URL Schemes 에 네이티브 앱 키 추가

 

 

5. main() 함수에 Kakao SDK 초기화 작업

void main(){
  KakaoSdk.init(
    nativeAppKey: '${NATIVE_APP_KEY}',
    javaScriptAppKey: '${JAVASCRIPT_APP_KEY}',
  );
  
  runApp(...);
}

 

 

6. 로그인 코드 구현

void _kakaoLogin() async {
    try {
      OAuthToken token = await UserApi.instance.loginWithKakaoAccount();

	  // 예제에서 Firebase 의 공급업체 이름을 kakao_login 라고 명명함
      var provider = OAuthProvider('oidc.kakao_login');
      var credential = provider.credential(
        idToken: token.idToken,
        accessToken: token.accessToken,
      );
      _auth.signInWithCredential(credential);
    } catch(error) {
      ...
    }
}

 

7. kakao developers 에서 각 플랫폼 등록

내 애플리케이션 > 앱 설정 > 플랫폼

 

Android 의 경우 패키지명, 키 해시 값 등록

 

iOS 의 경우 번들 ID 값 입력

 

8. kakao developers 로그인에서 OpenID Connect 활성화 설정

내 애플리케이션 > 제품 설정 > 카카로 로그인

OpenID Connect 활설화 ON 해줍니다.