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

플랫폼 등록

1. kakao Developers 사이트에 로그인합니다.

2. 내 애플리케이션에 들어가서 애플리케이션 추가하기 버튼 선택합니다.

3. 앱 아이콘(선택), 앱 이름, 사업자명, 카테고리 작성후 저장합니다.
   

4. 플랫폼 -> Android 플랫폼 등록에 들어갑니다.
   

5. 아래 정보들을 입력합니다.

   • 패키지명: 안드로이드 앱 패키지명
     anroid -> app -> build.gradle 파일에 applicationId, namespace 확인 후 입력합니다.
   • 마켓 URL : 공백
   • 키 해시 : 앱이 아직 개발중이고, 한번도 배포한 적이 없다면 디버그용 키 해시 입력합니다.
     앱을 배포한적이 있거나, 배포 상태로 테스트하려면 디버그용 키 해시와 릴리즈용 키 해시를 줄바꿈 하여 입력합니다.
     • Mac 디버그 키 해시
       keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
     • Mac 릴리즈 키 해시
       keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64
     • Window 디버그 키 해시
       keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
     • Window 릴리즈 키 해시
       keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | PATH_TO_OPENSSL_LIBRARY\bin\openssl base64

6. 플랫폼 -> iOS 플랫폼 등록에 들어갑니다.
   

7. 번들 ID를 입력합니다.

   • 번들 ID
     ios -> Runner.xcodeproj -> project.pbxproj에 PRODUCT_BUNDLE_IDENTIFIER 확인 후 입력합니다,

카카오 로그인 활성화

1. 카카오 로그인 메뉴 선택합니다.
2. 활성화 설정에 OFF 버튼 선택합니다.
3. 활성화 선택합니다.
   

동의항목

⚠️ 아래 비활성화된 항목들은 비즈 앱으로 전환해야 받을 수 있습니다.
비즈 앱은 사업자 정보를 등록하여 비즈 앱으로 전환할 수 있습니다.

1. 카카오 로그인 아래 동의항목 선택
   
2. 아래 개인정보 표 중에서 받아야하는 정보는 설정 버튼 선택합니다.
3. 동의 항목 설정에서 동의 단계 및 동의 목적 작성 후 저장 버튼 선택합니다.
   

kakao SDK 추가

1. pubspec.yaml에 패키지를 추가합니다.

dependencies:
  kakao_flutter_sdk: ^1.7.0 # 전체 추가
  kakao_flutter_sdk_user: ^1.7.0 # 카카오 로그인

2. main() 함수에 Flutter SDK 초기화 init() 메소드를 호출합니다. runApp() 메소드 호출 전 Flutter SDK를 초기화해야 한다는 점에 주의합니다.

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

YOUR_NATIVE_APP_KEY, YOUR_JAVASCRIPT_APP_KEY는 내 어플리케이션에 앱 키에 들어가면 있습니다.

3. Android 앱에 대한 설정을 추가합니다.
   a. Flutter 프로젝트의 android -> app -> src -> main -> AndroidManifest.xml을 수정합니다.
   b. 카카오 로그인 Redirect URI 설정을 위한 activity 엘리먼트 추가합니다.
   c. Android 12(API 31) 이상 타깃 앱인 경우, exported 속성을 반드시 true로 선언
   d. YOUR_NATIVE_APP_KEY는 내 어플리케이션 -> 앱 키에서 확인한 네이티브 앱 키를 입력합니다.

<activity 
	android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
    android:exported="true">
    <intent-filter>
    	<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:host="oauth" android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
	</intent-filter>
</activity>

4. iOS 앱에 대한 설정을 추가합니다.
   a. Flutter 프로젝트의 iOS 폴더를 우클릭하여 Xcode에서 프로젝트를 엽니다.
   b. 앱 실행 허용 목록 설정하기 : Runner -> Info 탭을 누릅니다. 이후 Custom iOS Target Properties 항목에 Array 타입 키(Key)인 LSApplicationQueriesSchemes or Queried URL Schemes를 추가합니다.
   c. 해당 키의 item으로 커스텀 URL 스킴에 사용할 값인 "kakaokompassauth", "kakaolink"를 추가합니다.
   
   d. 커스텀 URL 스킴 설정하기:Info -> URL Types -> URL Schemes 항목에 네이티브 앱 키를 kakao${NATIVE_APP_KEY} 형식으로 등록합니다. 예를 들어 네이티브 앱 키가 "123456789"라면 URL Schemes에 "kakao123456789"를 입력합니다.
   

카카오 로그인 구현 예제

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

// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
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');
  }
}

사용자 정보 가져오기

현재 로그인한 사용자의 정보를 불러옵니다. UserApi의 me()를 호출합니다.

요청 성공 시, 사용자 정보가 담긴 User 객체가 반환됩니다. 사용자 정보에서 제공 가능한 사용자 정보의 종류를 확인할 수 있습니다. 다음과 같은 경우에는 사용자 정보의 값이 존재하지 않을 수 있으므로 유의합니다.

• 동의항목 미설정
• 사용자 미동의
• 사용자가 카카오에 제공하지 않은 정보

try {
  User user = await UserApi.instance.me();
  print('사용자 정보 요청 성공'
        '\n회원번호: ${user.id}'
        '\n닉네임: ${user.kakaoAccount?.profile?.nickname}'
        '\n이메일: ${user.kakaoAccount?.email}');
} catch (error) {
  print('사용자 정보 요청 실패 $error');
}