Flutter 카카오 로그인 연동 예제

Flutter 기본 앱 만들기

먼저 Flutter 기본 앱을 생성합니다. 생성 방법은 Android Studio를 사용하는 경우와 Visual Studio Code를 사용하는 방법이 조금다른데요. 저는 VS Code로 주로 개발을 하기 때문에 VS Code로 생성했습니다.

프로젝트 생성 후 Flutter 개발을 해보신 분들은 알고 계시는 기본 카운트 앱이 동작합니다. lib/main.dart에 해당 코드들이 있는데 모든 내용을 삭제하고 아래 처럼 변경해주겠습니다.

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container( 
          color: Colors.white,
          child: Center( 
            child: RaisedButton( 
              child: Text("카카오 로그인"), 
              onPressed: () async {
                print("카카오 로그인 클릭");
              }
            )
          )
        )
    );
  }
}

코드를 보면 간단하게 메인 화면 중앙에 버튼을 생성하는 코드라는 걸 알 수 있습니다. 실제 실행화면은 아래와 같이 나타납니다.

Kakao Developer 사이트 설정하기

카카오 개발자 사이트

https://developers.kakao.com/

카카오 로그인 연동을 하려면 개발자 사이트에서 개발할 앱을 등록해주어야합니다. 아래 절차를 따라하시기 바랍니다.

내 애플리케이션 생성

카카오 개발자 사이트에 내 애플리케이션을 생성하는 과정입니다. “애플리케이션 추가하기” 버튼을 클릭해서 신규 앱을 만듭니다.

추가하기 버튼을 누르면 아래와 같은 정보들을 입력하는 창이 보입니다. 테스트용이므로 간단한 이름과 사업자명을 적습니다.

생성이 완료되면 아래와 같은 키 정보들이 보입니다. 앱에서 연동할 때 아래 키들을 이용해서 인증 절차를 수행하므로 해당 키는 노출되면 안되니 주의하시기 바랍니다. 저는 테스트용 앱이므로 보기 편하게 그냥 캡쳐해두었습니다.

Flutter로 앱을 만들 것이기 때문에 Android를 기준으로 먼저 예제를 진행해보겠습니다. 아래 플랫폼 정보에 ‘Android 플랫폼 등록’ 버튼을 클릭합니다.

Android 플랫폼 등록을 하면 아래처럼 앱 정보를 입력하는 창이 나타납니다. 앱 정보들을 입력합니다. 마켓 URL은 없어도 상관없으니 ‘없음’으로 하고 ‘키 해시’값을 입력합니다.

키 해시 등록하기

위에 안드로이드 앱을 등록할 때 요구하는 키 해시값은 아래 명령으로 생성할 수 있습니다. 카카오 개발자 사이트(링크 참고)에도 만드는 방법이 나와 있으니 참고하시면 됩니다.

참고 : https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android#add-key-hash

맥북 환경인 경우 아래 명령을 바로 사용하시면 됩니다.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

캡쳐 이미지가 작아서 잘 보일지 모르겠는데요. 위 명령으로 키를 생성하면 아래와 같은 키가 생성 됩니다.

zJP7NgnH0zpyMGgzBxWtVr7WZ0w=

이 값을 앞서 ‘키 해시’ 입력란에 넣으면 됩니다.

여기 까지 하면 안드로이드 앱을 위한 등록 절차를 마쳤구요. 다음은 카카오 로그인을 활성화 하는 설정입니다.

카카오 개발자 페이지에서 카카오 로그인 메뉴를 선택합니다.

기본 설정은 카카오 로그인이 비활성화 되어 있습니다. 이걸 활성화 설정으로 변경합니다. 그러면 내가 만들 앱이나, 웹에서 로그인 가능하도록 설정 된 것입니다.

로그인 설정을 했다고 해서 카카오 사용자 정보를 가져올 수는 없습니다. 카카오 로그인 기능을 사용해보신 분들은 아시겠지만 사용자에게 동의 절차를 받아 개인 정보를 가져올 수 있습니다. ‘동의 항목’ 메뉴에서 이를 설정 할 수 있습니다.

닉네임과 프로필 이미지는 카카오 로그인할 때 필수 동의항목으로 지정이 가능합니다. 그 외의 정보는 선택 항목으로 해야하는데요. 예제에서는 닉네임과 프로필 이미지만으로도 충분하므로 두가지 설정만 하겠습니다. 참고로 카카오 사용 구분 ID값은 기본으로 가져올 수 있습니다.

이제 카카오 개발자 페이지에서 설정할 내용들은 모두 완료됐습니다. 다시 Flutter 코드로 돌아가보겠습니다.

kakao_flutter_sdk 설치

Flutter 앱에서 카카오 로그인하는 방법이 여러가지가 있습니다. REST API를 사용할 수도 있고 만들어진 kakao_flutter_sdk, flutter_kakao_login와 같은 라이브러리들을 사용하는 방법도 있습니다. 본 포스트에서는 kakao_flutter_sdk를 사용해보겠습니다. 포스트 작성일 기준 kakao_flutter_sdk 버전은 v1.1.0입니다.

프로젝트가 있는 디렉토리에서 다음 명령으로 kakao_flutter_sdk를 추가하겠습니다.

flutter pub add kakao_flutter_sdk

위 명령을 사용하면 자동으로 pubspec.yaml 파일이 업데이트 됩니다.

pubspec.yaml

아래처럼 업데이트가 되어 있습니다.

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  kakao_flutter_sdk: ^1.1.0

프로젝트 설정 수정하기

AndroidManifest.xml 수정

android > app > src > AndroidManifest.xml 파일에서 아래와 같은 코드를 추가해줍니다.

참고 : https://developers.kakao.com/docs/latest/ko/kakaologin/flutter#before-you-begin-android

<activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity">
   <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" />

        <!-- Redirect URI, "kakao${YOUR_NATIVE_APP_KEY}://oauth" 형식 -->
        <data android:scheme="kakao463290d289d5d792f9c9a9ad6d6f2c0b" android:host="oauth"/>
   </intent-filter>
</activity>

위 코드에서 주의할 점은 kakao463290d289d5d792f9c9a9ad6d6f2c0b 이 부분입니다. kakao[본인 Native Key]를 입력해주어야합니다.

minSdkVersion 수정

android/app/build.gradle 파일을 열어 minSdkVersion을 아래와 같이 수정합니다.

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.flutter_kakao_login"
        // minSdkVersion flutter.minSdkVersion
        minSdkVersion 19
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

main.dart 코드 수정

앞서 작성했던 main.dart를 아래처럼 수정합니다.

import 'package:flutter/material.dart';
import 'package:kakao_flutter_sdk/kakao_flutter_sdk.dart';

void main() {
  KakaoSdk.init(nativeAppKey: '463290d289d5d792f9c9a9ad6d6f2c0b');
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container( 
          color: Colors.white,
          child: Center( 
            child: RaisedButton( 
              child: Text("카카오 로그인"),
              onPressed: () async {
                  if (await isKakaoTalkInstalled()) {
                    try {
                      await UserApi.instance.loginWithKakaoTalk();
                      print('카카오톡으로 로그인 성공');
                      _get_user_info();
                    } catch (error) {
                      print('카카오톡으로 로그인 실패 $error');

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

여기까지 수정이 되었다면 이제 카카오 로그인 연동이 가능해졌습니다. 앱을 실행해보겠습니다.

앱 실행 후 로그인 버튼을 누르면 위와 같이 카카오 로그인 동의항목 창이 나타나고 동의하기를 누르면 콘솔 로그로 아래 정보들이 출력됩니다.

I/flutter ( 9108): 사용자 정보 요청 성공
I/flutter ( 9108): 회원번호: ~~~~~~
I/flutter ( 9108): 닉네임: ~~~~

소스코드

작성했던 소스코드는 아래 github에 있습니다.

https://github.com/warnus/flutter_kakao_login_example

참고

Leave a Reply