-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.vue
134 lines (120 loc) · 3.26 KB
/
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<script setup>
import { ref, watchEffect } from "vue";
// 服務帳號 ID
const CLIENT_ID = "<服務帳號 ID>";
// API 金鑰
const API_KEY = "<API KEY>";
// Google Sheet ID
const SHEET_ID = "<Google Sheets ID>";
// Sheets 中要取得的資料範圍,下面為格式範例
const RANGE = "工作表1!A1:B5";
const DISCOVERY_DOC =
"https://sheets.googleapis.com/$discovery/rest?version=v4";
const SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";
// 判斷 gapi 是否載入
const gapiInited = ref(false);
// 判斷 gis 是否載入
const gisInited = ref(false);
// 驗證按鈕文字
const authorizeBtnText = ref("Authorize");
// 登出按鈕狀態
const isSignOutBtnShow = ref(false);
// 資料內容
const contentText = ref("");
const gapiLoaded = () => {
gapi.load("client", initializeGapiClient);
};
const gisLoaded = () => {
window.tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: SCOPES,
callback: "",
});
gisInited.value = true;
};
const initializeGapiClient = async () => {
await gapi.client.init({ apiKey: API_KEY, discoveryDocs: [DISCOVERY_DOC] });
gapiInited.value = true;
};
// 按下登入按鈕
const handleAuthClick = () => {
tokenClient.callback = async (resp) => {
if (resp.error !== undefined) {
throw resp;
}
isSignOutBtnShow.value = true;
authorizeBtnText.value = "Refresh";
await listData();
};
if (gapi.client.getToken() === null) {
tokenClient.requestAccessToken({ prompt: "consent" });
} else {
tokenClient.requestAccessToken({ prompt: "" });
}
};
// 按下登出按鈕
const handleSignoutClick = () => {
const token = gapi.client.getToken();
if (token !== null) {
google.accounts.oauth2.revoke(token.access_token);
gapi.client.setToken("");
contentText.value = "";
authorizeBtnText.value = "Authorize";
isSignOutBtnShow.value = false;
}
};
// 列出資料
const listData = async () => {
let response;
try {
response = await gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: SHEET_ID,
range: RANGE,
});
} catch (err) {
contentText.value = err.message;
return;
}
const range = response.result;
if (!range || !range.values || range.values.length == 0) {
contentText.value = "No values found.";
return;
}
const output = range.values.reduce((str, row) => `${str}\n${row[0]}`);
contentText.value = output;
};
watchEffect(() => {
if (window.gapi) {
gapiLoaded();
}
if (window.google) {
gisLoaded();
}
});
const loadScript = (src, onLoad) => {
const script = document.createElement("script");
script.async = true;
script.defer = true;
script.src = src;
script.onload = onLoad;
document.head.appendChild(script);
};
loadScript("https://apis.google.com/js/api.js", gapiLoaded);
loadScript("https://accounts.google.com/gsi/client", gisLoaded);
</script>
<template>
<div>
<p>Sheets API Quickstart</p>
<button v-if="gapiInited && gisInited" @click="handleAuthClick">
{{ authorizeBtnText }}
</button>
<button
v-if="gapiInited && gisInited"
v-show="isSignOutBtnShow"
@click="handleSignoutClick"
>
Sign Out
</button>
<pre id="content" style="white-space: pre-wrap">{{ contentText }}</pre>
</div>
</template>