創作內容

13 GP

【密技】使用 JavaScript 將 Google Spreadsheet 作為資料庫

作者:我是月太 づ(・ω・)づ│2018-02-04 16:41:38│贊助:42│人氣:3981
補充:目前我是使用 Google Apps Script 作為介面串接,不是用這種做法了。
==========
前陣子在寫 JavaScript,需要把資料回傳,於是就開始想辦法找資料庫。
發現串 Google Spreadsheet 的 API,把 Spreadsheet 當作資料庫是可行的。
API 驗證方式有分使用 API 金鑰(API Key),與透過 OAuth 用戶端 ID(OAuth Client ID)。
API Key 主要就只有讀取的權限,並沒辦法寫入,而 OAuth 後可以進行寫入。

因此開始翻閱各種官方文件,結果搞了好幾天找不出怎麼驗證 OAuth。
網路上大多是讓使用者登入,然後存取使用者的帳號,但我需要的是存取我的帳號。
結果發現我並不該看 for JavaScript 的文件,該看的是其他的,參考如下:

如果網址內的內容可以理解,本文應該就可以不用看了。
主要的流程是
  1. https://console.developers.google.com 建立專案
  2. 啟用 Google Sheets 的 API
  3. 申請 OAuth 憑證
  4. 使用網址取得 access-type 為 offline 的回傳 code
  5. 使用 code 向 OAuth 伺服器 POST 請求,取得 access token 和 refresh token



▼圖 01:首先進入 https://console.developers.google.com,然後出現服務條款異動通知,就點是、接受就好。

▼圖 02:進到頁面後,請點選左上方選取專案。

▼圖 03:由於我們還沒建立專案,因此請建立專案

▼圖 04:這邊填入專案名稱即可,如果對ID有不滿意可以更改。

▼圖 05:接下來點擊專案名稱或是開啟按鈕進入專案。

▼圖 06:然後我們需要啟用我們需要的API,點左邊的資料庫,或是上方的啟用API和服務皆可。

▼圖 07:接下來選擇你要啟用的API,我只需要 Sheets 的,因此我選擇 Sheets。

▼圖 08:進入頁面後按啟用(要等一下),已經啟用過的就會顯示「管理」。

▼圖 09:需要的服務都啟用好了之後,我們就要建立憑證(也可以建立後再去啟用其他的),點左方的憑證,或是右上方的建立憑證。

▼圖 10:這個頁面請按取消,這個只是協助你選擇適合的方式。

▼圖 11:按取消後,請點上方的「OAuth 同意畫面」,然後選擇電子郵件,並輸入產品名稱,其他可以留空,然後按下儲存。

▼圖 12:接下來請回到憑證頁籤,點選建立憑證,然後選擇「OAuth 用戶端 ID」。

▼圖 13:建立用戶端 ID 的部分,請選擇「網路應用程式」,然後輸入名稱、來源與重新導向 URI。
來源的部分要填入你要從哪裡呼叫 JavaScript 來執行存取 Sheets 的網址,我的 JS 腳本是要在 https://forum.gamer.com.tw/B.php?bsn=* 下運作,因此我填入 https://forum.gamer.com.tw。
至於重新導向 URI,金鑰將會夾帶在這個網址內回傳。
例如我輸入的是 https://forum.gamer.com.tw/B.php?bsn=16800,到時候取得金鑰之後就會是
https://forum.gamer.com.tw/B.php?bsn=16800&code=***************
這部分即使填寫 https://abc.abc.abc,一個空的網址也無所謂,但一定要填寫。

▼圖 14:建立完成後,會有一個提示跟你說你的 ID 跟密鑰,這部分先不理它。

▼圖 15:然後你就會看見憑證中多了你剛才建立的名稱,這時候請點入那個憑證。

▼圖 16:這個頁面可以改變名稱,與新增或移除授權的來源與重定向 URI,不過請按下上面的「下載 JSON」。

▼圖 17:這個 JSON 中會包含許多這個專案的資訊,我們需要一些資料,像是你剛剛看見的用戶端 ID(client_id)、驗證伺服器位址(auth_uri)、交換金鑰伺服器位址(token_uri)、用戶端密鑰(client_secret),與重定向 URI(redirect_uris)。

接下來到上方所提及的 Google Identity Platform: https://developers.google.com/identity/protocols/OAuth2WebServer#creatingclient
裡面有詳細敘述個個參數,我也會簡單解說。
我們準備要開始驗證的程序,接下來要取得 code,然後再交換為 life-time(永久)的 access token 和 refresh token。

▼圖 18:圖中框起來的地方,是等一下要造訪的網址,請繼續往下看。

我們接下來要產生一個網址,授權帳戶,然後取得 code。
伺服器位址是 https://accounts.google.com/o/oauth2/v2/auth
接下來我們要加上參數,下列出各參數的說明。
參數 說明
client_id 必要參數。這個是 OAuth 取得的用戶端 ID
redirect_uri 必要參數。code 將會包含在網址內回傳回去,請注意網址必須完全符合。
scope 必要參數。這個是你要賦予的權限,請參考以下網址,找出你需要的權限:https://developers.google.com/identity/protocols/googlescopes
access_type 建議參數。我們要把這個參數設定為 offline,否則需要登入。
state 建議參數。
include_granted_scopes 選擇性。設定為 true 的話,當取得新的 access token 的時候,已經給過的 scopes 會預設被授權給新的 access token。
login_hint 選擇性。如果確定是誰要登入,可以指定 email,就不用選擇。
prompt 選擇性。是不是要讓使用者選擇帳號。

我們主要需要 client_id、redirect_uri、scope、access_type、response_type(沒有提到)。
所以主要網址長這樣:
https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fspreadsheets&access_type=offline&redirect_uri=https%3A%2F%2Fforum.gamer.com.tw%2FB.php%3Fbsn%3D16800&response_type=code&client_id=client_id
合併成一行之後就在瀏覽器打開這個網址,然後登入與授權。

▼圖 19:請注意提示的時候要選擇繼續。

▼圖 20:驗證完畢後,就會回到你一併送出的 redirect_uri,請把那一段 code 複製起來(不包含後方的#)。

取得 code 之後,回到剛才的文章,繼續看到 Step 5: Exchange authorization code for refresh and access tokens 的部分,我們現在要把 code 轉為 refresh token 跟 access token。
接下來要對伺服器使用 POST 指令,我這邊採用 Tampermonkey 做為示範。
如果使用 Tampermonkey,請注意上方的 @match 要有你的網站,才會運作。
需要使用到 jQuery,如果你的網頁沒有 jQuery,請記得引用 jQuery 的函式庫。

指令如下:
jQuery.ajax({
    type: "POST",
    url: "https://www.googleapis.com/oauth2/v4/token",
    contentType: "application/x-www-form-urlencoded;",
    data: 'code=你剛才網址上取得的code&'+
    'client_id=你的client_id.apps.googleusercontent.com&'+
    'client_secret=你的client_secret&'+
    'redirect_uri=你的redirect_uri&'+
    'grant_type=authorization_code',
    success: function(data) {
        console.log(data);
    }
});

這一段指令會送 POST 指令給 token 伺服器,並夾帶格式為 x-www-form-urlencoded 的資料。
資料內容有你的 code、client_id、client_secret、redirect_uri 和 grant_type。
grant_type 請勿變動,grant_type 因為我們是要取得 access token,所以是 authorization_code。
然後就會在 console 的部分顯示出來,再到 console 那邊去複製。

▼圖 21:範例 code。

▼圖 22:按 F12 開啟 console 後就可以看見回傳的 access_token 跟 refresh_token。

回傳回來的 access_token 跟 refresh_token 就是永久的 token 了,不需要再重新登入驗證。
接下來我們需要取得你要編輯的 spreadsheet 的 ID,請打開你要編輯的 spreadsheet。

▼圖 23:打開 spreadsheet 後,在網址的部分,那一串就是這個 sheet 的 ID,請複製下來。

然後我們在傳送請求給 sheet API 前,先用 access_token 跟 refresh_token 換到新的 access_token,然後再用那個 access_token 進行資料傳輸請求。
資料傳輸相關請求的指令,可以查看:https://developers.google.com/sheets/api/reference/rest/
這部分我就不再多說明,相關操作請參考官方文件,應該不會有什麼困難,不過我還是附上範例。

以下範例:
jQuery.ajax({
    type: "POST",
    url: "https://www.googleapis.com/oauth2/v4/token",
    contentType: "application/x-www-form-urlencoded;",
    data: 'refresh_token='+ your_refresh_token + '&'+
    'client_id='+ your_client_id + '&'+
    'client_secret='+ your_client_secret + '&'+
    'redirect_uri='+ your_redirect_uri + '&'+
    'grant_type=refresh_token',
    success: function(data) {
        console.log('success get by refresh_token: ', data);
        jQuery.ajax({
            type: "POST",
            contentType: "application/json;",
            url: 'https://sheets.googleapis.com/v4/spreadsheets/'+ your_spreadsheet_id + '/values/'+
            your_input_range + ':append?valueInputOption=USER_ENTERED&access_token=' + data.access_token,
            data: JSON.stringify({
                "range": your_input_range,
                "majorDimension": "ROWS",
                "values": [[your_input_value]],
            }),
            success: function(data, status, xhr) {
                console.log(getNowTime(), 'Responsed Data: ', data);
                console.log(getNowTime(), 'Responsed Status: ', status);
                console.log(getNowTime(), 'Responsed xhr: ', xhr);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(getNowTime(), 'Responsed jqXHR: ', jqXHR);
                console.log(getNowTime(), 'Responsed textStatus: ', textStatus);
                console.log(getNowTime(), 'Responsed errorThrown: ', errorThrown);
            }
        });
    }
});

▼圖 24:傳資料給 sheet 的範例。



大概就是這樣了,不過這個方法有很大的危險,畢竟 Javascript 是明碼,寫在 code 裡面大家都看的見,有心人士就可以拿你的 token 去用,然後更改你的其他 sheet 內容,或是惡搞。
所以我的做法是用新的帳號,我把 sheet 的編輯權限開給那個帳號,然後用那個帳號來編輯。
目前這個專案還沒做好,還沒發布,只是先把我找出來的方法發給有需要的人知道。

同時也感謝群組中的荻野前輩提供參考連結如下:


沒想到文章寫完就過了兩小時 ==
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=3877571
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:JavaScript|Spreadsheet|API|OAuth

留言共 1 篇留言

ブラック炎
原來可以這樣用啊![e30]

09-17 22:20

我是月太 づ(・ω・)づ
目前我是使用 Google Apps Script 作為介面串接,不是用這種做法了。
這種作法如果是自用的話那可以,但是如果是要公開的話那很危險 XD02-12 01:51
我要留言提醒:您尚未登入,請先登入再留言

13喜歡★moontai0724 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【腳本】巴哈半自動簽到(... 後一篇:【腳本】巴哈動漫電玩瘋題...

追蹤私訊

作品資料夾

a4520343貓貓們
最近試了新的粉紅條紋膝上襪,絕領超美超好看的唷~歡迎來我小屋看看呢:)看更多我要大聲說5小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】