react native dynamic link를 이용한 앱 공유 | firebase

이동욱·2023년 2월 14일

react native

react native firebase

목록 보기

3/4

잘못된 부분, 바꾸면 더 좋을 부분이 있다면 댓글 부탁드리겠습니다. :)

사전 작업

firebase 연동
라이브러리 설치

npm i @react-native-firebase/dynamic-links

firebase 셋팅

프리픽스 생성

프로젝트선택후 좌측메뉴에서 참여 > Dynamic Links

도메인은 커스텀으로 만들 수도 있고 구글에서 제공하는걸 그냥 사용할 수도 있다. input창을 포커스하면 하단 추천 도메인이 보인다.

Android

1. sha-256 인증서 지문 구하기

프로젝트/android 위치에서 다음 명령어를 이용해 SHA-256 인증서 지문을 구한다.

./gradlew signingReport

2. firebase에 추가

firebase 프로젝트 설정에 들어가 Android앱을 선택하고 인증서 지문을 추가한다.
(디버그, 릴리즈 두 값을 모두 등록하고 작업 후 디버그 값을 삭제했습니다.)

IOS

1. 팀 ID , App Store ID 추가하기

firebase 프로젝트 설정에서 Apple앱을 선택후 App Store ID와 팀ID를 설정한다.

App Store ID : 앱 스토어 url에서 확인할 수 있다. 스토어에 업로드 된 프로젝트의 url을 보면 /id12345678 처럼 되어있다.
팀 ID : App Store Connect 로그인 후 우상단에서 프로필 편집을 들어가면 확인 할 수 있다.

2. Associated Domain 활성화 체크

Apple Developer > Account > Certificates, Identifiers & Profiles > Identifiers > 프로젝트의 Identifier를 선택해 Associated Domains를 활성화

3. X Code

프로젝트 > TARGETS > Signing & Capabilities > +Capability

Associated Domains 추가

도메인 추가

applinks:프리픽스 링크 (위에서 생성한 링크)

저는 추가한 동적 링크를 입력했습니다.(firebase 콘솔에서 작업한 링크)

링크 생성해서 공유하기

링크를 생성하는 방법은
1.Firebase 콘솔
2.Dynamic Link Builder API (Android, iOS, Flutter)
3.REST API
4.수동
총 네가지 방식이 있고 이 글에선 firebase와 REST API를 사용해 만든다

1. firebase console에서 만들기

링크 트랙킹 성능 추적이 쉽다.
SNS에서 공유할 프로모션 링크를 만드는 경우에 유용하다

firebase console > 참여 > Dynamic Links > 새 동적 링크

단축 URL 링크 설정
기본 제공 되지만 커스텀 가능하다
동적링크 설정
딥 링크 URL: 데스크톱에서 클릭시 이동할 URL을 입력해준다 (모바일에서는 앱 이 있으면 앱 없으면 링크로 간다, 스토어로 가는건 이후 단계에서 설정할 수 있다.)
동적 링크 이름: 해당 링크 트랙킹에 쓰이는 이름
Apple용 링크 동작 정의
앱의 App Store 페이지를 활성화 하면 앱이 없는 경우 스토어로 보낼 수 있다. (커스텀 Url도 가능하다)
Android용 링크 동작 정의
앱의 App Store 페이지를 활성화 하면 앱이 없는 경우 스토어로 보낼 수 있다. (커스텀 Url도 가능하다)
IOS와 동일하게 해준다.
캠페인 추적, 소셜 태그, 고급 옵션(선택사항)

2. rest api로 만들기

빌더 API가 없어도 Dynamic Link를 생성할 수 있다.
링크를 커스텀하기에 용이하다

웹 API 키값 구하기
firebase console > 프로젝트 선택 > 프로젝트 설정 > 웹API키 확인

웹 API 키가 없는 경우.
웹 API가 없고 위에 '이 프로젝트에 웹 API 키가 없습니다'가 적혀있다면 빌드 > Authentication > Sign-in method에서 이메일/비밀번호를 활성화 해주자

DynamicLink 생성
REST API로 Dynamic Link 생성시 사용중인 코드예시

const uriKey = 'https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=웹API키`

export const makeDynamicLink = async (params:string ,value:string) => {
  const {data} = await axios({
    method: 'post',
    url: uriKey,
    data: {
      dynamicLinkInfo: {
        domainUriPrefix: '프리픽스URL',
        link: `프리픽스URL/${params}=${value}`,
        androidInfo: {
          androidPackageName: '안드로이드패키지명',
        },
        iosInfo: {
          iosBundleId: 'ios번들id',
        },
        socialMetaTagInfo: {
          socialTitle: '공유 카드 제목',
          socialDescription: '공유 카드 부제목',
          socialImageLink: '이미지 링크',
        },
      },
      suffix: {
        option: 'SHORT',
      },
    },
  });

  return data.shortLink;
};

더 자세한 매개변수

만들어진 링크는 react-native-share라이브러리르 통해 공유해줬다.
(React Native에서 제공하는 Share API는 ios에서만 url 공유가 가능했다)

Dynamic Link 받아서 처리하기

1.foreground (onLink)

import {
  firebase,
  FirebaseDynamicLinksTypes,
} from '@react-native-firebase/dynamic-links';

...
useEffect(() => {
    const unsubscribe = firebase.dynamicLinks().onLink(link => {
    	// foregounrd 링크 로직
    });
    return () => unsubscribe();
}, []);
...

2.background & quit (getInitialLink)

import {
  firebase,
  FirebaseDynamicLinksTypes,
} from '@react-native-firebase/dynamic-links';

...
useEffect(() => {
      firebase
      .dynamicLinks()
      .getInitialLink()
      .then(async url => {
          	// background & quit 링크 로직
      		console.log(background & quit) 	
            console.log(url) 	
      });
}, []);
...

생성된 링크를 타고 들어가면 아래처럼 파라미터값이 잘 들어오는것을 확인 할 수 있다.