expo(react native)에서 dynamic link(v.6) 적용하기

뿡빵뽕·2023년 6월 12일

사용 목적

처음엔 universal link(ios), app link (android) 로 deep link 와 deferred deeplink를 적용했지만 카카오처럼 링크를 인앱브라우저로 여는 경우에 앱이 열리는게 아니라 웹 주소 그대로 열리는 이슈때문에 dynamic link를 사용하기로 했다.

expo 에서 dynamic link를 사용하려면 prebuild를 해야한다.
내 추측이지만 dynamic link사용시 인앱브라우저에서 열어도 ios는 사파리, android는 크롬에서 열게 작동되어 인앱브라우저에서도 앱을 열수있게하지만 최근 ios 보안 강화로 ios는 preview.page.link가 먼저 뜬다.
내가 하고 있는 프로젝트의 경우는 그냥 넘어가기로 했지만 아예 preview 페이지가 안뜨고 앱이 열리게 하려면 uri-scheme 방식의 딥링크로 처리해야한다. (다만 여기선 deferred deeplink가 안되니 선택과 집중이....필요하다)

0. package install

"@react-native-firebase/app"
"@react-native-firebase/dynamic-links"

위 패키지들을 설치한다.

1. firebase setting

firebase에 프로젝트를 하나 만들고 다음 설정을 완료한다.

(ios)스토어 id는 선택사항이지만 deferred deeplink를 적용하려면 적는다.

(android) 디버그 서명 인증서는 아래 명령어로 찾는다.

cd android && ./gradlew signingReport

ios와 android 설정을 마치면 프로젝트 설정 제일 하단, 혹은 1 앱 등록 이후에 나오는 2 구성파일 다운로드 후 추가에서 google-services.json, GoogleService-Info.plist를 다운받는다.

google-services.json 는 android/app 폴더에,
GoogleService-Info.plist 는 ios 폴더에 넣는다.

그리고 딥링크를 추가한다

1) 링크로 사용할 프리픽스를 정한다.

2) 서픽스도 정해준다.

3) 딥링크 url도 적어준다. 2에서 적은 주소의 미리보기를 똑같이 적으면 된다.

4) 다음 설정들을 각 OS 앱에서 딥링크 열기로 설정한다.
** 안드로이드 캡쳐 잘못됐음

firebase 설정은 이게 끝이다!

2. android setting

1) ./android/app/src/AndroidManifest.xml 에서 activity android:name=".MainActivity" 에 intent-filter를 추가한다.

<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <data android:scheme="https" android:host="내가 firebase 에서 만든 프리픽스 ex)testtest.page.link"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <category android:name="android.intent.category.DEFAULT"/>
      </intent-filter>
</activity>

2) ./android/build.gradle에 다음과 같이 추가한다

buildscript {
  dependencies {
  ...
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

3) ./android/app/build.gradle에 다음과 같이 추가한다.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- 이줄 !!

안드로이드는 이게 끝이다!!

3. ios setting

1) ./ios/projectName/AppDelegate.mm 에 다음과 같이 추가한다

#import "AppDelegate.h" //여기 다음줄에 아래 두줄 추가
#import <Firebase.h>
#import <RNFBDynamicLinksAppDelegateInterceptor.h>

같은 파일 didFinishLaunchingWithOptions 가 있는 함수에서 다음을 추가한다

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[FIRApp configure];
[RNFBDynamicLinksAppDelegateInterceptor sharedInstance];
...
}

위 코드를 수정하면

cd ios && pod install --repo-update

** 의존성 error가 나면 podfile에 require문 다음에 추가한다

pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true

2) xcode > info에서 제일 아래로 내리면 url types가 있는데 identifier와 url schemes에 bundle id 를 적어준다!

3) signing & capabilities 에서 associatied domains를 추가한다

applinks:내가 설정한 프리픽스

설정이 다끝나면

(내가 설정한 프리픽스)/apple-app-site-assciation 과 (내가 설정한 프리픽스)/.well-known/assetlinks.json에 접근할수있을것이다...(그래야함... )

그리고 새로 dev-client를 빌드하거나 expo run:(ios or android) 하면 거의 끝났다.

4. 링크 생성

import dynamicLinks from "@react-native-firebase/dynamic-links";

const generateLink = async () => {
    try {
      const link = await dynamicLinks().buildShortLink({
        link: `내가 설정한 프리픽스/설정한 서픽스/나머지 주소나 query params`,
        domainUriPrefix: `내가 설정한 프리픽스`,
        android: {
          packageName: "",
        },
        ios: { appStoreId: "", bundleId: "" },
      });
      return link;
    } catch (error) {
      console.log(error);
    }
  };

5. 링크 수신

가장 상위 파일에 사용한다.

import dynamicLinks from "@react-native-firebase/dynamic-links";

 useEffect(() => {
 //앱이 백그라운드에 없었을때 실행
    dynamicLinks().getInitialLink().then((link)=>{...});
  }, []);
  
  useEffect(() => {
  //앱이 백그라운드에 있을때 실행
    const subscribe = dynamicLinks().onLink((link)=>{...});

    return () => subscribe;
  }, []);

콜백 안에서 console.log(link) 해보면 {"minimumAppVersion": null, "url":buildShortLink에서 link에 넣은 값 , 등등의 값} 을 얻을 수 있는데 link.url에 접근해 파라미터나 나머지 주소를 얻으면 된다.

** ios의 경우 말했던대로 preview.page.link로 먼저 이동을 하는데 이 페이지는 buildShortLink에 전하는 객체 안에

social :{
	title :'',
	descriptionText: "",
    imageUrl: "",
}

를 추가하면 간단하게나마 꾸밀수있다.

*참고사이트

https://mrdevgeek.com/how-to-implement-deep-linking-in-react-native-with-firebase-dynamic-links/
https://firebase.google.com/docs/dynamic-links/link-previews?hl=ko
https://rnfirebase.io/dynamic-links/usage

뿡빵뽕

이전 포스트