[Android] Firebase Dynamic Link를 활용하여 사용자 초대링크 생성하기

 

이번 포스팅에서는 Firebase의 Dynamic 링크를 활용하여 사용자를 유입시키고 초대할 수 있는 링크를 만들어보도록 하겠습니다.

 

해당 기능을 구현하게 된 계기는,

현재 동아리에서 진행하고 있는 과외 학생 관리 서비스에서 선생님이 학생을 수업에 참여시키기 위한 초대 링크 기능이 필요하였기 때문입니다.

그렇게 구상한 로직은 아래와 같습니다.

1. 선생님이 수업을 생성한다.

2. 초대하기 버튼을 통해 초대링크를 생성하고, 카카오톡으로 학생에게 링크를 공유한다.

3. 링크를 통해 앱 설치 후 접속하면, 선생님의 수업에 학생이 참여한다.

 

해당 포스팅에서는 링크를 공유하고 카카오톡으로 공유하여 접속하는 기능만 다루겠습니다.

 

우선 Firebase 사이트에 접속합니다.

https://console.firebase.google.com

로그인 - Google 계정

 

 

'Firebase의 프로젝트 생성 버튼'

 

그럼 홈페이지 중앙에 프로젝트를 추가할 수 있는 버튼이 존재합니다.

 

 

 

버튼을 클릭하면, 이처럼 프로젝트명을 입력하고 계속 버튼을 눌러 프로젝트 생성을 마무리합니다.

 

 

그리고 프로젝트에 들어가보면, 이렇게 + 앱 추가 버튼이 있을텐데,

저는 이미 안드로이드 앱을 등록하여 왼쪽에 핑퐁이라는 앱이 존재합니다.

 

 

앱 추가 버튼을 클릭하면 나오는 화면은 위와 같습니다.

진행하고 있는 프로젝트의 패키지명, 앱 닉네임(선택사항), SHA-1을 입력해주고 앱을 등록합니다.

 

 

해당 내용을 입력하고 앱 등록을 누르면 이렇게 google-services.json 파일을 다운로드할 수 있는 버튼이 생성됩니다.

json 파일을 다운로드하여 Project -> app 폴더에 추가해주면 프로젝트 및 앱 등록 과정이 끝납니다.

 

 

이제 본격적으로 다이나믹 링크를 생성할 시간입니다.

왼쪽 탭들 사이에서 맨 아래에 Dynamic Links를 클릭해줍니다.

 

 

그리고 왼쪽 상단을 확인해보면 URL 프리픽스 추가를 할 수 있는 버튼이 보일 텐데,

프로젝트에서 사용할 앞부분의 URL을 추가하는 단위입니다. (필수)

 

 

개인 도메인이 있으면 문제가 없지만, 파이어베이스에서 제공해주는 (이름).page.link 형식으로 입력하지 않으면,

따로 추가해야 하는 작업이 생겨 번거롭게 됩니다.

따라서 저는 임의로 testservice.page.link로 지정하겠습니다.

 

 

URL 프리픽스를 만들고 나면, 우측 상단에 새 동적 링크 라는 버튼이 생기는데,

저희는 초대 링크를 사용하는 것이기 때문에 url에 자체 query를 포함시킬 예정이라, 따로 생성해주지는 않겠습니다.

 

이제 안드로이드 스튜디오로 넘어가겠습니다.

우선 필요한 화면이 있습니다.

1. 수업 초대를 위한 액티비티 (ClassProgressActivity)

2. 초대 링크를 통해 접속할 액티비티 (InviteLinkActivity)

 

        <activity
            android:name=".presentation.inviteLink.InviteLinkActivity"
            android:exported="true">
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <!-- setLink()에 전달하는 링크와 동일한 host, path, scheme -->
                <data
                    android:host="testservice.page.link"
                    android:path="/invite"
                    android:scheme="https" />

                <data
                    android:host="testservice.page.link"
                    android:path="/invite"
                    android:scheme="http" />
            </intent-filter>
        </activity>

 

우선 초대 링크를 통해 접속할 액티비티의 Manifest에 한 가지 코드를 작성해주겠습니다.

위 코드와 동일하게 작성을 해주되,

<data/>의 host는 아래에서 생성할 자신만의 URL의 host를 입력해주어야 합니다.

 

private fun checkInviteLink() {
        Firebase.dynamicLinks
            .getDynamicLink(intent)
            .addOnSuccessListener(this) { pendingDynamicLinkData ->
                // Get deep link from result (may be null if no link is found)
                var deepLink: Uri? = null
                if (pendingDynamicLinkData != null) {
                    deepLink = pendingDynamicLinkData.link
                }

                // 쿼리로 초대한 선생님의 uid가 존재한다면
                if (deepLink != null &&
                    deepLink.getBooleanQueryParameter("uid", false)
                ) {
                    /*
                    * 수업 리스트에 초대하는 로직
                    * */

                    val referrerUserId = deepLink.getQueryParameter("uid")
                    Toast.makeText(this, "$referrerUserId", Toast.LENGTH_SHORT).show()
                }
            }
    }

 

해당 코드는 링크를 통해 접속했을 때 사용자를 이동시킬, InviteLinkActivity 입니다.

onCreate에서 위 메서드를 호출하여, 선생님의 uid 여부를 확인하고 Toast로 보여줄 것입니다.

(실제로는 선생님의 uid를 받아서 수업에 참여시킵니다.)

만약 링크를 통해 접속한 것이 아니라면, addOnSuccessListener가 실행되지 않아, 자동으로 로직이 수행되지 않도록 도와줍니다.

 

 

private fun sendInviteLink(inviteLink: Uri) {
    val teacherName = "최기택" // 임의의 선생님 이름
    val inviteIntent = Intent(Intent.ACTION_SEND).apply {
        type = "text/plain" // 고정 text
        setPackage("com.kakao.talk") // 카카오톡 패키지 지정
        // 초대 코드 텍스트 지정
        putExtra(
            Intent.EXTRA_TEXT,
            "$teacherName 선생님이 수업에 초대하였습니다!\n[수업 링크] : $inviteLink"
        )
    }

    try {
        startActivity(inviteIntent) // 수업 초대를 위해 카카오톡 실행
    } catch (e: ActivityNotFoundException) {
        // 카카오톡이 설치되어 있지 않은 경우 예외 발생
        showToast("카카오톡이 설치되어 있지 않습니다.")
    }
}

 

private fun invite() {
        val userId = "kim1234" // Query로 사용할 유저 아이디 (Uid로 변경 가능성)

        // (Manifest에 설정한 scheme, host, path와 동일해야 함.)
        val invitationLink = "https://testservice.page.link/invite?uid=$userId" // 생성할 다이나믹 링크

        val dynamicLink =
            FirebaseDynamicLinks.getInstance().createDynamicLink()
                .setLink(Uri.parse(invitationLink))
                .setDomainUriPrefix("https://testservice.page.link") // 파이어베이스 다이나믹 링크란에 설정한 Prefix 입력
                .setAndroidParameters(
                    AndroidParameters.Builder().build()
                )
                .buildShortDynamicLink()

        dynamicLink.addOnSuccessListener { task ->
            val inviteLink = task.shortLink!!
            sendInviteLink(inviteLink)
        }

    }

 

이 코드는 초대 코드를 생성하고 카카오톡으로 전달하기 위한 메서드입니다.

물론 이전에 나온 코드와 다른 액티비티인 ClassProgressActivity에서 초대하기 버튼을 눌렀을 때 호출합니다.

invitationLink는 사용자가 만들어낼 Custom Url이라고 생각할 수 있습니다.

Url의 맨 뒷부분에 uid 쿼리의 값으로 userId를 포함시켜서 생성하고, setLink()의 Uri로 지정합니다.

setDomainUriPrefix() 에는 처음에 생성한 URL 프리픽스를 입력하면 됩니다.

그렇게 링크 생성에 성공하였다면, addOnSuccessListener가 호출되고, 초대하기 링크를 카카오톡으로 전달합니다.

 

위의 로직을 사진으로 확인해보겠습니다.

 

'수업 초대 링크 과정'

 

첫 번째 사진의 초대하기 버튼을 누르면 카카오톡으로 수업 링크를 전달하는 모습을 볼 수 있습니다.

그리고 학생이 해당 링크로 접속하면 회원가입을 진행할 수 있는 화면이 보이게 됩니다.

위에서 작성한 코드처럼 선생님의 uid가 Toast를 통해 화면에 나타납니다.

 

내용에 오류가 있거나, 질문이 있으신 분들은 댓글을 남겨주시면 감사하겠습니다! 😊