[ Flutter ] 카카오 간편 로그인 - 1. 코드분석

// Future --> "미래에 무엇무엇을 가져올것이다." 라는걸 알려줌

Future<User> checkKakaoLogin() async {
	// 토큰 담을 변수
	OAuthToken token; 
    // 회원 정보
	User userInfo; 
    
	// 카카오톡이 깔려 있는지 여부를 확인하는 isKakaoTalkInstalled() 함수
	if (await isKakaoTalkInstalled()) {
        // UserApi 는 kakao 를 설치하면 UserApi 라고 카카오 로그인 API Class 를 쓸 수 있습니다.
        // instance를 통해 "카카오앱"을 이용해서 로그인 시도
        token = await UserApi.instance.loginWithKakaoTalk();
    } else {
		// instance를 통해 "카카오" 로그인 시도 ( 보통 web )
        token = await UserApi.instance.loginWithKakaoAccount();
    }
    
    // instance.me 를 통해 내 정보를 가져오기
    userInfo = await UserApi.instance.me();
    
    return userInfo;
}

사실 요새 너무 야매로  코딩한 것 같아서..

잠깐 쉬어가는 타임에 

 

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

Kakao Developers

위 카카오 로그인 플러터를 보며 하나하나 끄적끄적..

 

설치 및 초기화 까지 하면 아마 main함수에 init해서 kakao api를 쓸 수 있게 되었다 라고 되어있습니다.

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

맨 하단을 보면 이렇게 되어있습니다.

여기까지 진행이 되어있다고 생각하고, 직접 로그인을 실행하고 토큰 & 회원정보를 받아오는것 까지 보여드리겠습니다.

 

// Future --> "미래에 무엇무엇을 가져올것이다." 라는걸 알려줌

Future<User> checkKakaoLogin() async {
    // 토큰 담을 변수
    OAuthToken token; 
    // 회원 정보 담을 변수
    User userInfo; 

    // 카카오톡이 깔려 있는지 여부를 확인하는 isKakaoTalkInstalled() 함수
    if (await isKakaoTalkInstalled()) {
        // UserApi는 kakao_flutter_sdk를 설치하면 UserApi 라고 카카오 로그인 API Class 를 쓸 수 있습니다.
        // instance를 통해 "카카오앱"을 이용해서 로그인 시도
        token = await UserApi.instance.loginWithKakaoTalk();
    } else {
    	// instance를 통해 "카카오" 로그인 시도 ( 보통 web )
        token = await UserApi.instance.loginWithKakaoAccount();
    }
    
    // instance.me 를 통해 내 정보를 가져오기
    userInfo = await UserApi.instance.me();
    
    return userInfo;
}

 

이번 기회를 통해 사실 꽤 배우게 되었습니다.

 

Future<User>

일단 Future 는 미래에 무언가를 가져올 것 이다 라는걸 의미하며 Future <> 안에 자료형이 있는데 이걸 해석하자면

Future<User> 이니깐 미래에 User 데이터를 가져올 것 이다!! 라고 해석 해볼 수 있겠네요.

 

기본적으로 async는 이 함수를 비동기로 쓸 것 이다.

그래서 아래 await 으로 데이터를 가져오는것을 기다려주기 주고 변수에 데이터를 담아옵니다.

 

Future는 그걸 담아오는 "객체" 라고 합니다. 나중에 Future에 대해 조금 더 심도 있게 공부를 해봐야 할 것 같습니다.

 

 

보통 var token 또는 var userInfo 이렇게 var로 통일하는 경우가 많긴한데 .. 저는 자료형으로 확실하게 가시성있게 보는거 좋아해서 저래 해놓았습니다 ( 나중에 dart 개발자한테 뚜까맞을듯)

 

이제 분기가 생기는데, 첫번째로 kakao가 깔려있는지 확인합니다.

 

1. 카카오 앱이 깔려있다. // ( 카카오 앱 ) 을 이용해서 로그인

2. 카카오 앱이 깔려있지 않다. // ( 카카오 ) 를 통해 로그인

 

UserApi 는 kakao 설치하면 받을 수 있는 Kakao Login Api Class.를 통해 한번 알아봅시다.

 

1. isKakaoTalkInstalled() // kakao api 쪽 utils에 있으며, 앱을 실행 할 수 잇는지 없는지 체크 합니다.

 

1-1. 함수를 뜯어보면 이래 생겼습니다.

1-2. 보다시피 _platform 을 통해 isAndroid(안드로이드) isIOS(아이폰) 을 체크하여 return 하게 되며, 웹같은 경우 그냥 return false 를 하게 됩니다.

Future<bool> isKakaoTalkInstalled() async {
  var arguments = {};
  if (kIsWeb) {
    // web does not support platform. so I divided the branch
  } else if (_platform.isAndroid) {
    arguments
        .addAll({'talkPackageName': KakaoSdk.platforms.android.talkPackage});
  } else if (_platform.isIOS) {
    arguments.addAll({'loginScheme': KakaoSdk.platforms.ios.talkLoginScheme});
  }
  return await _methodChannel.invokeMethod<bool>(
          CommonConstants.isKakaoTalkInstalled, arguments) ??
      false;
}

 

2. 그래서 웹으로 디버깅 하거나 실행하면 아래 UserApi.instance.loginWithKakaoAccount() 를 실행하게 됩니다.

  if (await isKakaoTalkInstalled()) {
    print('Kakao App Login');
    token = await UserApi.instance.loginWithKakaoTalk();
  } else {
    print('Kakao Login');
    token = await UserApi.instance.loginWithKakaoAccount();
  }

 

우리는 이걸 통해 token! 을 얻게 되었습니다!!

 

그리고 바로 아래,  userInfo = await UserApi.instance.me();

 

이렇게 하여 로그인 했던 계정의 데이터를 가져오게 됩니다.

 

3-1. token 의 데이터을 봅시다.

{
    access_token: dUh-dr8XSiO14M_CBVqeZ2l4lyVRLqD2AAAAAQoNIpkAAAGZ3ZByQQGXonZVdqHq, 
    expires_at: 2025-10-13T23:34:25.132, 
    refresh_token: JhWoiT-FxFTVNdsh3XD2XaVGSW_Dy4HAAAAAAgoNIpkAAAGZ3ZByPQGXonZVdqHq, 
    refresh_token_expires_at: 2025-12-12T21:34:25.132, 
    scopes: [account_email, profile_image, profile_nickname]
}

 

3-2. user의 데이터를 봅시다.

{
  id: 00000000, 
  properties: 
    { 
      nickname: '', 
      profile_image: https://blog.kakaocdn.net/dna/efwefewf/ewffwef/AAAAAAAAAAAAAAAAAAAAAJglqDN8vINmbr01EQCf8hs=/img_640x640.jpg,?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=aeBwpxOOyRKYxx27fwNOMFUv2Wk%3D
      thumbnail_image: https://blog.kakaocdn.net/dna/efwefewf/wefwefewf/AAAAAAAAAAAAAAAAAAAAAME6tqONqVR_jeJIOOEo4MA=/img_110x110.jpg%7D,?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=DbmE4HjhMha6sXesCheCJlutjMI%3D
      kakao_account: {
        profile_nickname_needs_agreement: false, 
        profile_image_needs_agreement: false, 
        profile: {
        	nickname: '', 
            thumbnail_image_url: https://blog.kakaocdn.net/dna/sRFwj/wef/AAAAAAAAAAAAAAAAAAAAAL_zKKDf9Rf-hOFpLhISLU0=/img_110x110.jpg,?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=vB%2B%2Fw94GNwd6J29oqj%2Fc5HRiZMA%3D
            profile_image_url: https://blog.kakaocdn.net/dna/sRFwj/wfewf/AAAAAAAAAAAAAAAAAAAAAI0UQ9zuNtcZrPxYJmqwOgE=/img_640x640.jpg,?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=K62eRQc5LZqshgPAMijNLmkHNa4%3D 
            is_default_image: false
        }, 
        email_needs_agreement: false, 
        is_email_valid: true, 
        is_email_verified: true, 
        email: rthrhrthbgfv@naver.com
    }, 
        connected_at: 2025-09-30T14:00:16.000Z
}

 

이렇게 필요한 정보들이 쏙쏙 오는걸 확인 할 수 있습니다.

 

다음 편에서는 Kakao 모델 클래스를 만들어 데이터를 구조화하는 방법을 알아보겠습니다.