▼圖 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）。
裡面有詳細敘述個個參數，我也會簡單解說。
我們準備要開始驗證的程序，接下來要取得 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。
如果使用 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 進行資料傳輸請求。
這部分我就不再多說明，相關操作請參考官方文件，應該不會有什麼困難，不過我還是附上範例。
以下範例：
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 內容，或是惡搞。
創作內容
【密技】使用 JavaScript 將 Google Spreadsheet 作為資料庫
電腦相關 (0)
