[Flutter] 카카오 로그인하기 (iOS/Android)

1. kakao developer 에서 애플리케이션 등록하기

- 내 애플리케이션 이름

  애플리케이션 이름 등록

 

- 사업자명

  사업자 명이 없어서 우선 애플리케이션 이름과 동일하게 등록했습니다.

 

 

 

 

 

 

 

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

dependencies
  kakao_flutter_sdk_user: ^1.2.1 # 카카오 로그인

pubspec.yaml 파일에 해당 의존성을 설정해준 후  $ flutter pub get 실행해 줍니다.

 

• 에러 발생1 : Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See`https://guides.cocoapods.org/syntax/podfile.html#platform`
  • 해결방법
    PodFile 에서 target platform을 ‘9.0’ 으로 바꾸어 주자
    

 

• 에러 발생2 : [!] CocoaPods could not find compatible versions for pod "kakao_flutter_sdk_common": In Podfile: kakao_flutter_sdk_common (from .symlinks/plugins/kakao_flutter_sdk_common/ios)
  Specs satisfying the kakao_flutter_sdk_common (from .symlinks/plugins/kakao_flutter_sdk_common/ios) dependency were found, but they required a higher minimum deployment target.
  • 해결방법
    kakao_flutter_sdk_common은 iOS 버전 '11.0'을 최소한으로 지원합니다. 
    따라서 Podfile의 타깃 버전을 다시 한번 바꾸어 주었습니다.
    

 

 

 

 

 

 

 

3. Flutter 네이티브 앱 키 서명

- kakao developer -> 내 애플리케이션 -> 앱설정 -> 앱 키에서 네이티브 앱 키를 복사합니다.

  ** 네이티브 앱 키는 뒤에서도 계속 필요합니다.

 

- lib/main.dart

  위에서 복사한 네이티브 앱 키를 붙어 넣어줍니다.

void main() {
  KakaoSdk.init(nativeAppKey: '${YOUR_NATIVE_APP_KEY}');
  runApp(const MyApp());
}

 

 

 

 

 

 

 

4. 플랫폼 정보 입력 및 설정 - Android 

kakao developer에서 내 애플리케이션 -> 앱 설정 -> 플랫폼 -> Andoird 수정 

- 패키지명

   android/app/src/main/AndroidManifest.xml 파일의 package=${패키지명} 

   ${패키지명} 을 위의 패키지명에 입력하여 줍니다.

 

- 마켓 URL 

   입력하지 않아도 됩니다.

 

- 키해시

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android#add-key-hash

## Mac 디버그 키 해시
$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

## Windows 디버그 키 해시
$ keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

terminal에서 위의 명령어를 통해서 키를 얻습니다. 얻은 키를 키해시 칸에 등록합니다.

 

- 인터넷 사용 권한

   android/app/src/main/AndroidManifest.xml 에 인터넷 사용 권한 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.sample">
 
    <!-- 인터넷 사용 권한 설정-->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
    android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
    ...

- 앱키 설정

${Native_APP_KEY} 부분에  내 애플리케이션에 해당하는 앱 키를 등록해줍니다.

					
			...
        </activity>
				

        <!-- 카카오 앱 키 설정 --> 
        <activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity">
            <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${NATIVE_APP_KEY}" android:host="oauth"/>
            </intent-filter>
        </activity>

       
        <meta-data
            ...

 

 

 

 

 

 

 

5. 플랫폼 정보 입력 및 설정 - iOS

kakao developer에서 내 애플리케이션 -> 앱 설정 -> 플랫폼 -> iOS 수정 

- 번들 ID

Runner -> Signing & Capabilities 에서 Bundle identifier 복사 후 번들ID 입력

- 앱 실행 허용 목록 설정하기

   Info.plist 파일에 아래의 코드와 같은 Array 타입의 Keyd와 Value를 넣어줍니다. 이 설정은 사용자 정보 보호를 위한 OS정책에 따라 필요합니다.

<key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
  </array>

 

- URL Schemes 설정하기

   Xcode 실행 후 Runner → Info → URL Types → (+아이콘 클릭)

   → URL Schemes 에 kakao${NATIVE_APP_KEY} 형식으로 입력해줍니다.

       kakao developer -> 내 애플리케이션 -> 앱설정 -> 앱 키 에서 NATIVE_APP_KEY를 얻을 수 있습니다.

 

 

 

 

 

 

 

 

 

 

6. 카카오 로그인 관리자 설정 (KOE004)

- 카카오 로그인 활성화 

kakao Developer -> 내 애플리케이션 -> 카카오 로그인 에서 카카오 로그인 기능을 활성화시킵니다.

- OpenId Connect 활성화

활성화 해야지 토큰을 받을 수 있습니다.

 

 

 

 

 

 

 

 

 

 

7. AccessToken 받아오기

- 카카오 동의항목 체크

동의항목을 필수로 설정하기 위해서는 비즈니스 앱 설정이 필요합니다. 비즈니스 앱은 아이콘 등록 후 간단히 전환할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

8. AccessToken 받아오기

  /**
   * 카카오톡 열기
   */
  void tabSignUpKakaoBtn(BuildContext context) async {
    try {
      if (await isKakaoTalkInstalled()) {
        await UserApi.instance.loginWithKakaoTalk();
      } else {
        await UserApi.instance.loginWithKakaoAccount();
      }
      getKakaoAccessToken();
    } catch (error) {
      print(error.toString());
    }
  }

  /**
   *  kakao accessToken 받아오기
   */
  void getKakaoAccessToken () async {
    var tokenManager = await TokenManagerProvider.instance.manager.getToken();
    print(tokenManager?.accessToken);
  }

 

 

 

 

 

• Could not register as server for FlutterObservatoryPublisher삽질하다가 네이티브 앱키를 재발급 받고 해결하였다.

 

 

https://developers.kakao.com/docs/latest/ko/kakaologin/flutter

Kakao Developers