Google sheet v4 Api

Hsuan
Jul 30, 2020

--

剛好需要用到,研究了一下Google API文件,想說紀錄一下,之後要查起來也比較容易。

Step 1.

先至後台建立專案,然後紅色部分是當你可能只要讀取,不需要修改時,可以選擇紅色的建立及可,若是需要修改到google sheet才需要OAuth。

等等Step 2先說單純讀取的部分。

Step 2.

HTTP request

GET https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}?key={apiKey}* 記得把共享打開。
  1. spreadsheetId — 紅色框框處
  2. range — 藍色框框範圍的話則是 A2:C5,以此類推。
  3. apiKey — 剛剛API金鑰產生的key(圖一第一欄被我畫黑線的地方)
☝🏻拿回的資料格式是這樣。

如果只要讀取,那下面就可以不用繼續囉。

Step 3.

建立OAuth用戶端,第一個是授權的位置,第二個是當你使用google登入後,要導到的url。

設定就到這裡就可以囉,其他有需要可以自己再去看看。

Step 4.

在程式碼裡取得OAuth。官方文件,我選用的是OAuth 2.0 Endpoints,下面的程式碼可以直接從官方文件複製。

  1. 橘色部分就是至後台OAuth 2.0 用戶端 ID,複製用戶端編號。
  2. 綠色就是在Step3中你要導向的URL。
  3. 藍色則是你要授權的API。我是選擇spreadsheets這個
scope的部分應該還有其他選擇,光是google sheet v4就有5種了,有需要都可以去試試。下面是可以試試看的列表,也可以去玩玩看。
https://developers.google.com/oauthplayground/
react

Step 5.

登入後導頁的狀態,如下圖顯示,紅色的就是當初設定的redirect_uri,後面則是google OAuth帶回來的相關資訊。

處理後面那段hash,將access_token拿出來設定進,axios的header authorization就可以去更改google sheet裡面的資料。

Step 6.

到google sheet API的網站找需要用到的API即可。

HTTP request

PUT
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}
* 一樣記得要共享。

request body能帶的內容如下圖:

range如果帶B4,然後request body帶下方這塊,那就可以在表單裡看到B4這格變為17。
{
"values": [
[
17
]
]
}

其實不複雜,蠻簡單的,只是剛開始在寫一直沒發現它把token帶在url,一直卡在那找token。

Hsuan (buymeacoffee.com)

--

--

Hsuan

想寫就寫,給自己一個記錄的地方,還在持續學習的前端工程師。