카카오톡 공유하기 버튼을 누르면 정해진 메세지를 선택한 친구한테 보낼 수 있는 기능을 구현해보았다!
Flutter 카카오톡 공유하기 기능
kakao developers 내 어플리케이션 등록 및 설정
기능을 구현할 어플리케이션을 등록하는 과정은 생략하겠다. 궁금하다면 아래 포스팅에 자세하게 설명되어 있으니 참고 바람!
https://cording-cossk3.tistory.com/208
등록한 어플리케이션을 선택하면 아래와 같은 화면이 뜬다. 여기서 플랫폼을 선택해주자.
카카오톡 공유하기 메세지를 클릭하면 이동할 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),
),
),
],
);
}
'프로그래밍 > Flutter-Dart' 카테고리의 다른 글
[Flutter] Github를 이용하여 universal link, deep link 구현해보기 (1) | 2024.03.07 |
---|---|
[Flutter] Validation Pattern (0) | 2024.01.29 |
[Flutter] record type (0) | 2024.01.25 |
[Flutter] metadata (0) | 2024.01.25 |
[Flutter] Firebase Cloud Messaging 사용 방법 (5) | 2023.03.03 |
댓글