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

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 Sheet,主要是存每一筆縮網址
  • Google Apps Script,api key的部份不想用明碼,就用GAS來做簡易後端

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


註冊動態網址

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

這篇為了是專給Google Maps的網域來用,Augustus就另外建了一個「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

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

多行搞定

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

{
  "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 實作程式碼

這邊附上Augustus接動態網址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 Sheet上,方便以後查找。


實作的完整程式碼

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

原始碼整理後放到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
Publisher Logo

留言

avatar
  訂閱  
通知