[Flutter on mac] 플러터 카카오 로그인 연동 과정 - 23.07.03

플러터 프로젝트에서 카카오 로그인 기능을 연동시키는 과정을 간단하게 기록한다. 참고한 링크는 다음과 같다.

https://vlee.kr/4986

1.  카카오 개발자 사이트에서 어플리케이션 등록하기

• 카카오 개발자 사이트 로그인
• 새 어플리케이션 등록하기
• 안드로이드 플랫폼 먼저 등록
  • 키 해시 값 생성하기 위한 명령어 입력 -> 키 해시 생성됨.

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

마켓등록은 아직 안해서 없음으로 함

• ios 플랫폼도 번들 ID는 android 패키지명과 같이 입력하여 등록하였음

2. Kakao Flutter SDK 설치

flutter pub add kakao_flutter_sdk

• 위 명령어 입력하여 sdk 설치함 => pubspec.yaml에 다음 버젼이 추가되었음

kakao_flutter_sdk: ^1.4.3

 

3. Android, iOS 디바이스에서 커스텀 URL 스킴 설정

아래 가이드에 잘 나와있음

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-flutter#setup-scheme-android

• 수정하는 부분 형식의 예시 : kakao463290d289d5d792f9c9a9ad6d6f2c0b
• ios url scheme은 XCode로 들어가서 추가해주기 [아래 가이드 예시 참고]

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-ios#set-up-url-schemes

 

4. 카카오 개발 가이드 참고해서 다음과 같은 과정을 거치는 로그인 알고리즘 구현

아래는 자체 제작한 model 폴더에 만든 kakao_login.dart파일

import 'package:kakao_flutter_sdk/kakao_flutter_sdk.dart';
import 'package:flutter/services.dart';
import 'package:logging/logging.dart';

final Logger _logger = Logger('Kakao Login');

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

Future<void> signInWithKakao() async {
  if (await AuthApi.instance.hasToken()) {
    try {
      AccessTokenInfo tokenInfo = await UserApi.instance.accessTokenInfo();
      _logger.info('토큰 유효성 체크 성공: ${tokenInfo.id} ${tokenInfo.expiresIn}');
      _getUserInfo();
    } catch (error) {
      if (error is KakaoException && error.isInvalidTokenError()) {
        _logger.warning('토큰 만료: $error');
      } else {
        _logger.severe('토큰 정보 조회 실패: $error');
      }

      await loginWithKakaoAccount();
    }
  } else {
    _logger.warning('발급된 토큰 없음');
    await loginWithKakaoAccount();
  }
}

Future<void> loginWithKakaoAccount() async {
  if (await isKakaoTalkInstalled()) {
    try {
      OAuthToken token = await UserApi.instance.loginWithKakaoTalk();
      _logger.info('카카오톡으로 로그인 성공: ${token.accessToken}');
      _getUserInfo();
    } catch (error) {
      _logger.severe('카카오톡으로 로그인 실패: $error');

      if (error is PlatformException && error.code == 'CANCELED') {
        return;
      }

      await _loginWithKakaoAccountFallback();
    }
  } else {
    await _loginWithKakaoAccountFallback();
  }
}

Future<void> _loginWithKakaoAccountFallback() async {
  try {
    OAuthToken token = await UserApi.instance.loginWithKakaoAccount();
    _logger.info('카카오계정으로 로그인 성공: ${token.accessToken}');
    _getUserInfo();
  } catch (error) {
    _logger.severe('카카오계정으로 로그인 실패: $error');
  }
}

- 챗지피티를 이용해서 알고리즘 설명을 정리함

1. 코드는 kakao_flutter_sdk, flutter/services, logging 등의 패키지들을 불러옵니다.
2. final Logger _logger = Logger('Kakao Login'); 이 부분은 로그를 관리하는 Logger 객체를 생성합니다. 이 로거는 "Kakao Login"이라는 이름으로 생성됩니다.
3. _get_user_info() 함수는 Kakao 사용자의 정보를 얻는 것을 시도하고, 성공하면 로거를 사용하여 회원 번호와 닉네임을 정보로 로그에 출력합니다. 만약 실패하면 에러 메시지를 severe(심각한) 로그로 출력합니다.
4. signInWithKakao() 함수는 카카오로 로그인하는 메인 함수입니다. 이 함수는 비동기적으로 작동하며, 다음 단계들을 수행합니다:
   1. 먼저, 이미 토큰이 존재하는지 AuthApi.instance.hasToken()을 통해 확인합니다.
   2. 토큰이 존재하면, UserApi.instance.accessTokenInfo()를 통해 토큰 정보를 얻어옵니다.
   3. 토큰 정보가 정상적으로 얻어지면, 토큰의 유효성 체크가 성공했다는 로그를 출력하고 _get_user_info() 함수를 호출하여 사용자 정보를 얻습니다.
   4. 토큰 정보를 얻는 도중 에러가 발생하면, 카카오 예외 처리를 하여 토큰 만료 여부를 확인하고 그에 따른 로그를 출력합니다. 그 후 loginWithKakaoAccount() 함수를 호출하여 새로운 토큰을 얻습니다.
   5. 토큰이 존재하지 않는 경우에도 loginWithKakaoAccount() 함수를 호출하여 새로운 토큰을 얻습니다.
5. loginWithKakaoAccount() 함수는 카카오톡이 설치되어 있는지 확인하고, 설치되어 있다면 카카오톡으로 로그인을 시도합니다.
   1. 카카오톡으로 로그인에 성공하면, 로그인 성공 로그를 출력하고 사용자 정보를 얻습니다.
   2. 로그인에 실패하면, 로그인 실패 로그를 출력하고 특정 에러(사용자가 로그인을 취소한 경우)가 아닌 경우에는 카카오계정으로 로그인을 시도합니다.
   3. 카카오톡이 설치되어 있지 않은 경우에도 바로 카카오계정으로 로그인을 시도합니다.
6. _loginWithKakaoAccountFallback() 함수는 카카오계정으로 로그인을 시도하고, 성공하면 로그인 성공 로그를 출력하고 사용자 정보를 얻습니다. 실패하면 로그인 실패 로그를 출력합니다.

이 코드는 카카오 로그인 프로세스를 효과적으로 관리하고, 각 단계에서 발생하는 상황을 로그로 기록하여 추후 분석이나 디버깅에 활용합니다.

 

 

=> 최종적으로 카카오 로그인 버튼에 signInWithKakao() 함수를 엮음

import '../model/kakao_login.dart';

 

...

Column(mainAxisSize: MainAxisSize.max, children: [

Padding(

padding:

const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 20),

child: LoginButton(

imagePath: 'lib/images/login/kakao_login.png',

height: 55,

onPressed: () => signInWithKakao(),

),

),

...