Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

/

Google Apps Script 是個輕便的好物

之前要處理跨網域 AJAX 時,像是寫 LINE BotTelegram Bot,幾乎都是 放在 Google Cloud Platform(GCP)上 處理。

覺得有點笨重,因為單純處理 request 的部份,就得開一個 GCP 的專案有點浪費。

自從發現了 Google Apps Script(以下簡稱 GAS)後,覺得是個輕便的功能,可以拿來跨網域 AJAX,也因為跟 Firebase 都是 Google 旗下的產品,所以也能讀寫 Firebase。

而且,有 Google 帳號,進入到 Google Drvie 就可以直接新增,發布新版時也不像 GCP deploy 這麼久,一整個方便。

本篇紀錄一些常會用到的 GAS 功能,雖然在「用 Google Apps Script 接收 / 推播訊息」這篇中有寫到接 Firebase 功能的部份,但想獨立一篇出來,當做之後要使用 GAS 時的初始化。

GAS 免費額度表

GAS 有限定配額,超過一個額度就會收費,限額表在這:

ttps://developers.google.com/apps-script/guides/services/quotas

跨網域 AJAX 是屬於「URL Fetch calls」這項,一般帳號的免費額度是 20,000 / 天。

如果是一般小型專案,或是個人在玩些機器人功能,這額度也夠用了。

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


建立 Google Apps Script

進到 Google 雲端硬碟,按下 新增,在 更多 裡面選擇 Google Apps Script,就新增了一個 GAS 檔。

新增 -> 更多 -> Google Apps Script
新增 -> 更多 -> Google Apps Script

進到新增的 GAS 檔案,會看見初始頁面,專案名稱要修改,預設的 myFunction 可以刪掉:

GAS檔案初始畫面
GAS 檔案初始畫面

Google Apps Script AJAX

一般如果用前端 AJAX,會遇到跨網域而被禁止的問題,但如果是用 GAS 來做 GET、POST 就不會。

GAS 可以處理兩件事:GET、POST,就是一個 API 的使用。

被 GET、POST

當這個 GAS 被 GET、POST 時,function 如下:

// GET
function doGet() { /* 處理被GET的動作 */ }
// POST
function doPost(e) {
  // POST data
  var param = e.parameter;
  
  /* 處理被POST的動作 */
}

前端部份,就像一般要 AJAX 就行,這邊用 Axios。要注意 POST 的資料要轉成字串:

POST 請求

在 GAS 上主動發 POST 請求,很像前端在用 fetch API,在 GAS 上稱「UrlFetchApp」,程式碼如下:

var result = UrlFetchApp.fetch(request_url).getContentText();

result 就會是 POST 後回來的結果,會是字串,再用 JSON.parse 就可以轉成物件。


Google Apps Script 回傳資料

接到 GET、POST 後,發 POST 到別站的 API 拿回資料後,接下來就是要把資料回傳給前端,這邊紀錄回傳的兩種格式:String、JSON:

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

// 回傳字串
return ContentService.createTextOutput('hello world!');
// 回傳json,在createTextOutput裡要是字串
var result = JSON.stringify({
  name: 'August',
  gender: 'male'
});
return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

整合上述應用

整理一個案例:Client 把想跨網域的 API 網址寫進 data,發 POST 到 GAS,GAS 收到 POST 後,執行 POST 請求到 Client 端 data 裡的 URL,收到資料後回傳給 Client 端。

Client 端

GAS default.gs

實際測試後可以確實收到 console.log:

成功跨網域POST
成功跨網域 POST

發布 Google Apps Script

上面的程式碼,前端在 POST 的 URL,都是寫「GAS 發布後得到的網址」,這段寫如何發布 GAS。

按下導覽列上的 發布,再點 部署為網路應用程式

發布
發布

接下來的選項依序選擇:

  • 專案版本:新增
  • 將應用程式執行為:我
  • 具有應用程式存取權的使用者:任何人,甚至是匿名使用者

接著按下 部署,會出現需要授權的確認框,按下 核對權限,接著會出現 這個應用程式未經驗證 的新視窗:

這個應用程式未經驗證的視窗
這個應用程式未經驗證的視窗

這個 GAS 裡面的內容都是我們自己寫的,當然是可以信任的,按下 進階,再按下 前往「xxxx」允許 就部署成功,接著就會出現一段網址,那個網址就是上面程式碼裡面「GAS 發布後得到的網址」。

GAS的request url
GAS 的 request URL

Google Apps Script 加入 Firebase 功能

Google Apps Script 用的 Firebase,是 Realtime Database。

引用 Firebase App

GAS 的導覽列,點選「資源」 → 「程式庫」:

資源 -> 程式庫
資源 -> 程式庫

新增程式庫 的欄位,填入:

MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l

2021.03.08 更新:
有人留言說輸入上面那串找不到,查了一下後發現 FirebaseApp 的 ID 更新了,要改輸入這個:
1hguuh4Zx72XVC1Zldm_vTtcUUKUA6iBUOoGnJUWLfqDWx5WlOJHqYkrt

然後按下新增,就會看見出現了 FirebaseApp,版本選擇 Public release,按下 儲存

程式庫加入FirebaseApp
程式庫加入 FirebaseApp

Firebase Config

一直到以上,很像是 ES6 的 import,把 Firebase 的 function 給引用進來,接下來就是寫 Firebase 的 config。

firebaseUrl

進到 Firebase 後,點選 Project Overview 右邊的齒輪,再點 專案設定

點擊專案設定
點擊專案設定

進入到專案設定介面後,點選 服務帳戶,在 Admin SDK 設定程式碼片段 的地方,會看到程式碼裡有一個 databaseURL,把它的值存下來:

databaseURL
databaseURL

原本的值是這樣:

"https://xxxxxxxxxxxxx.firebaseio.com"

存下來的方式就是在 GAS 裡設成變數,要注意的是,原本的值最後沒有斜線,在存的時候要補上去,變這樣:

var firebaseUrl = 'https://xxxxxxxxxxxxx.firebaseio.com/';

Secret

點擊 資料庫密鑰,會看見密鑰被隱藏起來,滑鼠移過去後,會出現一個 顯示 按鈕,點擊後就可以看見密鑰:

firebase secret
Firebase Secret

一樣設一個變數把密鑰存下來:

var secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

config

有了 URL、Secret,最後就可以整理出 FirebaseApp 用的 config:

var secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var firebaseUrl = 'https://xxxxxxxxxxxxx.firebaseio.com/';
var base = FirebaseApp.getDatabaseByUrl(firebaseUrl, secret);

讀寫 Firebase

Firebase Realtime Database 總共有 4 種方法可以讀寫,在 GAS 如下:

官方說明文件:

https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase/tutorials/read-and-write-data-in-firebase-from-apps-script


Google Apps Script 跨網域 AJAX + Firebase 初始檔

本篇的原始檔整理了一份放在 GAS 上,歡迎取用:

https://script.google.com/d/14R0KQ1NLiz_iaNyRye06IEmepQLrMordKL-7TSu8YC2CD8sm5TIrlpWU/edit?usp=sharing

Summary
Google Apps Script 基本使用:跨網域 AJAX、接 Firebase
Article Name
Google Apps Script 基本使用:跨網域 AJAX、接 Firebase
Description
本篇大綱:Google Apps Script 是個輕便的好物、GAS 免費額度表、建立 Google Apps Script、Google Apps Script AJAX、Google Apps Script 回傳資料、加入 Firebase 功能、讀寫 Firebase。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

Google Others

Google Top Heavy 演算法

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

API

GitHub API:建立 Issue、Comment – GitHub App

Apps Script Google

用 Google Apps Script 取得 Google Sheets / Excel 資料

Google Maps

Google Maps API 學習筆記 – 3:用熱圖 / Heat map 製作全台 12 小時雨量分佈圖

Google Sheets

用 Google Sheets 紀錄表單資料

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

API

Plyr 播放器使用筆記:控制項、取值、事件、改樣式、外部平台影片

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

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

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

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

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

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

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

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