flutter 플러터 - 카카오톡으로 로그인

1. 카카오 개발자 콘솔에서 프로젝트 설정

https://developers.kakao.com/

Kakao Developers

 

로고, 앱이름, 회사이름, 카테고리 설정하고 애플리케이션을 추가하기면 이렇게 뜹니다.

추가된 앱을 클릭해서 들어가봅시다. 

 

 

카카오 로그인으로 들어가 활성화 하고

필요한 개인정보들을 설정합니다.

 

이메일을 필수동의로 받으려면 비즈앱 전환이 필요합니다.

회사에서 쓰시는게 아니라면 개인개발자 비즈앱 전환을 통해 비즈앱 전환하실 수 있습니다.

 

앱키들을 확인해줍니다.

 

2. 플러터  프로젝트  설정

https://pub.dev/packages/kakao_flutter_sdk_user

kakao_flutter_sdk_user | Flutter package

 

터미널에서 카카오 sdk 를 추가해줍니다.

flutter pub add kakao_flutter_sdk_user

 

pupspec.yml 에 직접 추가 후 flutter pub get 을 하셔도 됩니다.

로그인만 하실거면 kakao_flutter_sdk_user 만 받으셔도 됩니다.

 

안드로이드와 ios 에 각각 설정이 필요합니다.

헷갈리지 않게 천천히 따라와봅시다.

 

3. 안드로이드 설정

-/android/app/src/main/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>

</application>

 

activity 태그 안에 intent-filter 부분을 추가해줍니다.

 

4. iOS 설정

앱 실행을 위해 앱 실행 허용 목록을 설정해야 합니다.

-/ios/Runner/Info.plist

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

 

로그인만 하실거라면 kakaolink, kakaoplus 는 추가하지 않아도 됩니다.

 

서비스 앱 실행을 위해 커스텀 URL 스킴 설정을 합니다.

-/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>

 

info.plist 에 직접 추가하셔도 되고 runner->info-> url type 에서 추가하셔도 됩니다.

 

-/ios/Runner/AppDelegate.swift

import Flutter
import UIKit
import KakaoSDKCommon

@main
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      KakaoSDK.initSDK(appKey: "앱키")
    GeneratedPluginRegistrant.register(with: self)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

 

KakaoSDK.initSDK(appKey: "") <- 를 추가해줍니다.

 

5. 플러터 설정

플러터에서 main 함수가 있는 파일로 이동합니다.

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());
    ...
}

 

드디어 설정이 끝났습니다.

이제 코드 구현이 필요합니다.

 

6. 플러터 구현

버튼에 사용할 카카오 로그인 버튼 이미지는 이곳에서 다운받을 수 있습니다.

https://developers.kakao.com/tool/resource/login

Kakao Developers

원하시는 곳에 버튼을 만들어 줍니다.

GestureDetector(
    child: Image.asset(
      'images/login/kakao_login_medium_narrow.png',
    ),
    onTap: () async {
      try {
        OAuthToken token = await UserApi.instance.loginWithKakaoTalk();
        print('카카오톡으로 로그인 성공 ${token.accessToken}');
        // await dio.get('http://localhost:8080/oauth/kakao/+${token.accessToken}');
      } catch (error) {
        print('카카오톡으로 로그인 실패 $error');
      }
    },
  ),

 

버튼 클릭시 액세스 토큰을 성공적으로 보여줍니다.

 

저는 스프링으로 서버를 구현해 서버로 액세스 토큰을 보내주고

해당 엑세스 토큰을 이용해 카카오 서버에서 유저 정보를 받아오는 식으로 구현했습니다.

 

+iOS 에러 발생시

Swift Compiler Error (Xcode): No such module 'KakaoSDKCommon' 혹은

ios/Runner.xcodeproj Missing package product 'KakaoSDKCommon'

Missing package product 'KakaoSDKCommon' flutter

에러 발생시

 

-/ios/Podfile

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  pod 'KakaoSDKFriend'

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  target 'RunnerTests' do
    inherit! :search_paths
  end
end

  

Podfile 에서 pod 'KakaoSDKFriend'이걸 추가해 보세요.