Firebase Dynamic Links API 做一個自己的縮網址生成器

/

真正 Firebase 動態網址的應用方式

上一篇〈從後台建立縮網址〉算是縮網址的基本功能,就是用第三方的平台來建立縮網址,如果只是這樣,那 Google 在 Firebase 推出的動態網址就沒什麼特殊之處了。

這幾天看了用 API 的方式來建立縮網址後,才覺得這是它們跟其他短網址功能很不一樣的地方。

因為這就等於,我們可以自己 建立起屬於自己的縮網址生成器

本篇會實作出一個 Google Map 的短網址生成器,頁面在這:

https://letswritetw.github.io/letswrite-dynamic-links-api/

之所以會選擇用 Google Map 的縮網址,實在是因為 Map 出來的網址,用中文的部份分享出去時都漏漏長,既然要做一個縮網址生成器了,不如就做一個縮 Map 網址的。

本篇用到的工具有:

  • Firebase Dynamic Links API(文件 1文件 2
  • UI 的部份,用了 Skeleton 這套來做個簡易頁面
  • JS framework 選擇了 Vue.js,但基本上原生 JS 就行了(對,就是懶)
  • Google Sheets,主要是存每一筆縮網址
  • Google Apps Script,API Key 的部份不想用明碼,就用 GAS 來做簡易後端

上面的列表,帶有連結的部份就是以前寫過的筆記文,以下實作就不多做解釋。


註冊動態網址

這部份在上一篇的「Firebase上設置啟用Dynamic Links」就有寫到了。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

這篇為了是專給 Google Maps 的網域來用,August 就另外建了一個「mapshort.page.link」的網址。

在白名單的部份,也限制了只能生成 Google Map 的網域,如下:

白名單限制在Google Map的網域
白名單限制在 Google Map 的網域

取得 Web API Key

在 POST 到 API 取得縮網址時,必須帶上 Web API Key。

然後,很感謝官方文件寫的不清不楚,也沒說這個 Key 到底是哪一個,花了點時間才確認找對了,取得 Key 的步驟如下:

1 進到 Firebase 後台,註冊了 Dynamic Links 的那個專案後,點選左側選單上面的齒輪圖,再點專案設定:

點擊齒輪、專案設定
點擊齒輪、專案設定

2 接著進到設定頁,會看見有一行開頭寫「網路 API 金鑰」,後面的值就是 Web API Key 了:

取得金鑰
取得金鑰

金鑰要記下來,下一步 POST 時要帶進 API 的 URL 中。


POST API

這一步就是 POST 到 API,API 就會回傳縮網址回來。

API URL

URL 的部份,官方文件是這樣寫的:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=api_key

api_key 要替換成我們上一步取得的 Web API Key。

data、payload

POST 到 API 時要附上 data,但因為這邊寫 POST 是在 Google Apps Script 上寫的,data 的部份要改寫成 payload。

data 分成二種:一行搞定、多行搞定。

一行搞定

一行搞定的,範例是這樣:

{
   "longDynamicLink": "https://example.page.link/?link=https://www.example.com/&apn=com.example.android&ibi=com.example.ios"
}

翻譯後是這個意思:

{
   "longDynamicLink": "https://我們註冊的縮網址.page.link/?link=這個縮網址要轉去的地方/&其它參數"
}

其它參數部份可參考文件:Manually constructing a Dynamic Link URL

因為一行搞定總覺得不好閱讀,所以實作這邊 August 選擇用多行搞定的方式。

多行搞定

多行搞定就是把前一段一行的拆成好幾行來寫,基本範例是這樣:

{
  "dynamicLinkInfo": {
    "domainUriPrefix": "https://example.page.link",
    "link": "https://www.example.com/",
    "androidInfo": {
      "androidPackageName": "com.example.android"
    },
    "iosInfo": {
      "iosBundleId": "com.example.ios"
    }
  }
}

domainUriPrefix:填我們註冊的縮網址。

link:填這個縮網址要轉去的地方。

androidInfo、iosInfo、analyticsInfo、socialMetaTagInfo,這幾個如果有看過上一篇用後台建立縮網址的話,就會覺得很眼熟,對,就是把原本後台的設定改成參數傳出去,所以相對應就是指這些設定:

androidInfo:定義 Android 的連結行為

iosInfo:定義 iOS 的連結行為

analyticsInfo:廣告活動追蹤

socialMetaTagInfo:社交標記

suffix:一行、多行搞定都有的參數

不論是一行搞定,或是多行搞定,都有一個共同的參數可以寫,就是 suffix。

suffix 是這樣子:

{
   "suffix": {
     "option": "SHORT" or "UNGUESSABLE"
   }
}

suffix.option 的值有兩個:SHORT、UNGUESSABLE。沒填的話預設是 UNGUESSABLE。

這兩個差在縮網址的長度,SHORT 是 4 碼,UNGUESSABLE 是 17 碼,範例是這樣:

SHORT

https://example.page.link/WXYZ

UNGUESSABLE

https://example.page.link/UVWXYZuvwxyz12345

POST API 實作程式碼

這邊附上 August 接動態網址 API 的程式碼。

Client 端部份

不建議直接在前端呼 API,因為這樣子 Web API Key 會變成明碼讓人看光光,這邊偷懶簡單的用 jQuery:

console.log 會看到以下結果:

{
  "shortLink": "https://mapshort.page.link/5NHCbbmfnTsnbDsQ7",
  "previewLink": "https://mapshort.page.link/5NHCbbmfnTsnbDsQ7?d=1"
}

shortLink,就是建立的縮網址。

previewLink,就是後台建立步驟時的「連結詳細資料」。

用 GAS 部份

呼 API 改由後端來寫,這是推薦的作法,這樣就不會讓 Web API Key 給人看光光了。

有 Google 帳號就可以直接使用 Google Apps Script,那當然如果後端很熟的朋友們也可以直接用後端語言來寫。

這邊附上寫在 GAS 的程式碼:

這邊寫的是,把想要變成縮網址的原本網址寫在「maps」這個參數裡,因此當這個 GAS 檔部署為網路應用程式後,POST 給產出的網址就寫這樣就行:

$.post('GAS發佈後產生的網址', { maps: '想要變成縮網址的網址' }, data => console.log(data))

收到的回傳資料一樣會長這樣:

{
  "shortLink": "https://mapshort.page.link/5NHCbbmfnTsnbDsQ7",
  "previewLink": "https://mapshort.page.link/5NHCbbmfnTsnbDsQ7?d=1"
}

將產生的縮網址到 Google Sheet 上

之所以要另存到 Google Sheet,是因為用 API 建立的縮網址,並不會出現在 Firebase 的後台,如果不另外存,會不知道有哪些縮網址被建立出了,之後如果要用 Analytics API 查成效,會不知道產生的縮網址有哪些。

這邊主要是用〈客製 Google 表單〉這篇的作法來存,在收到 GAS 回傳的資料後,就把原網址、縮網址都存到 Google Sheets 上,方便以後查找。


實作的完整程式碼

GAS 的程式碼上面的段落有寫出了,這邊附上的是前端頁面的部份,包含整個頁面的 HTML、JavaScript 中按下送出取回縮網址後,再存到 Google Sheets 的部份。

原始碼整理後放到 GitHub 上:

https://github.com/letswritetw/letswrite-dynamic-links-api

Summary
Firebase Dynamic Links API 做一個自己的縮網址生成器
Article Name
Firebase Dynamic Links API 做一個自己的縮網址生成器
Description
本篇大綱:真正Firebase動態網址的應用方式。註冊動態網址。取得Web API Key。POST API。API url。data、payload。POST API 實作程式碼。Client端部份。用GAS部份。將產生的縮網址到Google Sheet上。實作的完整程式碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

Nuxt.js 引用 Firebase SDK

PWA

PWA 學習筆記 – 3:Workbox 參數

Vue

用 VuePress 製作說明文件頁面 – 6:部署

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

WordPress

WordPress 好用的會員相關外掛:登入安全性、會員系統

Vue

用 Vue CLI 3 + Vuetify 製作說明頁面

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:上篇 – 前置作業

Google Others

Google Optimize A/B Testing 使用筆記

Front-End Vue

用 Vue.js 製作圖片版 EDM 生成器

Front-End

Promise、Async、Await 基本使用筆記

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。