Firebase Dynamic Links API 做一個自己的縮網址生成器 - Let's ...

真正Firebase 動態網址的應用方式 · 註冊動態網址 · 取得Web API Key · POST API. API URL · POST API 實作程式碼. Client 端部份 · 將產生的縮網址到Google ... 跳至主要內容FirebaseDynamicLinksAPI做一個自己的縮網址生成器2021-08-312020-03-04/Augustus本篇大綱真正Firebase動態網址的應用方式註冊動態網址取得WebAPIKeyPOSTAPIAPIURLdata、payloadPOSTAPI實作程式碼Client端部份用GAS部份將產生的縮網址到GoogleSheet上實作的完整程式碼真正Firebase動態網址的應用方式上一篇〈從後台建立縮網址〉算是縮網址的基本功能，就是用第三方的平台來建立縮網址，如果只是這樣，那Google在Firebase推出的動態網址就沒什麼特殊之處了。

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

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

本篇會實作出一個GoogleMap的短網址生成器，頁面在這：https://letswritetw.github.io/letswrite-dynamic-links-api/之所以會選擇用GoogleMap的縮網址，實在是因為Map出來的網址，用中文的部份分享出去時都漏漏長，既然要做一個縮網址生成器了，不如就做一個縮Map網址的。

本篇用到的工具有：FirebaseDynamicLinksAPI（文件1、文件2）UI的部份，用了Skeleton這套來做個簡易頁面JSframework選擇了Vue.js，但基本上原生JS就行了（對，就是懶）GoogleSheets，主要是存每一筆縮網址GoogleAppsScript，APIKey的部份不想用明碼，就用GAS來做簡易後端上面的列表，帶有連結的部份就是以前寫過的筆記文，以下實作就不多做解釋。

註冊動態網址這部份在上一篇的「Firebase上設置啟用DynamicLinks」就有寫到了。

這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝這篇為了是專給GoogleMaps的網域來用，Augustus就另外建了一個「mapshort.page.link」的網址。

在白名單的部份，也限制了只能生成GoogleMap的網域，如下：白名單限制在GoogleMap的網域取得WebAPIKey在POST到API取得縮網址時，必須帶上WebAPIKey。

然後，很感謝官方文件寫的不清不楚，也沒說這個Key到底是哪一個，花了點時間才確認找對了，取得Key的步驟如下：1進到Firebase後台，註冊了DynamicLinks的那個專案後，點選左側選單上面的齒輪圖，再點專案設定：點擊齒輪、專案設定2接著進到設定頁，會看見有一行開頭寫「網路API金鑰」，後面的值就是WebAPIKey了：取得金鑰金鑰要記下來，下一步POST時要帶進API的URL中。

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

APIURLURL的部份，官方文件是這樣寫的：這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=api_keyapi_key要替換成我們上一步取得的WebAPIKey。

data、payloadPOST到API時要附上data，但因為這邊寫POST是在GoogleAppsScript上寫的，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=這個縮網址要轉去的地方/&其它參數" }其它參數部份可參考文件：ManuallyconstructingaDynamicLinkURL因為一行搞定總覺得不好閱讀，所以實作這邊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碼，範例是這樣：SHORThttps://example.page.link/WXYZUNGUESSABLEhttps://example.page.link/UVWXYZuvwxyz12345POSTAPI實作程式碼這邊附上Augustus接動態網址API的程式碼。

Client端部份不建議直接在前端呼API，因為這樣子WebAPIKey會變成明碼讓人看光光，這邊偷懶簡單的用jQuery：console.log會看到以下結果：{ "shortLink":"https://mapshort.page.link/5NHCbbmfnTsnbDsQ7", "previewLink":"https://mapshort.page.link/5NHCbbmfnTsnbDsQ7?d=1" }shortLink，就是建立的縮網址。

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

用GAS部份呼API改由後端來寫，這是推薦的作法，這樣就不會讓WebAPIKey給人看光光了。

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

這邊附上寫在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" }將產生的縮網址到GoogleSheet上之所以要另存到GoogleSheet，是因為用API建立的縮網址，並不會出現在Firebase的後台，如果不另外存，會不知道有哪些縮網址被建立出了，之後如果要用AnalyticsAPI查成效，會不知道產生的縮網址有哪些。

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

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

原始碼整理後放到GitHub上：https://github.com/letswritetw/letswrite-dynamic-links-api收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印SummaryArticleNameFirebaseDynamicLinksAPI做一個自己的縮網址生成器Description本篇大綱：真正Firebase動態網址的應用方式。

註冊動態網址。

取得WebAPIKey。

POSTAPI。

APIurl。

data、payload。

POSTAPI實作程式碼。

Client端部份。

用GAS部份。

將產生的縮網址到GoogleSheet上。

實作的完整程式碼。

AugustusAugustusLet'sWriteLet'sWritehttps://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg隨選筆記文AnalyticsGoogleGoogleAnalytics加上AIAI,數據PWAPWA學習筆記-1：Cache、Workbox基本使用Cache,JavaScript,PWA,SW,WorkboxFront-End2種快速安裝、使用TailwindCSS的方式CLI,CSS,TailwindCSSVueNuxt.js引用FirebaseSDKCLI,Firebase,Nuxt,Plugin,SDKFirebaseGoogle用FirebaseAuthentication做一套簡易會員系統–電子郵件密碼Auth,Email,登入Front-End第100篇：起點、轉折、then()MediumFront-EndTestCafe學習筆記–1：自動化測試會員登入Async,Node.js,Notify,TestCafe,測試APIFront-EndWebSocket基本介紹及使用筆記AJAX,JavaScript,Node.js,WebSocketVue用Storybook做一個UI整理集CLI,Component,Storybook,UI,分類GoogleMapsGoogleMapsAPI學習筆記–5：抓目前位置、計算到各點距離API,Distance,Matrix,地點,經緯度,距離以下是留言，但關於留言的部份必需先讓你們知道：本站的文章都是Augustus因為覺得有趣，才會實作並整理成筆記文而後進行發表。

如果留言是希望把Demo改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，Sorry~除非那修改是Augustus也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。

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

😎另外，公開信箱是為了讓金流驗證用，因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。

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

訂閱通知通知新留言通知所有新留言LabelName*Email*LabelName*Email*0CommentsInlineFeedbacks看所有留言搜尋關鍵字:Translate简体中文繁體中文English日本語最新文章FirebaseRealtimeDatabase常用功能筆記FirebaseAuthentication第三方登入–GitHubFirebaseAuthentication第三方登入–Google、FB用JavaScript監聽頁面/頁籤被關閉的事件如何用GoogleSheets/Excel當作資料庫2種快速安裝、使用TailwindCSS的方式如何用NetlifyCMS製作電子報生成器幾個方便開發的ConsoleAPI應用大家都在看WebSocket基本介紹及使用筆記Vue.js3CompositionAPI基本學習筆記-1：Ref、Props、watch、生命週期Word、Excel合併列印功能使用筆記Google表單，提交後系統自動寄送回覆通知emailGoogle表單，輸入ID後自動帶入其它欄位資料OSM+Leaflet學習筆記1：建地圖、marker、事件、換圖層如何用GoogleSheets/Excel當作資料庫MacBook用隨身碟執行Windows10：WindowsToGo、WinToUSB請作者一杯咖啡？寫文章需要咖啡提神，回答問題需要時間及心力。

如果覺得本站文章對工作有幫助、技術有進步，或是問題有得到解答，歡迎請本站喝杯咖啡。

中杯60元、大杯90元，加碼特大杯120元。

你請的每一杯咖啡，對本站來說都是莫大鼓勵:)請喝咖啡（台灣）Buymeacoffee（Foreign）He**y小*瓜ki*******37A**yS**Y**C**R****_L**I**nM******C**uR***y曾*M**L**O近期留言「Augustus」在〈用LINEBotAPI建立LINE@圖文選單〉發佈留言「ting」在〈用LINEBotAPI建立LINE@圖文選單〉發佈留言「Vic」在〈Google表單，提交後系統自動寄送回覆通知email〉發佈留言「路人甲」在〈Instagram基本顯示API：抓取公開IG資料、相片、影片〉發佈留言「Mia」在〈2種快速安裝、使用TailwindCSS的方式〉發佈留言「胡丁丁」在〈Google表單，輸入ID後自動帶入其它欄位資料〉發佈留言「ans9323052」在〈用原生JavaScript做一個簡單的抽獎功能頁面〉發佈留言「tony」在〈VueTransitions製作簡單的Carousel/Slider/輪播功能〉發佈留言放個廣告賺點養主機的$$，謝謝Let’sWrite來訪人數位大大相挺，謝謝。

（如何製作來訪人數？）訂閱新文章通知直接加入Telegram的頻道，有最新文章時會收到廣播通知：DMCAProtection放個廣告賺點養主機的$$，謝謝Let'sWrite前端工程師Augustus的學習筆記—solvingproblems,insimpleways.APIFront-EndGoogleBotVuePWAWordPressFollowusFBTelegramGitHubIGTwitter網站地圖隱私權政策[email protected]（金流驗證用）請喝咖啡（台灣）Buymeacoffee（Foreign）wpDiscuzInsert傳送到電子郵件地址你的姓名你的電子郵件地址取消文章未送出─請檢查你的電子郵件地址！電子郵件地址檢查失敗，請再試一次抱歉，你的網誌無法透過電子郵件分享