[Flutter] 카카오 로그인

우선 kakao developers에서 애플리케이션을 추가해야 한다.

 

Android

앱 등록

안드로이드 앱에 구현하려면 우선 앱을 등록해야 한다.

 

키 해시는 아래와 같은 명령어를 통해 얻은 키 해시를 넣으면 된다. (준비 - 키해시 참고)

 

키 해시와 관련된 오류가 있을 경우 아래 글을 참고

2024.09.29 - [Flutter] - [Flutter Error] invalid android_key_hash or ios_bundle_id or web_site_url 에러

 

 

 

커스텀 URL 스킴 설정

키해시를 넣어 안드로이드 앱 등록을 완료하고 난 뒤에는 이 링크를 참고해서 하면 된다.

 

Flutter 프로젝트의 [${Project}] > [android] > [app] > [src] 경로 내부의 AndroidManifest.xml 파일에 아래의 코드를 넣는다.

<!-- 카카오 로그인 커스텀 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>

 

네이티브 키는 내 애플리케이션 → 앱 설정 → 앱 키 페이지에 있는 네이티브 앱 키를 넣으면 된다. 

 

---

iOS

앱 등록

iOS도 마찬가지로 우선 앱을 등록해 주어야 한다.

 

번들 ID의 경우에는 Xcode를 이용해서 프로젝트를 열면 알 수 있다.

 

iOS 디바이스에서 커스텀 URL 스킴을 사용하려면 앱 실행 허용 목록, URL Schemes 과년해서 두 가지 설정이 필요하다. 아래 내용은 카카오 문서를 참고하였다.

앱 실행 허용 목록

`info.plist`파일에 아래와 같은 내용을 추가한다. Xcode를 이용해서 하는 방법도 있는데 이는 위의 카카오 문서를 참고하길 바란다.

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

 

URL Schemes

`[TARGET] > [Info] > [URL Types] > [URL Schemes]`에서 설정하면 된다.

 

`kakao${NATIVE_APP_KEY}` 형식으로 등록하면 된다. 예를 들어 네이티브 앱 키가 "123456789"라면 [URL Schemes]에 "kakao123456789"를 입력한다.

 

초기화

`main()` 함수 안에서 Flutter SDK 초기화 메서드인 `init()` 메서드를 호출한다. `runApp()` 메서드 호출 전에 Flutter SDK를 초기화해야 한다.

 

초기화 시 앱 키를 입력해야 한다.  `KakaoSdk.init(nativeAppKey: '${YOUR_NATIVE_APP_KEY}');`

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

 

 

활성화

마지막으로 카카오 로그인 활성화 설정을 해주면 끝이다.

---

코드

  kakaoLogin() async {
    KaKaoUser.OAuthToken? token;

    // 설치 여부
    if (await KaKaoUser.isKakaoTalkInstalled()) {
      try {
        token = await KaKaoUser.UserApi.instance.loginWithKakaoTalk();
        print("카카오톡으로 로그인 성공");
      } catch (error) {
        print('카카오톡으로 로그인 실패 $error');
        // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
        // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
        if (error is PlatformException && error.code == 'CANCELED') {
          return;
        }

        // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
        try {
          token = await KaKaoUser.UserApi.instance.loginWithKakaoAccount();
          print('카카오계정으로 로그인 성공');
        } catch (error) {
          print('카카오계정으로 로그인 실패 $error');
        }
      }
    } else {
      try {
        token = await KaKaoUser.UserApi.instance.loginWithKakaoAccount();
        print('카카오계정으로 로그인 성공');
      } catch (error) {
        print('카카오계정으로 로그인 실패 $error');
      }
    }

    if (token != null) {
      KaKaoUser.User user = await KaKaoUser.UserApi.instance.me();
      // id = user.id.toString();
    } else {
      Get.snackbar('알림', '로그인에 실패하셨습니다. 다시 시도해주세요.');
    }
  }

 

만약 카카오 로그인을 통해 정보를 가져왔다면 아래와 같은 코드를 통해 정보를 가져와서 사용하면 된다.

KaKaoUser.User user = await KaKaoUser.UserApi.instance.me();
id = user.id.toString();

 

 

iOS와 Web은 다음에 등록할 일이 생기면 추가할 예정