Flutter: Firebase, 웹 서비스 없이 카카오 로그인: Flutter Kakao Sign in without Firebase and Web Service

이전 포스트(https://uaremine.tistory.com/33)에 이어서 이번에는 카카오 로그인.

네이버 로그인에 문제 없었다면 카카오도 간단히 처리할 수 있다. 왜냐하면 훌륭하신 분들이 카카오 SDK를 사용하는 패키지를 만들어 놓으셨기 때문이지.

 

역시 처음은 카카오 개발자 페이지에서 애플리케이션 만드는 것부터.

애플리케이션을 생성하면 앱 키를 얻을 수 있다. 여기서 '네이티브 앱 키'를 사용한다.

'플랫폼' 탭에서 각각 안드로이드, iOS 플랫폼 정보를 생성해준다.

각각 앱 패키지명과 bundle ID (+스토어 주소)를 넣어주면 되는데, 안드로이드의 경우에는 hash 값을 입력하라고 한다.

hash 값은 잠시 후에 코드에서 나오는 값을 입력하면 되고,

 

수정해야 하는 파일들만 보자. 대부분 flutter_kakao_login 문서에 나온대로 하면 다 잘 된다.

 

1. pubspec.yaml

   flutter_kakao_login: ^3.4.0

 

2. android/app/proguard-kakao.pro, android/app/build.gradle, AndroidManifest.xml (for android)

flutter_kakao_login 문서에 나온 대로 고쳐준다. AndroidManifest.xml 에는 카카오 개발자 페이지에서 가져온 네이티브 앱 키 앞에 kakao 붙여서 넣어주면 된다. 

설명 문서에 'kakao0123456789abcdefghijklmn' 로 되어 있는 부분의 'kakao' 뒤에 나의 네이티브 앱 키를 넣어준다.

 

3. Info.plist (for iOS)

역시 문서에 있는대로 넣어주면 되는데, CFBundleURLSchemes 같은 항목은 이전에 네이버 로그인을 구현했다면 이미 항목이 존재할 것이다.

<array> 안에 추가해주면 된다.

LSApplicationQueriesSchemes 도 마찬가지로 기존 항목이 있으면 <array> 아래에 추가해주면 된다.

4. AppDelegate.swift (for iOS)

네이버로그인을 위해 만들어놓은 application() override 함수가 있을테니, 다음과 같이 처리해주면 된다.

  override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    // kakao부터 확인
    if (AuthApi.isKakaoTalkLoginUrl(url)) {
      return AuthController.handleOpenUrl(url: url)
    }
    
    return NaverThirdPartyLoginConnection.getSharedInstance().application(app, open: url, options: options)
  }

 

여기까지 하면 설정은 끝나고, 다음과 같이 인증코드를 호출하기만 하면 끝.

import 'package:flutter_kakao_login/flutter_kakao_login.dart';

// main() 이나 service 내에 적절한 곳에서 로그인 전에 초기화
// ......
final FlutterKakaoLogin kakaoSignIn = FlutterKakaoLogin();

// 로그인 전에 초기화 필요
Future<void> initialize() async {
      await kakaoSignIn.init('네이티브 앱 키');
      final hashKey = await kakaoSignIn.hashKey;
      print('hashKey: $hashKey');	
      // 이 hashKey를 카카오 개발자 사이트의 안드로이드 플랫폼에 입력
}

// 실제 로그인 버튼 터치되었을 때
Future<bool> loginWithKakao() async {
    try {
        final result = await kakaoSignIn.logIn();
        // 로그인 후에 사용자 정보 가져온다.
        final KakaoLoginResult res = await kakaoSignIn.getUserMe();
        // 서비스 인증을 위한 accessToken 을 가져온다.
        final KakaoToken? token = await kakaoSignIn.currentToken;

        if (token?.accessToken == null || res.account == null) {
            // 실패
            return false;
        }
        // 로그인 성공
        return true;
    } catch (e) {
        // 사용자 취소 등
        return false;
    }
}

 

특별히 어려운 점은 없지만, 과정을 기록하는 차원에서 정리해놓음.