스프링 & 플러터 카카오 로그인 구현 - 플러터 모바일 앱 구현

하스레·2022년 12월 17일
0

참고: 카카오 공식 문서에서 제공하는 플러터 카카오 로그인 구현 방식
https://developers.kakao.com/docs/latest/ko/kakaologin/flutter

  1. 카카오에서 제공하는 플러터 Kakao Native SDK를 다운받는다. 카카오 공식 문서 참고
    => https://pub.dev/packages/kakao_flutter_sdk_user
    참고로 플러터에서 제공하는 라이브러리는 다음과 같이 있다.
dependencies:
  kakao_flutter_sdk: ^1.3.0 # 전체 추가
  kakao_flutter_sdk_user: ^1.3.0 # 카카오 로그인
  kakao_flutter_sdk_talk: ^1.3.0 # 카카오톡(소셜, 메시지)
  kakao_flutter_sdk_story: ^1.3.0 # 카카오스토리
  kakao_flutter_sdk_share: ^1.3.0 # 카카오톡 공유
  kakao_flutter_sdk_navi: ^1.3.0 # 카카오내비
  1. 도구 > 리소스에서 아이콘 다운받는다.

  2. main.dart에 다음 init() 코드를 추가한다. 파라미터로 카톡 네이티브 앱 키를 넣어준다. 참고: 이전글

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  KakaoSdk.init(nativeAppKey: '네이티브앱키 넣어주기');
  runApp(const NavadaApp());
}
  1. 로그인 코드
ElevatedButton(
  style: ElevatedButton.styleFrom(backgroundColor: const Color.fromARGB(255, 255, 204, 0)),
  child: const Text(
    '카톡 로그인하기',
  ),
  onPressed: () async {
    bool isInstalled = await isKakaoTalkInstalled();
    OAuthToken? token;
    UserService userService = UserService();

      if (isInstalled) {
        try {
            token = await UserApi.instance.loginWithKakaoTalk();
            debugPrint('카카오톡으로 로그인 성공');
        } catch (error) {
          debugPrint('카카오톡으로 로그인 실패 $error');

          // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
          // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
          if (error is PlatformException && error.code == 'CANCELED') {
              return;
          }
          // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
          try {
              token = await UserApi.instance.loginWithKakaoAccount();
              debugPrint('카카오계정으로 로그인 성공');
          } catch (error) {
              debugPrint('카카오계정으로 로그인 실패 $error');
          }
        }
      } else {
        try {
          token = await UserApi.instance.loginWithKakaoAccount();
          debugPrint('카카오계정으로 로그인 성공');
        } catch (error) {
          debugPrint('카카오계정으로 로그인 실패 $error');
        }
    }
    if(token != null){
      // 백엔드로 Kakao Access Token 보내어, 백엔드에서 카카오로 회원정보 요청
      Map<String, dynamic>? response = await userService.signInByKakaoToken(token.accessToken);
    } 
  }
)
profile
Software Developer

0개의 댓글