[Flutter] 카카오톡 공유

 

카카오톡 공유하기 버튼을 누르면 정해진 메세지를 선택한 친구한테 보낼 수 있는 기능을 구현해보았다!

 

Flutter 카카오톡 공유하기 기능

kakao developers 내 어플리케이션 등록 및 설정

기능을 구현할 어플리케이션을 등록하는 과정은 생략하겠다. 궁금하다면 아래 포스팅에 자세하게 설명되어 있으니 참고 바람!

https://cording-cossk3.tistory.com/208

[Flutter] Kakao Map api 사용하기

 

 

등록한 어플리케이션을 선택하면 아래와 같은 화면이 뜬다. 여기서 플랫폼을 선택해주자.

 

 

카카오톡 공유하기 메세지를 클릭하면 이동할 web url을 아래 화면 web에 등록을 해줘야지만 접근할 수 있다. 등록을 안해주면 아무리 메세지를 클릭해도 이동이 안됨!

 

 

kakao sdk 초기 설정

A ndroid 설정

AndroidManifest.xml 파일에 아래 코드와 같이 intent-fliter 코드를 넣어줘야 한다.

여기서, data scheme에는 kakaoabcdefg123456678 처럼 kakao${네이티브 앱 키} 형식으로 작성해줘야 한다.

네이티브 앱 키는 kakao developers에 등록한 어플리케이션에서 확인할 수 있다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="">

   <application>
        <activity android:name=".MainActivity">
            ...
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:host="kakaolink"
                    android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
            </intent-filter>
        </activity>
    </application>
    ...
</manifest>

 

 

iOS 설정

아래와 같이 Xcode에서 Runner > TARGETS-Runner > Info > URL Types에 URL Schemes를 추가해준다.

여기서도 마찬가지로 kakao${네이티브 앱 키} 형식으로 넣어줘야 한다.

 

 

Flutter 코드 설정

pubspec.yaml 패키지 추가

kakao_flutter_sdk: ^1.1.0

 

 

main 함수에 kakao sdk 초기화

KakaoSdk.init(nativeAppKey: '${KAKAO_NATIVE_KEY}');

 

 

원하는 형식의 template 생성

_getTemplate() {
    String link = 'https://developers.kakao.com';
    return FeedTemplate(
      content: Content(
        title: 'test title',
        description: 'test description',
        imageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
        link: Link(webUrl: Uri.parse(link), mobileWebUrl: Uri.parse(link)),
      ),
      buttons: [
        Button(
          title: 'button title',
          link: Link(
            webUrl: Uri.parse(link),
            mobileWebUrl: Uri.parse(link),
          ),
        ),
      ],
    );
  }

 

 

카카오톡 공유 기능 구현

_shared() async {
    // 카카오톡 실행 가능 여부 확인
    bool isKakaoTalkSharingAvailable = await ShareClient.instance.isKakaoTalkSharingAvailable();

    if (isKakaoTalkSharingAvailable) {
      try {
        Uri uri = await ShareClient.instance.shareDefault(template: _getTemplate());
        await ShareClient.instance.launchKakaoTalk(uri);
        print('카카오톡 공유 완료');
      } catch (error) {
        print('카카오톡 공유 실패 $error');
    }
    } else {
      try {
        Uri shareUrl = await WebSharerClient.instance.makeDefaultUrl(template: _getTemplate());
        await launchBrowserTab(shareUrl, popupOpen: true);
      } catch (error) {
        print('카카오톡 공유 실패 $error');
      }
    }
}

 

 

※ Image url 대신 asset image를 사용하고 싶을 때 참고

_shared() async {
    ByteData byteData = await rootBundle.load('assets/test.png');
    File tempFile = File('${(await getTemporaryDirectory()).path}/test.png');
    File file = await tempFile.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));

    try {
        // 카카오 이미지 서버로 업로드
        ImageUploadResult imageUploadResult = await ShareClient.instance.uploadImage(image: file);
        print('이미지 업로드 성공\n${imageUploadResult.infos.original}');

        bool isKakaoTalkSharingAvailable = await ShareClient.instance.isKakaoTalkSharingAvailable();
        if (isKakaoTalkSharingAvailable) {
            try {
                Uri uri = await ShareClient.instance.shareDefault(template: _getTemplate(imageUploadResult.infos));
                print('카카오톡 공유 : ${uri.toString()}');
                await ShareClient.instance.launchKakaoTalk(uri);
                print('카카오톡 공유 완료');
            } catch (error) {
                print('카카오톡 공유 실패 $error');
            }
        } else {
            try {
                Uri shareUrl = await WebSharerClient.instance.makeDefaultUrl(template: _getTemplate(imageUploadResult.infos));
                await launchBrowserTab(shareUrl, popupOpen: true);
            } catch (error) {
                print('카카오톡 공유 실패 $error');
            }
        }
    } catch (error) {
    	print('이미지 업로드 실패 $error');
    }
}

_getTemplate(ImageInfos infos) {
    String link = 'https://developers.kakao.com';
    return FeedTemplate(
        content: Content(
            title: 'test title',
            description: 'test description',
            imageUrl: Uri.parse(infos.original.url),
            link: Link(webUrl: Uri.parse(link), mobileWebUrl: Uri.parse(link)),
        ),
        buttons: [
            Button(
                title: 'button title',
                link: Link(
                    webUrl: Uri.parse(link),
                    mobileWebUrl: Uri.parse(link),
                ),
            ),
        ],
    );
}