ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Flutter 카카오톡 SDK 연동 로그인 (ios, android)
    개발이야기/Flutter 2021. 1. 10. 18:55

    작성이유

    1 프로젝트 진행 중 카카오톡 sdk 연동 소셜 로그인 기능이 필요했다.
    2 블로그를 통해 정보를 최대한 모았지만, 안드로이드 또는 ios, 한 디바이스 위주의 게시글 만 주로 나왔기에 두 기기에 대해 상세히 기술하기 위해 작성하였다. 

    참고 문헌

    안드로이드 
    - SDK 문서1 : developers.kakao.com/docs/latest/ko/kakaologin/android#before-you-begin
    - 블로그 1: medium.com/@curogom/flutter%EB%A1%9C-social-login-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1-kakao-5e894dfc411f
    ios 
    -SDK 문서1: developers.kakao.com/docs/latest/ko/kakaologin/ios#before-you-begin
    - 블로그 1: velog.io/@ssorry_choi/Flutter-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-ios
    - 블로그 2: eunjin3786.tistory.com/288

    dependencies

    링크 : pub.dev/packages/kakao_flutter_sdk

     

    kakao_flutter_sdk | Flutter Package

    A flutter plugin for Kakao API, which supports Kakao login, KakaoLink, User API, KakaoTalk API, KakaoStory API, and Push API.

    pub.dev

    위 package 설명란에서 볼 수 있듯이 추가 종속성 -dio, json_annotation ... 등을 추가로 pubspec.yaml 더해줬다.

    나의 예 :

    dio: ^3.0.10
    json_annotation: ^3.0.1
    platform: ^2.2.1
    package_info: ^0.4.0+18
    kakao_flutter_sdk: ^0.5.2

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

    카카오 sdk 를 사용하려면 먼저 카카오 개발자 사이트에 가서 솔루션 등록을 해야한다. 이 곳에서 카카오 api를 호출할 수 있는 권한을 받을 수 있다. 

    android 

    android/app/src/main의  AndroidManifest.xaml에 다음소스코드를 넣음. 마크되어있는 곳은 네이티브 앱키이다. "kakao{NativeAppKey}"를 등록

    그리고 minsdkversion 이 19이상으로 맞추어야 했다.
    android/app/build.gradle서 minsdkversion이 나는 16으로 설정되어있었기에 19로 올렸다. 
    그리고 카카오 sdk인 경우 앱 키해시를 등록하여하는데 keytool을 이용하여 디버그 키 해시 값을 카카오 개발자 사이트에 등록하였다. 

    ios

    ios는 참고한 SDK 문서, 두 블로그 모두 각각 내용이 일부 유사하나 상이해서 다 적용해버렸다. SDK 문서선 딱히 적용할 것이 없었다. 블로그 1에선 Runner - Info - URL Types 에 Scheme 추가 및 Info.plist서 KAKAO_APP_KEY추가였고, 블로그 2선 flutter 서 Info.plist를 열어 메타 정보를 넣었다. 블로그 2의 내용은 kakao_flutter_sdk 내용과 같다. 해당 내용은 위 참고 블로그 및 pub 문서 참고 부탁드립니다. 

    공통 소스코드 파트

    공통소스코드는 main 파트에 클라이언트 키를 할당하는 것으로 완료하였다.

    로그인 파트

    로그인 파트는 두 프로세스로 진행하였다. 
    1 카카오톡 이 기 설치되어있을 땐 카카오톡에서 정보를 가져옴
    2 카카오톡이 설치 되어 있지 않을 땐 웹뷰를 통해 로그인을 시도함

    위 소스코드는, 테스트 용도로 작성하여서 프로세스상 좋은 소스코드인지는 검토가 필요하다. 나는 위 소스코드로 만족할 만한 결과를 얻었기에 이 정도로 마무리 지었다. 추후 authCode를 이용하여 사용자 아이디 및 부가 정보를 가져오는 기능이 필요하다면 추가 검토가 필요할 듯하다.

    이로써 flutter서 카카오톡 sdk 연동 로그인을 완료하였다. android, ios 모두 테스트 하여 정상동작하였다.

    '개발이야기 > Flutter' 카테고리의 다른 글

    Flutter 카카오톡 SDK 연동 로그인 (ios, android)  (0) 2021.01.10
    Flutter - Singleton  (0) 2020.12.14

    댓글 0

Designed by Tistory.