[Bagian 2] Flutter Deep Linking — Android App Links: Menyiapkan Web Server untuk Validasi Kredensial Aplikasi

Halo Devs! Semoga masih semangat ya! Artikel ini adalah bagian kedua dari seri praktis implementasi Deep linking pada aplikasi Android menggunakan framework Flutter. Pastikan kamu sudah membaca artikel sebelumnya terlebih dahulu ya :)

Seri ini akan dibagi menjadi beberapa artikel mengingat kita harus menyiapkan beberapa hal sebelum benar-benar bisa mengimplementasikan Deep linking pada aplikasi Android kita:

[Bagian 1] Flutter Deep Linking — Android App Links: Menyiapkan Routing Aplikasi dengan Go Router
[Bagian 2] Flutter Deep Linking — Android App Links: Menyiapkan Web Server untuk Validasi Kredensial Aplikasi
[Bagian 3] Flutter Deep Linking — Android App Links: Mengintegrasikan & Menguji Deep Linking

Jika belum paham mengenai konsep Deep linking, silakan baca artikel pembukanya: “Implementasi Deep Linking (Android App Links) dengan Flutter untuk Meningkatkan User Experience”.

Mengapa Butuh Web Server?

Web server diperlukan untuk meng-host file Digital Asset Links JSON yang berfungsi memverifikasi kredensial aplikasi. Mekanisme ini mencegah pengguna diarahkan ke aplikasi berbahaya yang mungkin mengklaim URL yang sama.

Diagram arsitektur Deep Linking

Starter code web server tersedia di: https://github.com/rafiadipramana/express_deep_link_web_server_javascript

Setelah clone, jalankan npm install atau npm i untuk menginstall dependencies.

Struktur folder dari starter code

Implementasi pada artikel ini dibagi menjadi 4 TODO:

TODO 1: Menyiapkan File Digital Asset Links JSON

File assetlinks.json berfungsi sebagai tanda tangan digital untuk aplikasi Android. File ini memverifikasi identitas aplikasi dan memastikan pengguna diarahkan ke aplikasi yang benar ketika mengklik link.

Referensi: Official Android Guide

Struktur JSON

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example",
    "sha256_cert_fingerprints": ["14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5"]
  }
}]

Ada dua field yang perlu disesuaikan:

1. package_name

Ambil dari /android/app/build.gradle di bagian defaultConfig → applicationId:

defaultConfig {
    applicationId = "com.rafiadipramana.flutter_deep_link"
    minSdk = 23
    targetSdk = flutter.targetSdkVersion
    versionCode = flutter.versionCode
    versionName = flutter.versionName
}

Untuk contoh ini: package_name = "com.rafiadipramana.flutter_deep_link"

2. sha256_cert_fingerprints

Navigasikan ke direktori android lalu jalankan ./gradlew signingReport. Ambil nilai SHA-256:

...
MD5: 50:88:BE:64:79:9F:91:18:EC:A9:A7:97:11:23:B1:1D
SHA1: 47:73:F8:5E:E2:64:B2:7C:36:43:36:44:A5:45:24:4E:EE:F7:D2:9C
SHA-256: 14:B9:62:D9:79:81:F8:E1:5B:70:08:9A:9E:D5:4F:E2:F7:FE:95:27:20:D1:B4:D9:EC:1E:EE:3F:93:F7:5D:8F
...

Contoh assetlinks.json yang Sudah Dikustomisasi

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.rafiadipramana.flutter_deep_link",
      "sha256_cert_fingerprints": [
        "14:B9:62:D9:79:81:F8:E1:5B:70:08:9A:9E:D5:4F:E2:F7:FE:95:27:20:D1:B4:D9:EC:1E:EE:3F:93:F7:5D:8F"
      ]
    }
  }
]

TODO 2: Mengkonfigurasi Web Server dengan Express.js

Express.js digunakan untuk membuat web server yang meng-host file Digital Asset Links JSON. File ini akan diakses melalui URL: https://<domain>/.well-known/assetlinks.json sesuai panduan resmi Android.

// TODO 2: Configure the express server
import express from 'express';

// Create an express server instance
const app = express();

// '/' route to check if the server is running
app.get('/', (_, res) => {
    res.send('Deep Link Web Server is running');
});

// Start the server
app.listen(4000, () => {
    console.log(`Server is running on port 4000`);
});

Jalankan npm run dev dan akses http://localhost:4000 di browser untuk memverifikasi server berjalan.

Web server sudah berjalan secara lokal

TODO 3: Menambahkan Endpoint untuk Digital Asset Links JSON

Buat endpoint /.well-known/assetlinks.json untuk menyajikan file assetlinks.json.

// TODO 2: Configure the express server
import express from 'express';

// TODO 3: Pointing the server to the assetlinks.json file
import { join } from 'path';
import { readFileSync } from 'fs';

// Create an express server instance
const app = express();

// '/' route to check if the server is running
app.get('/', (_, res) => {
    res.send('Deep Link Web Server is running');
});

// '/.well-known/assetlinks.json' route to serve the assetlinks.json file
app.get('/.well-known/assetlinks.json', (_, res) => {
    try {
        const filePath = join(process.cwd(), 'assetlinks.json');
        const data = readFileSync(filePath, 'utf8');

        res.setHeader('Content-Type', 'application/json');
        return res.status(200).send(data);
    } catch (err) {
        console.error('Error reading assetlinks.json:', err);
        return res.status(500).json({
            error: 'Failed to read assetlinks.json file'
        });
    }
});

// Start the server
app.listen(4000, () => {
    console.log(`Server is running on port 4000`);
});

Akses http://localhost:4000/.well-known/assetlinks.json untuk memverifikasi endpoint menyajikan file JSON dengan benar.

Web server sudah bisa mengakses file assetlinks.json secara lokal

TODO 4: Deploy dengan Vercel

Vercel adalah platform yang menyederhanakan proses deployment web server ke internet.

Langkah 1: Buat vercel.json

{
    "version": 2,
    "builds": [
        {
        "src": "index.js",
        "use": "@vercel/node"
        }
    ],
    "routes": [
        {
        "src": "/(.*)",
        "dest": "index.js"
        }
    ]
}

File konfigurasi ini memberi tahu Vercel untuk menggunakan index.js sebagai entry point dan mengarahkan semua request ke sana.

Langkah 2: Install Vercel CLI

npm install -g vercel

Langkah 3: Deploy

vercel login
vercel

Proses deployment web server ke Vercel menggunakan Vercel CLI

Setelah deployment berhasil, Vercel menyediakan domain yang dapat diakses publik (contoh: https://express-deep-link-javascript.vercel.app/) di mana web server dan file assetlinks.json dapat diakses secara online.

Proyek Vercel hasil deployment web server

Akses endpoint publik untuk mengkonfirmasi web server dan assetlinks.json berfungsi dengan benar di internet.

Web server sudah berjalan secara publik di internet

Web server sudah bisa mengakses file assetlinks.json secara publik di internet

Sekarang aplikasi Flutter dan web server sudah terkonfigurasi untuk integrasi deep linking. Langkah selanjutnya adalah menggabungkan kedua komponen ini di bagian 3 dari seri ini. Silakan ikuti bagian demi bagian dari seri ini ya, terima kasih banyak sudah membaca sampai akhir!

Jika kamu tertarik, merasa kesulitan, atau hanya sekedar ingin terhubung. Boleh banget follow & kontak saya di akun berikut :)

LinkedIn: https://www.linkedin.com/in/rafiadipramana/
Instagram: https://www.instagram.com/rafiadipramana/
GitHub: https://github.com/rafiadipramana