真正 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 的網域,如下:
取得 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