[Flutter] 카카오톡으로 공유하기 (Kakao SDK의 Link Api 사용하기)

[1] kakao_flutter_sdk 설치하기 

 

카카오에서 Kakao API를 쓸 수 있는 Flutter SDK를 제공하고 있습니다. (github.com/kakao/kakao_flutter_sdk)

안드, iOS 서포트하고 웹은 곧 서포트해줄 예정이라고 합니다. 

 

 

저는 카톡공유하기 기능을 만들고 싶어서 Kakao API 중 LinkApi를 쓸 예정입니다. 

그럼 우선 패키지를 설치해줄게요.

 

pubspec.yaml > dependencies에

kakao_flutter_sdk: ^0.5.2 를 추가하고

pub get을 눌러주세요

 

 

[2] Kakao API 살펴보기 

 

문서를 보면 KakaoAPI는 Token-based API 랑 App key based API로 나눠집니다. 

 

1) Token-based API

 

access token이 있어야지 Api를 콜할 수 있고

- UserApi

- TalkApi

- StoryApi 

가 있습니다. 

 

 

2) App Key based API 

 

SDK를 초기화하기만 하면 부를 수 있는 API로 token-based API 보다 쉽습니다. 

 

- LinkApi

- LocalApi

- SearchApi

- PushApi

가 있습니다.

 

 

저는 LinkApi를 써야하니까

AppKey로 SDK를 초기화해주는 것부터 해볼게요-!

 

[3] 카카오 앱 등록 + App Key 알아내기

 

Kakao Developers 로 들어가서 

내 애플리케이션 > 애플리케이션 추가하기를 누르고 앱을 만들어주세요 (앱이름이랑 사업자명만 입력하면 만드는 것 끝-!) 

 

앱을 만들면 네이티브 앱 키가 발급됩니다. 

 

 

그리고 플랫폼 설정하기를 눌러서 안드로이드 패키지명, iOS 번들 아이디를 추가해주세요

(참고로 안드로이드 > 마켓 URL은 제가 추가한것 아닌데, 자동으로 생겼어요) 

 

 

 

[4] App Key로 SDK 초기화

 

위에서 얻은 앱키로 SDK를 초기화해줍니다.

 

 

저는 RootWidget의 이니셜라이저에서 초기화해줬습니다. 

 

import 'package:kakao_flutter_sdk/link.dart';

class RootWidget extends StatefulWidget {
  @override
  _RootWidgetState createState() => _RootWidgetState();
}

class _RootWidgetState extends State<RootWidget> {

  @override
  void initState() {
    ... 
    
    String kakaoAppKey = "49db8988fcab357303......";
    KakaoContext.clientId = kakaoAppKey;
    
    super.initState();
  }
}

 

 

[5] iOS > info.plist 

 

여기서 common과 kakaolink만 복붙해주면 됩니다. 

 

 

ios > Runner > info.plist에 

이렇게 추가하면 됩니다. 

    <key>LSApplicationQueriesSchemes</key>
    <array>
    <!-- common -->
    <string>kakao${my app key}</string>

    <!-- KakaoLink -->
    <string>kakaolink</string>
    <string>kakaotalk-5.9.7</string>
    </array>

 

⚠️ 그리고 만약 kakaoSDK의 isKakaoTalkInstalled() 라는 메소드를 사용하실 거라면

KakaoTalk Login 부분도 추가해주셔야합니다. ⚠️

이거 안넣으면  isKakaoTalkInstalled()가 카카오톡 설치 유무 상관없이 항상 false를 리턴하더라구요....😳

저는 저 메소드를 써야해서 추가해줬어요!

 

    <key>LSApplicationQueriesSchemes</key>
    <array>
    <!-- common -->
    <string>kakao${my app key}</string>

    <!-- KakaoTalk login -->
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
      
    <!-- KakaoLink -->
    <string>kakaolink</string>
    <string>kakaotalk-5.9.7</string>
    </array>

 

[6] 안드로이드 > Key hash 등록

안드로이드에서 카카오 SDK를 쓰려면 Kakao Developers 사이트에 가서 키 해쉬를 넣어줘야한다고 합니다. 

그 이유는 키 해쉬를 이용해서 악성 앱을 판별하기 위해서!

 

(참고: https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android-v1#key-hash )

 

안드로이드 앱 수정누르면

 

 

여러개의 키 해시 입력할 수 있어요!

 

 

디버그 키 해시랑 릴리즈 키 해시 두가지가 있다고 하는데 

저는 우선 디버그 키 해시만 해볼게요

 

터미널을 열고 문서에 나와있는 명령어를 입력하면

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

 

어떤 워닝과 함께 저의 키 해쉬가 나옵니다.  (파란박스 친 줄)

 

 

복사해서 여기 키 해시에 넣어줍니다.

 

 

출시할때는 꼭꼭 릴리즈키도 구해서 넣어주세요!!! (저는 이거 안해서 안드로이드에서는 카톡이 안열렸어요ㅠㅠ퓨)

이 블로그 보고 해주세요

 

[7] 카톡으로 메세지 보내기

 

github.com/kakao/kakao_flutter_sdk/blob/master/example/lib/link.dart 예제 코드를 참고해서 카톡 공유를 해보겠습니다. 

 

우선 어떤 템플릿을 메세지로 보낼 지 정해야하는데요, 

저는 기본 템플릿 중, 이미지+텍스트를 보낼수 있는 피드 템플릿을 써볼게요!! 

 

참고로 메세지 템플릿 에서 다양한 템플릿 + 커스텀 템플릿을 보실 수 있습니다. 

 

저는 KakaoShareManager라는 싱글톤을 만들고 (참고: 다트의 Factory 생성자로 싱글톤 만들기)

여기에 share코드를 넣어줬어요! 

 

템플릿을 만들고 그 템플릿을 uri로 변환시킵니다. 

uri를 콘솔에 출력해보면 kakaolink://send?~~~~~ 이렇게 나옵니다.

 

 

그 uri로 카카오톡을 런치해주는 코드입니다.

 

 

 

그리고 '공유하기' 버튼을 누르면

카톡이 깔려있는지 체크하고

깔려있다면 공유하게 해줬어요 

    var _shareMyCodeButton = CupertinoButton(
      child: Text("나의 코드 공유", style: TextStyle(color: MyColor.white, fontFamily: MyFontFamily.gyeonggiLight)),
      color: MyColor.black,
      borderRadius: BorderRadius.circular(12),
      onPressed: () {
        KakaoShareManager().isKakaotalkInstalled().then((installed) {
          if (installed) {
            KakaoShareManager().shareMyCode();
          } else {
            // show alert
          }
        });
      },
    );

 

 

iOS랑 안드로이드 모두 잘됩니다! 

 

iOS

 

Android

 

이제 템플릿을 저의 앱에 맞게 바꿔주면 되겠습니다!+! 

 

 

[8] Link를 열 수 있게 하기 위해 도메인 등록하기

 

메세지나 버튼을 누르면 특정 링크를 열 수 있게 해놨는데 동작하지 않을거에요!

그 이유는 카카오 디벨로퍼스에서 등록한 도메인만 열어주게 되어있기 때문입니다.

 

이렇게 사이트 도메인을 등록해주세요~ 

 

 

 

 

 

Reference 

pub.dev/documentation/kakao_flutter_sdk/latest/link/LinkClient-class.html

LinkClient class - link library - Dart API