[Flutter / Kakao Login] Flutter에서 10분 안에 카카오 로그인 설정하기(with kakao_flutter_sdk_user)

[Flutter / Kakao Login] Flutter에서 10분 안에 카카오 로그인 설정하기(with kakao_flutter_sdk)

[사이트] pub.dev
[사이트] Kakao developers

1. Kakao Developers 설정하기

*1) Kakao Developers 설정 2) Flutter SDK 설정 3) 로그인 로직 작성의 3단계로 작성되어있어 부득이하게 포스팅의 길이가 깁니다.
*저는 Flutter SDK 중에 네이티브앱 서비스 방식을 이용합니다.
*해당 포스팅은 로그인 설정 절차만 기재되어 있으니, 로그인 작동 방식에 관해서는 상단의 Kakao Developers 사이트를 참고해 주세요.

1-1. 내 애플리케이션 등록하기

---

내 애플리케이션에 쓸 앱 아이콘, 앱 이름, 사업자 명을 등록해 줍니다.
추후에도 일반 페이지에서 수정할 수 있으니 초반에 너무 고민하실 필요는 없습니다.

---

애플리케이션을 등록하고 들어오면 앱키들이 보입니다.
이 부분은 외부로 노출되지 않게 반드시 주의해 주세요.

*노출된 앱키와 해시코드는 예시입니다. 삭제된 애플리케이션의 것으로 작동하지 않습니다.
*외부로 노출되지 않게 하드코딩하지 마시고 환경변수로 설정해 주세요. 설정방법

• 네이티브 앱 키: Android, iOS SDK에서 API를 호출할 때 사용
• JavaScript 앱 키: 웹에서 API를 호출할 때 사용
• REST API 키: REST API를 호출할 때 사용
• Admin 키: 모든 권한을 갖고 있는 키

1-2. 카카오 로그인 활성화

---

처음에는 카카오 로그인이 OFF 로 되어 있습니다. (OFF -> ON)
이 부분을 활성화시켜야 카카오로그인 서비스를 이용할 수 있습니다.

1-3. 동의 항목 설정

---

좌측 탭에 제품 설정 > 카카오 로그인 > 동의 항목 탭에서 설정할 수 있습니다.
로그인 이용시 유저로부터 제공받을 항목을 설정하는 단계입니다.

필수로 동의받아야 할 항목과 선택적으로 동의받아야 할 항목을 각각 설정하며, 동의 목적은 아래 예시와 같이 명료하게 적어주시면 됩니다.
선택적 제공을 했을 경우에는 null 값이 들어올 수 있으므로 별도로 널처리를 할 것도 염두에 두셔야 합니다.

1-4. 플랫폼 등록하기 (Web, AOS, iOS)

---

앱 설정 > 플랫폼 탭에서 설정할 수 있습니다.

[AOS]

앱으로 배포할 거라면 Android / iOS 부분을 설정해주어야 합니다.
패키지명은 Android > app > src > main > AndroidManifest.xml 의 package 명을 입력하면 됩니다.
(ex. com.example.app)

테스트만 할 거라면 당장에 해시를 등록할 필요는 없습니다.
키 해시를 발급받는 방법은 아래 포스팅을 내용에서 확인할 수 있습니다.
Android:: 해시키,키해시(Key Hash)의 개념과 활용 / 생성방법

[Web]

웹으로 테스트하기 위해서는 Web의 도메인도 함께 등록해야합니다. 서버 도메인이 있으면 해당 도메인을 입력해주시면 됩니다.

크롬 웹에서 Flutter 프로젝트를 띄울 때는 포트를 고정해주어야 하는데, run 명령어는 다음과 같습니다.

flutter run -d chrome --web-port=포트번호

// 예시
flutter run -d chrome --web-port=8000

저는 크롬 웹 환경에서도 테스트할 것이기 때문에 http://localhost:설정한포트 로 등록했습니다.

(선택) 1-5. Redirect URI 등록하기

---

REST API 방법으로 개발하는 경우, 혹은 웹으로 실행하려는 경우에는 로그인 완료후 넘어갈 페이지의 URI를 등록해야 합니다. (페이지 라우팅 필요)

여기까지 적용하셨으면 Kakao Developer 상에서 설정할 내용은 다 끝났습니다.

2. Kakao SDK 추가 & main.dart 설정하기

*Flutter SDK는 1) 네이티브 앱 서비스 방식 2) Redirect 웹 서비스 방식으로 구현을 할 수 있습니다.
*AOS / iOS 커스텀 스킴은 하단에 남겨두었습니다.

2-1. pubspec.yaml에 kakao_flutter_sdk_user 추가하기

---

*사이트 주소는상단에 남겨두었습니다. (23/07/12 기준 최신버전으로 적용했습니다.)

dependencies:
    kakao_flutter_sdk_user: ^1.4.3

커맨드 창에서 적용하실 거면 다음과 같이 이용하면 됩니다.

flutter pub add kakao_flutter_sdk_user

2-2. main.dart 에서 SDK init 설정하기

---

void main() async {
    // 1) 
    WidgetsFlutterBinding.ensureInitialized();
    // 2) 
    await dotenv.load(fileName: env파일경로);
    // 3)
    KakaoSdk.init(
        nativeAppKey: '네이티브 앱 키',
        javaScriptAppKey: '자바스크립트 앱 키',
    );
    runApp(
        const MyApp(),
    );
}

class MyApp extends StatelessWidget {
    const MyApp({super.key});

    ......
}

1) 비동기적으로 작동하는 플랫폼 채널의 바인딩을 보장하기 위해 runApp 직전에 설정
2) 만약에 flutter_dotenv 사용시 설정 (필수는 아님)
3) KakaoSdk 초기화: 필요한 플랫폼만 초기화하시면 됩니다.

3. 카카오 로그인 구현

3-1. 로그인 로직 구현

---

isKakaoTalkInstalled() 메소드로 카카오톡 실행 여부 확인
카카오톡이 실행 가능하면 카카오톡으로 로그인하고, 실행 불가 시 카카오계정으로 로그인 요청하는 로직입니다.
KakaoLogin.login()을 호출하면 로그인 결과에 따라 false 혹은 true를 반환합니다.

import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';

abstract class ILogin {
  Future<bool> login();
  Future<bool> logout();
}

class KakaoLogin implements ILogin {
  @override
  Future<bool> login() async {
    try {
      // 1. 카카오 install 여부 확인 : true / false
      bool isInstalled = await isKakaoTalkInstalled();
      // 1-1. install이 되어있다면, 카카오톡으로 로그인 유도
      if (isInstalled) {
        try {
          await UserApi.instance.loginWithKakaoTalk();
          return true;
        } catch (e) {
          return false;
        }
      } else {
        // 1-2. install이 되어있지 않다면, 카카오 계정으로 로그인 유도
        try {
          await UserApi.instance.loginWithKakaoAccount();
          print('카카오계정으로 로그인 성공');
          return true;
        } catch (e) {
          print('카카오계정으로 로그인 실패 $e');
          return false;
        }
      }
    } catch (e) {
      return false;
    }
  }

  @override
  Future<bool> logout() async {
    try {
      await UserApi.instance.unlink();
      print('카카오톡 로그아웃 성공');
      return true;
    } catch (e) {
      return false;
    }
  }
}

3-2. 뷰모델(ViewModel) 구현

---

먼저 사용자 정보의 최상위 클래스인 User 클래스를 호출하여 받아온 카카오계정 정보를 저장할 수 있습니다.
다음은 User 클래스의 속성들 중 정보 구성에 필요한 일부입니다.

User
    - connectedAt: DateTime? // 서비스에 연결된 시각 UTC
    - id: int? // 회원번호
    - kakaoAccount: Account? // 카카오 계정 정보
        - ageRance: AgeRange? // 연령대
        - birthday: String? // 생일(MMDD)
        - birthyear: String? // 출생 연도(YYYY)
        - ci: String? // 암호화된 사용자 확인값
        - email: String? // 카카오 계정 이메일
        - gender: Gender? // 성별(Enum{ female, male, other })
        - legalName: String? // 실명
        - name: String? // 카카오 계정에 등록한 이름
        - phoneNumber: String? // 카카오톡에서 인증한 전화번호
        - profile: Profile? // 카카오 계정에 등록한 사용자의 프로필 정보
            - nickname: String? // 사용자의 닉네임
            - profileImageUrl: String? // 카카오 계정에 등록된 프로필 이미지 url
    - properties: Map<String, String>? // 추가 정보

KakaoLogin 클래스에 구현한 로그인 로직을 활용하여, 결과가 true일 경우에 User 클래스에 사용자 정보를 받아서 구현하는 뷰모델을 구현해보겠습니다.

import 'package:app/user/models/kakao_login.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';

class KakaoLoginViewModel {
  final ILogin _iLogin;

  KakaoLoginViewModel(this._iLogin);

  // 1. 현재 로그인 상태 체크
  bool isLogined = false;

  // 2. 카카오톡 User 정보 가져오기
  User? user;

  // 3. 로그인 기능
  Future<void> login() async {
    isLogined = await _iLogin.login();
    print('로그인기능 $isLogined');

    // 3-1. 로그인이 성공했다면
    try {
      if (isLogined) {
        user = await UserApi.instance.me();
      }
    } catch (e) {
      print(e);
    }
  }

  // 4. 로그아웃 기능
  Future<void> logout() async {
    await _iLogin.logout();
    isLogined = false;
    user = null;
  }
}

3-3. 로그인 정보 구현

---

KakaoLoginViewModel의 User를 활용하여 간단하게 프로필 사진과 닉네임 받아올 수 있습니다.

(기타 정보들은 상단에 기술은 User 클래스를 활용하시면 됩니다.)

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


class HomeScreen extends StatefulWidget {
    const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  final viewModel = KakaoLoginViewModel(KakaoLogin());

  @override
  Widget build(BuildContext context) {
      return Scaffold(
        body: ListView(
            children: [
            if (viewModel.user?.kakaoAccount?.profile?.profileImageUrl != null)
            CircleAvatar(
              radius: 100,
              backgroundImage: NetworkImage(
                viewModel.user?.kakaoAccount?.profile?.profileImageUrl ?? '',
              ),
            ),
          Center(
            child: Text(
              viewModel.user?.kakaoAccount?.profile?.nickname ?? '',
              style: const TextStyle(
                fontSize: 36.0,
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              if (viewModel.user == null) {
                await viewModel.login();
              } else {
                await viewModel.logout();
              }
              setState(() {
                // 로그인 / 로그아웃 후에 화면 갱신
              });
            },
            child: Text(
              viewModel.user == null ? '카카오 로그인' : '카카오 로그아웃',
            ),
          ),
         ],
       );
    );
  }
}

작업물의 결과는 위와 같습니다.

포스팅 주제와 연관이 없어서 사용하진 않았지만, 서비스로 적용하기 위해서는 상태관리와 경우에 따라 데이터베이스화를 적용해야 합니다.
로그인으로 받아온 결괏값을 ViewModel이 아닌 상태관리툴을 이용하여 어떻게 관리할지에 대해서는 다음 포스팅에서 다루도록 하겠습니다.

(선택) 3-4. AOS / iOS 커스팀 스킴

---

자세한 정보는 KakaoDevelopers를 참고해 주세요.

[AOS]

• Flutter 프로젝트 Android > app > src > main > AndroidManifest.xml 를 수정합니다.
• <application> 하위에 카카오 로그인 Redirect URI 설정을 위한 예제를 아래와 같이 추가합니다.
• Android12 (API31) 이상을 타깃으로 하는 앱은 exported 속성을 반드시 true로 선언해야 합니다.

<application>
  ...
 <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>

[iOS]

• Flutter 프로젝트 ios 폴더를 우클릭하여 Xcode에서 프로젝트를 열고 설정
• ios > Runner > Info.plist

 <key>LSApplicationQueriesSchemes</key>
  <array>
      <string>kakaokompassauth</string>
  </array>

끝