KakaoLink 카카오 공유 한 번 해볼래?

안녕하세요! 고잉고잉 Android 팀 조세연입니다.

 

오늘은 카카오톡 공유하는 방법에 대해 알아보려고 합니다!

 

"친구에게 초대코드 보내기" 버튼을 누르면 카카오톡 메시지를 통해

공유되는 기능을 개발하는 과정에서 예상치 못한 문제들이 발생했는데

이에 대한 과정을 상세히 기술해 보도록 하겠습니다 :)

 

1. 초기 설정

* Gradle 설정

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        
        // 하단 url 추가
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }
    }
}

 

* 모듈 수준 build.gradle 설정

( 카카오톡 공유 API는 카카오톡 공유 모듈의 ShareClient가 제공하기에

 v2-share을 추가하셔야 합니다!)

dependencies {
    // kakao link
    implementation "com.kakao.sdk:v2-share:2.19.0"
}

 

* 키 해시 발급 

override fun initView() {
        val keyHash = Utility.getKeyHash(this)
        Log.d("Hash", keyHash)
}

 

로그에서 자신의 해시 키를 확인하고 

 Kakao Devleopers 에 등록되어 있는 안드로이드 애플리케이션

키 해시에 추가해줍니다!

 

2. Manifest 설정

        <activity
            android:name="com.going.presentation.entertrip.createtrip.finish.FinishTripActivity"
            android:exported="true"
            android:screenOrientation="portrait">
            <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${NATIVE_APP_KEY}" />
            </intent-filter>
        </activity>

 

 

 Kakao Devleopers에서

저희 두립은 로컬 프로퍼티에 저장해 놓았기에 이렇게 코드를 작성하였습니다!

 

3. 메시지 템플릿 설정

https://developers.kakao.com/tool/template-builder/app

카카오계정

사이트를 이용해 메시지 템플릿을 직접 만들 수 있습니다.

템플릿을 만들면 템플릿 아이디를 확인할 수 있는데요!

 

 

4. 액티비티 코드와 연결

 private fun initSendCodeBtnClickListener() {
        binding.btnFinishTripSendCode.setOnSingleClickListener {
            startKakaoInvite(this)
        }
    }

 

우선 버튼 눌렀을 때에 카카오톡 메시지로 보내기가 가능하도록

코드를 구현해 보겠습니다!

 

저희가 커스텀한 카카오 템플릿은 

 

 

이렇게 초대코드, 여행이름 두 가지가 필요하기에

두 가지를 꼭 넣어줘야 합니다!

  private fun startKakaoInvite(context: Context) {
     
        if (ShareClient.instance.isKakaoTalkSharingAvailable(context)) {
            ShareClient.instance.shareCustom(
                context,
                TEMPLATE_ID.toLong(),
                hashMapOf(
                    KEY to inviteCode,
                    NAME to title
                )
            ) { sharingResult, error ->
                if (error != null) {
                    Timber.tag(TAG_SHARE).e(error, getString(R.string.invite_error_kakao))
                } else if (sharingResult != null) {
                    startActivity(sharingResult.intent)
                }
            }
        } else {
            val sharerUrl =
                WebSharerClient.instance.makeCustomUrl(
                    TEMPLATE_ID.toLong(),
                    hashMapOf(
                        KEY to inviteCode,
                        NAME to title
                    )
                )
            try {
                KakaoCustomTabsClient.openWithDefault(context, sharerUrl)
                return
            } catch (error: UnsupportedOperationException) {
                Timber.tag(TAG_SHARE).e(error, getString(R.string.invite_error_browser))
            }
            try {
                KakaoCustomTabsClient.open(context, sharerUrl)
                return
            } catch (error: ActivityNotFoundException) {
                Timber.tag(TAG_SHARE).e(error, getString(R.string.invite_error_browser))
            }
        }
    }

 

2가지가 들어가야 하는 경우에는      

hashMapOf(KEY to inviteCode, NAME to title)

이렇게 파싱해서 넣어야 합니다!

 

그게 아니라면 

 mapOf("KEY" to InviteCode)

이런 식으로 직접 템플릿에 연결해 주면 됩니다.

 

이제 마지막 단계입니다!

 

5. 템플릿에서 연결

두립 어플에서 친구에게 초대코드 보내기 버튼을 누르면

Android, ios 두 개의 버튼으로 카카오톡 메시지가 보내지게

템플릿을 수정해 줄 것인데요!

버튼으로 눌렀을 때 web으로 공유하기를 원한다면

내 애플리케이션 > 앱 설정 > 플랫폼에서

사이트 도메인에 플레이스토어, 앱스토어 링크를 입력해주셔야 합니다.

 

이제 메시지 템플릿 빌더로 돌아와서,

 

 

버튼 2개로 나누어 안드로이드, ios 따로 만들어준 후 

링크 설정 > 안드로이드는 플레이스토어 링크,

ios는 앱스토어 링크를 모바일 Web 링크에 추가해 줍니다!

 

이렇게 설정한다면 카카오톡 메시지로 공유되고,

사용자가 어느 버튼을 누르냐에 따라

각 스토어로 연결됩니다!

 

제 글이 도움이 되었길 바라며!

이만 마치겠습니다 :-)

오늘도 좋은 하루 보내세요!🖤