[Flutter] Firebase Dynamic Link 만들기 + 수신하기

Firebase Dynamic Link를 플러터 앱에 사용해보겠습니다. 

 

[ 목표 ]

카톡 공유 > 초대 수락하기를 누르면 앱이 실행되고 특정 화면으로 이동시켜준다! (만약 앱이 안깔려있으면 스토어로 이동 + 사용자가 앱 설치하면 특정화면으로 이동)

 

 

 

 

TODO

- 카톡 메세지 템플릿의 '초대 수락하기 버튼'을 만들때 링크를 넣어주기 

- 저 링크를 앱에서 받을 수 있도록 하기 

 

 

[ 구현 큰그림 ]

 

 

 

[ firebase_dynamic_links 패키지 설치 ]

 

pub.dev/packages/firebase_dynamic_links 이 패키지를 설치해줍니다.

pubspec.yaml에 가서 추가해주고

 

 

 

 

flutter pub get 명령어를 해주면 끝-!

 

이제

Part1. 링크 수신하기

Part2. 링크 만들기

Part3. 링크 수신해서 원하는 화면으로 이동시키기

 

세 파트로 나눠서 해보겠습니다! 

 

---

Part1. 링크 수신하기 (Handle Received Dynamic Links)

[1] App Store ID & Team ID 등록되어있는 지 확인

 

파이어베이스 콘솔 > 앱 설정에 

AppStore ID와 Team ID가 등록되어있는지 확인해주세요

 

(앱스토어 아이디는 AppStoreConnect 사이트가서 앱 만들면 앱 ID가 자동으로 생성되는 데, 이걸 넣어주면 되고

팀ID는 Apple developer 사이트가면 알 수 있어요!)

 

 

 

 

다이나믹 링크는 해당 앱이 안깔려있으면 앱스토어 > 해당 앱페이지로 보내주기 때문에

App Store ID가 등록되어있어야합니다. 

 

팀 ID는 왜 필요한 건지 모르겠지만

안넣어주면 다이나믹 링크에 필요하다고 나오니까 넣어줍니다. 

 

 

 

 

 

 

[2]  URL Prefix 추가하기

 

파베 콘솔 > 내 앱 > 다이나믹 링크 에 들어가서 시작하기를 눌러줍니다.

저는 구글에서 제공하는 도메인을 선택해줬어요.

 

 

 

 

커스텀 도메인으로 설정해줄 수 도 있는데 이런 형식으로 설정해줘야한다고 하네요!

https://YOUR_SUBDOMAIN.page.link

 

(참고: 동적 링크의 커스텀 도메인 설정 )

 

 

[3] iOS 설정

 

- URL Type 추가

- Capability > Associated Domains 추가

- (옵션) info.plist > FirebaseDynamicLinksCustomDomains 추가 

 

를 해줘야합니다. (참고: 동적 링크 수신 - iOS)

 

 

1) URL Type 정의

 

iOS프로젝트를 열고 URL Type을 추가해줍니다.

 

식별자 필드는 고유한 값으로, 
URL 스키마 필드는 동적 링크에서 사용하는 기본 URL 스키마인 번들 식별자로 설정합니다.

 

라고 적혀있어서 

identifier 필드에는 Bundle Identifier

URL Schemes에는 기본 스키마 설정해주었습니다. 

 

 

 

 

 

2) Capability > Associated Domains 추가

 

아래 포맷으로 추가하라고 합니다!

 

 

 

 

추가해줬습니다. 

 

 

 

 

3) (옵션) info.plist > FirebaseDynamicLinksCustomDomains 추가 

 

구글에서 기본 제공해주는 도메인 말고 커스텀 도메인을 쓴 경우,

이 절차를 해주라고 합니다. 

 

 

https://pub.dev/packages/firebase_dynamic_links

 

 

저는 구글에서 제공해주는 것 썼기 때문에 안해줬어요!

 

[4] 안드로이드 설정

따로 없습니다 🎉 🎉

 

[5] 링크 받는 코드 추가

- 앱을 새로 런치한 링크를 알 수 있는 getInitialLink() 

- 앱이 active이거나 background 상태일때 들어온 링크를 알 수 있는 링크 콜백에 대한 리스너 onLink()

 

를 구현해줍니다.

 

예제 코드 참고에서 들어오는 링크를 프린트해줄게요!!

특정화면으로 이동하는 것은 Part 3에서 해볼게요.

 

class RootWidget extends StatefulWidget {
  @override
  _RootWidgetState createState() => _RootWidgetState();
}

class _RootWidgetState extends State<RootWidget> {

  @override
  void initState() {
    ...
    super.initState();
    initDynamicLinks();
  }

  void initDynamicLinks() async {
    FirebaseDynamicLinks.instance.onLink(
        onSuccess: (PendingDynamicLinkData dynamicLink) async {
          final Uri deepLink = dynamicLink?.link;
        
          print(deepLink);
          print(deepLink.path);
          
          if (deepLink != null) {
             // do something
          }
        },
        onError: (OnLinkErrorException e) async {
          print('onLinkError');
          print(e.message);
        }
    );

    final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
    final Uri deepLink = data?.link;

    print(deepLink);
    
    if (deepLink != null) {
       // do something
    }
  }

 

 

---

 

Part2. 링크 만들기 (Create Dynamic Links)

 

[1] 다이나믹 링크 만들기

 

동적 링크를 만드는 4가지 방법이 있습니다. 

 

https://firebase.google.com/docs/dynamic-links/create-links?hl=ko

 

 

저는 두번째 방법, 앱에서 만들어주게 해줄게요! 

문서의 코드처럼 작성해주면 됩니다. 

(각 파라미터가 어떤 의미인지는 iOS에서 동적링크 만들기 / 안드로이드에서 동적링크 만들기  를 보면 됩니다.)

 

 

https://pub.dev/packages/firebase_dynamic_links

 

 

저는 이렇게 만들어주었어요!

 

 

제가 사용한 것들 설명만 추가할게요~ (문서에서 복붙해옴)

 

<DynamicLinkComponents>

- uriPrefix: 아까 파베에 추가한 uriPrefix

- link: 앱에서 열리는 링크.

 

<DynamicLinkAndroidParameters>

- packageName

- minimumVersion: 링크를 열 수 있는 앱의 최소 버전 versionCode. 

(만약 앱이 설치되어있는데 minimumVersion보다 낮다면 앱을 안열고 플레이스토어로 이동시켜서 업데이트를 유도합니다.)

 

<DynamicLinkIOSParameters>

- bundleId

- minimumAppVersion: 링크를 열 수 있는 앱의 최소 버전 번호 

- appStoreID: 앱이 설치되지 않은 경우 사용자를 App Store로 보내는 데 사용되는 앱의 App Store ID.

 

 

만들어진 다이나믹 링크 출력해보면 

이렇게 나오고 

 

https://onionfamily.page.link/?amv=1&ibi=com.jinny.onionFamily&isi=1540106955&imv=1.0&apn=com.jinny.onion_family&link=https%3A%2F%2Fonionfamily.page.link%2Fjoin_family%3Fcode%3Dabcd1234

 

사파리를 열고 저 링크를 복붙해주면

이 화면이 나오는데 OPEN을 눌러주면 앱으로 이동합니다. (시뮬레이터에 앱이 깔려있음)

 

 

 

이때 앱으로 들어오는 링크를 출력해보면

https://onionfamily.page.link/join_family?code=abcd1234 

 

이렇게 나옵니다!

 

 

그리고 앱을 지우고 링크를 오픈하면 스토어로 잘이동합니다!

 

 

[2] 카카오 링크 템플릿에 다이나믹 링크 넣어주기

 

저의 목표는 이 템플릿에 다이나믹 링크를 넣는 것이였어요!! 템플릿쪽 작업도 해줍니다. 

 

 

 

 

우선 메세지나 초대 수락하기 버튼을 누르면 특정 링크를 열 수 있도록 하기 위해

카카오 디벨로퍼스 > Web > 사이트 도메인 추가를 해줍니다. (아까 파이어베이스 콘솔에 등록한 도메인 추가해주세요)

 

 

 

 

(카카오 디벨로퍼스에 등록한 도메인만 열어주게 되어있기 때문에 이거 안하면 메세지 or 버튼 눌러도 아무동작안합니다)

 

그 다음 템플렛에 다이나믹 링크를 넣어주는 코드를 작성해줍니다.

 

 

이제 템플릿을 눌러주면 다이나믹 링크로 모바일 웹이 열리게 되고 OPEN을 누르면 앱을 열게 됩니다. 

 

 

 

 

 

---

Part3. 링크 수신해서 원하는 화면으로 이동시키기

이제 저 링크가 들어오면 특정 화면으로 이동하는 코드를 작성해줄게요.

 

Part1 코드에서 _handleDynamicLink 메소드가 추가되었습니다. 

 

이미 가입된 사용자면 가족 연결 화면으로,

아직 가입안한 사용자면 회원가입 화면으로 이동시켜주었어요

 

 

 

회원가입한 사용자

 

 

 

회원가입 안한 사용자