Flutter + Spring Boot 가족, 모임 서비스 구현하기 1 (Feat. 카카오 로그인)

현재 개발하고자 하는 서비스에서 로그인한 유저가 새로운 가족이나 모임을 만들거나 기존의 가족이나 모임에 참여할 수 있도록 하는 기능을 만들게 되었습니다.

 

로그인과 같은 경우 Flutter 3.0 버전에 카카오 SDK가 정식으로 지원을 해준다고 해서 카카오 Flutter SDK를 활용했습니다.

새로운 모임,가족을 만드는 로직과 DB 접근을 위해 Spring Boot로 서버를 구축했습니다.

 

 

카카오 로그인 구현

카카오 로그인은 kakao developers 페이지에 자세한 설명이 있습니다. 이를 따라한다면 충분히 구현이 가능할 것 같습니다.

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

Kakao Developers

카카오 디펠로퍼스 페이지

카카오 로그인과 같은 경우 위의 링크에서 소개된 방식을 통해 구현해주었습니다.

 

 

0. 목차

1. 패키지 설치

2. 설정

3. 추가 설정 (IDE 내부)

4. 코드 작성

5. 이슈 해결

6. 권한 추가

 

 

1. 패키지 설치

pubspec.yaml 파일에 의존성을 추가해줍니다.

flutter pub add kakao_flutter_sdk_user

저희와 같은 경우 카카오 로그인을 진행할 것이기 때문에 해당 sdk만 설치해줍니다.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  kakao_flutter_sdk_user: ^1.5.0 # 카카오 로그인 sdk

 

 

2. 설정

플랫폼 정보 등록

오른쪽 링크에 자세한 설명이 되어 있습니다. (application 등록 kakao document)

kakao developers 플랫폼에서 내 어플리케이션을 생성해줍니다.

내 어플리케이션 생성 시 필요한 앱 아이콘과 이름, 사업자명은 사용자들이 카카오 로그인 동의 화면을 접할 경우 나타나게 되므로 실제 서비스에서 사용할 경우 신중하게 작성해주어야 할 것 같습니다.

내 어플리케이션 생성

플랫폼 등록

메뉴얼에 따라 android, ios, web을 등록해줍니다.

 

Android

package 명을 입력해야되는데 package명은 다음과 같은 곳에 명시되어 있습니다.

• android/app/src/main/AndroidManifest.xml
• android/app/src/main/kotlin/{패키지 명}/MainActivity.[ kt | java]
• android/app/src/debug/AndroidManifest.xml

저와 같은 경우 AndroidManifest.xml 파일에는 패키지명이 입력되어 있지 않았었고, kotlin 디렉토리 이후의 패키지명이나 MainActivity 파일에서 import 하고 있는 패키지 명에서 확인 할 수 있었습니다.

 

아래는 kakao developers에서 설명하는 키 해시입니다.

키 해시(Key Hash)란 인증서(Certificate)의 인증서 지문 값(Certificate fingerprints)을 해시(hash)한 값으로, 악성 앱인지 판별하는 데 사용됩니다. 카카오 API를 호출하면 카카오 API 서버가 요청 헤더에 추가된 키 해시값과 카카오 플랫폼에 등록한 값이 일치하는지 확인합니다.

운영체제에 따라 다른 명령어를 터미널에 입력해주면 키 해시가 생성됩니다.

• Mac

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

• Windows

keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

 

ios

ios 플랫폼 등록 시 필요한 번들 ID는 Xcode로 프로젝트를 연 다음 [target] > [General] > [Bundle Identifier]에서 확인할 수 있습니다.

저와 같은 경우 Xcode로 ios 디렉토리를 연 뒤, 프로젝트 가장 상위 디렉토리인 Runner를 더블 클릭하면 프로젝트의 여러 설정들을 볼 수 있는 창이 나옵니다. 여기서 Signing & Capabilities 탭을 통해 Bundle Identifier를 확인했습니다.

 

web

사이트 도메인에 여러 형식의 도메인을 최대 10개 등록할 수 있습니다.

기본 도메인은 맨 윗줄의 사이트 도메인으로 카카오톡 공유, 카카오톡 메시지 API를 통해 발송되는 메시지의 Web 링크 기본값으로 사용됩니다.

 

 

3. 추가 설정

Android

android/app/src/main/AndroidManifest.xml 파일에 아래를 추가해줍니다.

<application>

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

YOUR_NATIVE_APP_KEY 에 내 어플리케이션의 네이티브 앱 키를 입력해주면 됩니다.

 

ios

아래 두 가지 사항을 Xcode에서 진행해줍니다.

• 앱 실행 허용 목록 설정을 위해 [TARGET] > [INFO] > [Custom iOS Target Properties]에서 LSApplicationQueriesSchemes 를 추가하고, 해당 키의 Item으로 "kakaokompassauth"와 "kakaolink"를 추가합니다.
• [TARET] > [INFO] > [URL Types] > [URL Schemes]에 "kakao{앱 키}"를 입력해주면 됩니다.

 

ios 디렉토리를 Xcode로 실행한 뒤, Runner 더블클릭 > Info 탭 에서 위의 두 가지를 모두 설정할 수 있습니다.

 

 

4. 코드 작성

Flutter App의 main 함수 내에서 Kakao sdk를 시작해주어야 합니다.

void main() {
  KakaoSdk.init(nativeAppKey: '{네이티브 앱 키}');
  runApp(const MyApp());
}

init 함수를 통해 네이티브 앱 키나 자바스크립트 앱 키 등을 넘겨주고 Flutter SDK를 초기화합니다.

 

이제 login과 logout을 구현해주도록 하겠습니다.

 

logout 기능 구현

사용자 관리 API 호출을 담당하는 클라이언트인 UserApi에 logout과 unlink가 있습니다.

logout 메서드의 경우 요청 성공 시 로그아웃 처리된 사용자의 회원 번호를 받습니다. 또한, 성공 여부에 관계없이 Flutter SDK에 저장된 토큰을 삭제합니다. 토큰 삭제 시 더 이상 해당 토큰 값을 사용해 카카오 Api를 호출 할 수 없습니다.

unlink 메서드의 경우 요청 성공 시 앱과 연결이 해제된 사용자의 회원 번호를 포함한 UserIdResponse 객체가 반환됩니다. 또한, logout처리가 함께 이루어집니다.

 

UserApi의 unlink를 통해 구현하도록 하겠습니다.

Future<bool> logout() async {
    try {
        await UserApi.instance.unlink();
        return true;
    } catch (error) {
        return false;
    }
}

unlink를 통해 앱과 사용자의 연결 상태를 해제해주고 Flutter SDK에 저장된 토큰을 삭제해줍니다.

 

login 기능 구현

카카오 로그인 구현 예제를 토대로 로그인 예제를 작성해줍니다.

  Future<bool> login() async {
    if (await isKakaoTalkInstalled()) {
      try {
        await UserApi.instance.loginWithKakaoTalk();
        return true;
      } catch (error) {
        return false;
      }
    } else {
      try{
        await UserApi.instance.loginWithKakaoAccount();
        return true;
      } catch (error) {
        return false;
      }
    }
  }

카카오톡 앱이 설치가 되어 있다면, 해당 앱을 통해 로그인을 시도합니다.

카카오톡 앱이 설치되어 있지 않다면, 카카오 계정을 통해 로그인을 시도합니다.

 

로그인 상태 관리

이 앱은 실험용으로 간단한 구현을 목표로 하고 있으므로 isLogined를 통해서만 화면을 출력해주도록 하겠습니다.

class _MyAppState extends State<MyApp> {
  final KakaoLogin _kakaoLogin = KakaoLogin();
  bool isLogined = false;
  User? user;

  Future login() async {
    isLogined = await _kakaoLogin.login();
    if (isLogined) {
      user = await UserApi.instance.me();
    }
    setState(() {});
  }

  Future logout() async {
    await _kakaoLogin.logout();
    isLogined = false;
    setState(() {});
  }
  ...

login 메서드의 경우 login을 시도하고, 반환된 값을 isLogined에 저장합니다. 로그인이 성공적으로 된다면 user에 UserApi를 통해 얻어온 값을 저장합니다.

logout 메서드의 경우 logout을 시도하고, isLogined를 false로 바꿔줍니다.

 

아래는 isLogined에 따른 UI 코드입니다.

  @override
  Widget build(BuildContext context) {      
      ...
      home: Center(
          child: isLogined
              ?
          ElevatedButton(
              onPressed: () {
                logout();
              },
              child: Text('Logout'))

              :
          ElevatedButton(
              onPressed: () {
                login();
              },
              child: Text('Login'))

      ),

isLogined 값에 따라 로그인 버튼과 로그아웃 버튼을 보여줄 수 있도록 했습니다.

 

 

5. 이슈 해결

minsdkVersion

/Users/hanbeomseok/StudioProjects/kakao_login/android/app/src/debug/AndroidManifest.xml Error:
	uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:kakao_flutter_sdk_common] /Users/hanbeomseok/StudioProjects/kakao_login/build/kakao_flutter_sdk_common/intermediates/merged_manifest/debug/AndroidManifest.xml as the library might be using APIs not available in 16
	Suggestion: use a compatible library with a minSdk of at most 16,
		or increase this project's minSdk version to at least 21,
		or use tools:overrideLibrary="com.kakao.sdk.flutter" to force usage (may lead to runtime failures)

FAILURE: Build failed with an exception.

위와 같은 에러가 발생했다면 minSdkVersion이 너무 낮다는 것을 뜻합니다.

android/app/build.gradle의 minSdkVersion을 21로 맞춰주면 됩니다.

# 수정 전
minSdkVersion flutter.minSdkVersion

# 수정 후
minSdkVersion 21

 

Admin Setting Issue (KOE004)

K0E004 이슈

위와 같은 이슈를 그대로 검색해본 결과 카카오 로그인을 활성화 해주어야 한다고 합니다.

https://devtalk.kakao.com/t/koe004/126353

KOE004 오류가 계속 뜹니다

 

이제 로그인 로그아웃 기능이 구현되었습니다.

로그인 모습

 

 

 

6. 권한 추가

이제 권한 설정을 통해 프로필 사진을 가져올 수 있도록 해보겠습니다.

kakao developers의 내 어플리케이션 > 동의항목 > 프로필 사진 을 필수 동의로 바꾸어주겠습니다.

그럼 이제 로그인을 할 경우 프로필 사진에 대한 정보를 가져올 수 있게 되었습니다.

로그인이 될 경우 프로필 사진 또한 보여줄 수 있도록 하겠습니다.

              ...
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: isLogined
                      ? [
                        Image.network(user?.kakaoAccount?.profile?.profileImageUrl ?? ''),
                          ElevatedButton(
                              onPressed: () {
                                logout();
                              },
                              child: Text('Logout'))
                        ]
                      : [
                          ElevatedButton(
                              onPressed: () {
                                login();
                              },
                              child: Text('Login'))
                        ])),

로그인이 되었을 경우 프로필 이미지 경로를 통해 이미지를 보여줄 수 있도록 했습니다.

권한 동의 페이지

이 후 로그인 할 경우 아래 프로필 사진에 대한 동의를 구하는 것을 알 수 있습니다.

모두 체크하고 로그인할 경우 프로필 이미지와 로그아웃 버튼이 생성되는 것을 알 수 있습니다.

로그인 예시

 

 

 

 

 

 

 

 

오늘은 카카오 sdk를 이용해 로그인을 실습해보았습니다.

다음 포스팅에서는 구현된 로그인을 통해 사용자 정보를 서버에 저장하고, 이를 통해 모임을 생성하고 만들 수 있도록 해보겠습니다.