[Flutter] 카카오 로그인 구현하기

1. https://developers.kakao.com/console/app 에서 내 어플리케이션 추가하기

2. IOS - ios/Runner.xcodeproj/project.pbxproj 파일 -> PRODUCT_BUNDLE_IDENTIFIER 속성 복사해서 iOS 번들 ID에 추가

3.  카카오 로그인 활성화 해주기

 

 

 

4. 카카오 SDK 추가

 

pubspec.yaml에 라이브러리를 추가한다. 

https://developers.kakao.com/docs/latest/ko/flutter/getting-started

dependencies:
  kakao_flutter_sdk: ^1.7.0 # 전체 추가
  kakao_flutter_sdk_user: ^1.7.0 # 카카오 로그인
  kakao_flutter_sdk_talk: ^1.7.0 # 카카오톡 메시지, 카카오톡 소셜(프로필 가져오기, 친구 목록 가져오기)
  kakao_flutter_sdk_share: ^1.7.0 # 카카오톡 공유
  kakao_flutter_sdk_navi: ^1.7.0 # 카카오내비
  kakao_flutter_sdk_friend: ^1.7.0 # 카카오톡 소셜(피커: 친구 선택하기)

 

 

$ flutter pub get

 

5. 코드

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. 버튼에 연동할 코드

 

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

// 카카오톡 설치 여부 확인
// 카카오톡이 설치되어 있으면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
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');
  }
}