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

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

跨網域AJA是屬於「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 content = JSON.parse(e.postData.contents);
  
  /* 處理被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: 'Augustus',
  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

然後按下新增,就會看見出現了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
Publisher Logo

2 Replies to “Google Apps Script 基本使用:跨網域AJAX、接Firebase”

留言