DyLyを使ったDeep Linkの作成方法

⏱️約6分
シェア:

DyLyは、URLを短縮し、Deep Linkを簡単に作成できるサービスです。 この記事では、DyLyを使用してDeep Linkを効率的に作成する方法について説明します。

Deep Linkとは

Deep Linkとはlinkにアクセスすることでブラウザではなくアプリを直接開く仕組みです。 またアプリがインストールされていない場合にはアプリストアに誘導し、インストール後に指定したページを開くこともできます。

AppleはUniversal Linksを使うことで「ブラウザからアプリへ途切れない移行」を公式にサポートしており、GoogleはAndroid App Linksで同様の体験を提供しています。AppleのUniversal LinksガイドGoogleのAndroid App Linksドキュメントにも記載されているように、Deep Linkはユーザー体験の改善だけではなく、セキュリティやコンバージョン率向上にも寄与します。

ユースケース

Deep Linkの活用方法は色々あります。

動画等のコンテンツへの直接リンク

SNS等でリンクを共有し、直接特定のコンテンツへ誘導できます。webでは当たり前ですがDeep Linkを使えばモバイルアプリでもアプリ内のコンテンツを直接開くことができます。 リンクに特定のクエリパラメータなどを付けておき、どの経路からアクセスしてきたか、等を集計するような使い方もできます。

招待リンク

アプリ内のグループ等に誰かを招待するためにDeep Linkを使います。 招待された人がリンクをクリックすると、アプリが開いて招待プロセスが開始されたり、アプリをインストールしていない場合はアプリストアに誘導し、インストール後に招待プロセスを再開させたりできます。

リダイレクト

OAuth等のリダイレクト先にアプリを指定する場合、カスタムスキーマ(myapp://など)を使う方式がありますが、これは情報を横取りされる可能性があります。代わりにDeep Linkを使ってアプリでリダイレクトを受け取る事ができます。

実践

では具体的にDeep Linkを実装する方法を解説します。 Deep Linkを作成するサービスは色々ありますが、ここではDyLyを使います。

メタデータの作成

ドメインとアプリケーションの紐付けが必要です。 詳細はApple公式ドキュメントGoogle公式ドキュメントに譲りますが、要はドメインの所有権と、アプリケーションとの関連付けを確認するためのエンドポイントをweb上にホストすることで、AppleやGoogle側が確認可能になるというものです。

決まったフォーマットのjsonを返すようにすれば良いだけなので、ご自身でS3等を使ってホストすることでも実現可能ですが、DyLyではこれを簡単に実装する機能も提供しています。

DyLyではjson linkというものを作成できます。文字通りリンク先で指定したjsonを返す事ができます。API経由で次のようにリクエストを行います。

bash
1curl -X POST "https://dyly-api.lilacwells.com/url/api/v1/links" \
2 -H "Authorization: Basic ${YOUR_CREDENTIALS}" \
3 -H "Content-Type: application/json" \
4 -d '{
5 "type": "json",
6 "projectId": "your-project-id",
7 "path": ".well-known/apple-app-site-association",
8 "rawJson": {
9 "applinks": {
10 "apps": [],
11 "details": [
12 {
13 "appIDs": ["TEAM123.com.example.app"],
14 "paths": [
15 "NOT /_/*",
16 "NOT /deferred-params",
17 "/*"
18 ]
19 }
20 ]
21 }
22 }
23 }'

アプリ側の設定

今度はアプリ側の設定をしていきます。これは各OSの手順に沿って実施してください。

iOS

XcodeのSigning & CapabilitiesでAssociated Domainsを追加し、applinks:example.comのようにドメインを登録します。

Android

AndroidManifest.xml<intent-filter android:autoVerify="true">を追加し、android:autoVerifyでドメインを検証します。

ブラウザ経由でアクセスされた場合は、リンクの設定で任意のURLにリダイレクトできます。

linkの作成

最後に、DyLyでlinkを作成します。 以下のようにtypedeepにすることでDeep Linkを作成できます。

bash
1curl -X POST "https://dyly-api.lilacwells.com/url/api/v1/links" \
2 -H "Authorization: Basic ${YOUR_CREDENTIALS}" \
3 -H "Content-Type: application/json" \
4 -d '{
5 "type": "deep",
6 "projectId": "your-project-id",
7 "path": "groups/awesome-group",
8 "destinationUrl": "https://apps.apple.com/app/yourapp/id123456",
9 "jwtClaims": {
10 "invitationId": "inv-789xyz",
11 "invitedBy": "user-123",
12 "groupId": "awesome-group",
13 "groupName": "Awesome Group",
14 "permissions": "member",
15 "timestamp": 1735894404
16 },
17 "jwtExpiresIn": 300,
18 "expiresIn": 2592000,
19 "keyProtected": false,
20 "oneTime": false
21 }'

jwtClaimsに入れた値はJWTに含まれるため、取り扱いに注意してください。

Deep Linkを作成すると、クエリパラメータにjwtが付いたリンクが生成されます。

アプリケーションでリンクを受け取った後の処理

先ほど作ったリンクをクリックするとアプリケーションでリンクを受け取ることができます。 リンクを受け取った後に以下の処理が必要です。

jwtの検証

リンクが本当にDyLyで発行された正規のものなのか?を検証する必要があります。

その前に軽くjwtについて説明します。 jwtは雑に言うと署名付きのjsonです。 署名を検証することで発行元の確認と中身が改ざんされていないことを担保できます。

リンクの場合、誰でもリンク自体は作成可能です。そのような正規ではないリンクを見分けるために、正規のリンクはDyLyの秘密鍵で署名がされており、利用アプリはその署名を検証することで本物のリンクであることと内部のパラメータが改ざんされていないことを確認できます。

DyLyではこの仕組みをjwtという一般的な技術で実現することで、既存のjwtライブラリを使って署名の検証ができるようにしています。

このように、リンクを受け取ったアプリケーションはまずjwtの検証を行う必要があります。

パラメータの確認

検証の結果、本物のリンクであることが確認されたら、中身のパラメータを取り出して所望の処理を実施します。

例えば、招待リンクであれば、招待先のグループID等を取り出します。

注意しなければならないのは、jwtは署名がついていますが、中身の情報が暗号化されているわけではない、ということです(暗号化されたjwtもあります)。

ですからjwtの中身自体は誰でも見ることができます。したがってjwt内のパラメータには個人情報などのセンシティブな情報は書かないようにしましょう。 招待リンクの例であれば、招待者のメールアドレスなどは入れてはいけません。グループIDなどの識別子のみを入れて、詳しい情報はサーバー側で保持するのが安全です。

Deferred Deep Link

アプリがインストールされていない状態でリンクをクリックすると、アプリストアにリダイレクトされ、インストール後にDeep Linkで表示したいページを表示できます。 これをDeferred Deep Linkといいます。 DyLyでもこの仕組みを実装できます。

まずアプリがインストールされていないモバイル端末でリンクがクリックされます。アプリがインストールされていないのでリンクはブラウザで実行され、DyLyのサーバーにアクセスします。 DyLyはその端末のIPアドレスやOS情報などを記憶し、アプリストアへリダイレクトします。

アプリケーションは、インストール後の初回起動時に、該当端末から事前にアクセスがあったかどうかをDyLyに問い合わせます。 DyLyはリクエストのIPアドレスやOS等の情報から、インストール前のアクセス有無を確認し、アクセスがあった場合は、アプリケーションに対して対象のDeep Linkを返却します。

こうしてアプリケーションはインストール後の初回起動時に、事前にクリックされたDeep Linkの情報を受け取ることができます。

より詳細な説明はDyLyの公式ドキュメントを確認してください。

まとめ

以上のようにDyLyを使ってDeep Linkを簡単に実現することができます。次回はより具体的に招待リンク等を作る方法を説明していきます。

参考文献

シェア:

関連記事

FlutterのCI/CD - Android編
Guides

FlutterのCI/CD - Android編

FlutterによるAndroidアプリのCI/CD pipeline構築方法を説明します。GitHub Actionsを使用し、fastlaneは使いません。

mark241
FlutterのLocalization
Guides

FlutterのLocalization

FlutterでARBファイルを使ったLocalization対応方法を解説します。Flutter 2.0.1で動作確認しています。

mark241