3 |
38 |
39 |
40 |
75 |
76 |
--------------------------------------------------------------------------------
/src/store/modules/auth.js:
--------------------------------------------------------------------------------
1 | import { TEST_USER, getToken, setToken, removeToken, runApi } from '@/utils.js'
2 | import router from '@/router'
3 |
4 | const state = () => ({
5 | user: null,
6 | token: null,
7 | defaultUser: {
8 | id: 1,
9 | name: "Ashton Fei",
10 | gender: "Male",
11 | email: "yunjia.fei@gmail.com",
12 | role: "admin",
13 | status: "active",
14 | token: null,
15 | },
16 | default_token: 'ashton.fei@gmail.com.password',
17 | })
18 |
19 | const getters = {
20 | }
21 |
22 | const actions = {
23 | checkUserAuth: ({ commit, state }) => {
24 | const token = getToken();
25 | if (token === null || token === "null") return this.$router.push("/signin");
26 | try {
27 | runApi("validateToken", token)
28 | .then(({ success, message, data }) => {
29 | if (!success) return alert(message);
30 | this.$store.commit("user/setUser", data);
31 | })
32 | .catch(({ success, message }) => {
33 | console.err(message);
34 | })
35 | // google.script.run
36 | // .withSuccessHandler((response) => {
37 | // const { success, message, data } = JSON.parse(response);
38 | // if (!success) return alert(message);
39 | // this.$store.commit("user/setUser", data);
40 | // })
41 | // .withFailureHandler((err) => {
42 | // alert(err.message);
43 | // })
44 | // .validateToken(token);
45 | } catch (err) {
46 | this.$store.commit("user/setUser", TEST_USER);
47 | }
48 | },
49 | signin: ({ state, commit }, { email, password }) => {
50 | try {
51 | runApi("signin", { email, password })
52 | .then(({ success, message, data }) => {
53 | if (!success) return console.error(message)
54 | commit('setUser', data)
55 | router.push('/')
56 | })
57 | .catch(({ message }) => {
58 | console.error(message)
59 | })
60 | } catch (err) {
61 | if (`${email}.${password}` !== state.default_token) {
62 | alert('Your credentials are not current.')
63 | return
64 | }
65 | console.log("You are signed in.")
66 | commit('setUser', TEST_USER)
67 | router.push('/')
68 | }
69 | },
70 | signout: ({ commit }) => {
71 | commit('setUser', null)
72 | router.push('/signin')
73 | },
74 | }
75 |
76 | const mutations = {
77 | setUser: (state, data) => {
78 | state.user = data
79 | if (data == null) return removeToken()
80 | if (data.token) setToken(data.token)
81 | },
82 | }
83 |
84 | export default {
85 | namespaced: true,
86 | state,
87 | getters,
88 | actions,
89 | mutations,
90 | }
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 | 4 | Sign in 5 |
6 | 7 |
8 | 
9 | 
10 |
11 |
12 |
37 |
9 |
10 |
3 |
4 |
14 | Hello, {{ user.name }}, you are logged in as {{ user.role }}. Click to
16 | Sign out.
18 |
19 |
90 |
91 |
92 |
114 |
115 |
--------------------------------------------------------------------------------
/gas/api.js:
--------------------------------------------------------------------------------
1 | class JWT {
2 | constructor() { }
3 | /**
4 | * @param {object} payload - an json object
5 | */
6 | static createToken(payload) {
7 | const header = Utilities.base64EncodeWebSafe(JSON.stringify({ alg: "HS256", typ: "JWT" }))
8 | payload = Utilities.base64EncodeWebSafe(JSON.stringify(payload))
9 | const signature = Utilities.computeHmacSha256Signature(`${header}.${payload}`, SETTINGS.SECRECT)
10 | return `${header}.${payload}.${Utilities.base64EncodeWebSafe(signature)}`
11 | }
12 |
13 | /**
14 | * @param {string} token - header.payload.signature
15 | */
16 | static isValidToken(token) {
17 | const [header, payload, signature] = token.split(".")
18 | const validSignature = Utilities.base64EncodeWebSafe(Utilities.computeHmacSha256Signature(`${header}.${payload}`, SETTINGS.SECRECT))
19 | return signature === validSignature
20 | }
21 | }
22 |
23 | class Session {
24 | constructor() {
25 | }
26 |
27 | static generateSessionId() {
28 | return Utilities.base64Encode(Utilities.getUuid())
29 | }
30 |
31 | static getSession(sid) {
32 | const session = CacheService.getScriptCache().get(sid)
33 | if (session === null) return session
34 | return this.createSession(sid, session)
35 | }
36 |
37 | static createSession(key, session) {
38 | CacheService.getScriptCache().put(key, session, SETTINGS.SESSION_EXPRATION_IN_SECONDS)
39 | return session
40 | }
41 |
42 | static deleteSession(sid) {
43 | CacheService.getScriptCache().remove(sid)
44 | }
45 | }
46 |
47 |
48 | class SSDB {
49 | constructor() { }
50 | /**
51 | * @description get all items from a table
52 | * @param {sheet} table worksheet object
53 | * e.g. SpreadsheetApp.getActive().getSheetByName()
54 | * @returns an array of objects
55 | */
56 | static getAllItems(table) {
57 | let [keys, ...values] = table.getDataRange().getValues()
58 | keys = keys.map(v => v.toString().trim())
59 | return values.map(v => {
60 | const item = {}
61 | keys.forEach((key, i) => {
62 | if (key) item[key] = v[i]
63 | })
64 | return item
65 | })
66 | }
67 |
68 | /**
69 | * @description get the first match item by filters from a table
70 | * @param {sheet} table worksheet object
71 | * e.g. SpreadsheetApp.getActive().getSheetByName()
72 | *
73 | * @param {object} filters an object of key:value pairs
74 | * default is null (get all data without any filters)
75 | * e.g. {name: "Ashton Fei", role: ["admin", "staff"]}
76 | * note: value can be an array for multiple values in one column
77 | *
78 | * @returns a single item found or undefined
79 | */
80 | static getItemByFilters(table, filters) {
81 | const items = this.getAllItems(table)
82 | return items.find(item => {
83 | const results = Object.keys(filters).map(key => {
84 | const itemValue = item[key]
85 | const filterValue = filters[key]
86 | if (Array.isArray(filterValue)) return filterValue.includes(itemValue)
87 | return itemValue === filterValue
88 | })
89 | return !results.includes(false)
90 | })
91 | }
92 |
93 | /**
94 | * @description get items by filters from a table
95 | * @param {sheet} table worksheet object
96 | * e.g. SpreadsheetApp.getActive().getSheetByName()
97 | *
98 | * @param {object} filters an object of key:value pairs
99 | * default is null (get all data without any filters)
100 | * e.g. {name: "Ashton Fei", role: ["admin", "staff"]}
101 | * note: value can be an array for multiple values in one column
102 | *
103 | * @returns an array of items found or empty array
104 | */
105 | static getItemsByFilters(table, filters) {
106 | const items = this.getAllItems(table)
107 | return items.filter(item => {
108 | const results = Object.keys(filters).map(key => {
109 | const itemValue = item[key]
110 | const filterValue = filters[key]
111 | if (Array.isArray(filterValue)) return filterValue.includes(itemValue)
112 | return itemValue === filterValue
113 | })
114 | return !results.includes(false)
115 | })
116 | }
117 | }
118 |
119 | class API {
120 | constructor() {
121 | }
122 | /**
123 | * @param {string} name - name of the table(tab) in the database(spreadsheet)
124 | */
125 | static getTableByName(name) {
126 | let db
127 | const response = { success: true, message: `${name} is found in the database.`, table: null }
128 | try {
129 | db = SpreadsheetApp.openById(SETTINGS.SSDB_ID)
130 | } catch (e) {
131 | response.success = false
132 | response.message = `${e.message}`
133 | return response
134 | }
135 | const table = db.getSheetByName(name)
136 | if (!table) {
137 | response.success = false
138 | response.message = `${name} was not found in database.`
139 | } else {
140 | response.table = table
141 | }
142 | return response
143 | }
144 |
145 | /**
146 | * @param {string} tableName the name of table(tab) in the database(spreadsheet)
147 | * e.g. users
148 | * @param {object} filters an object of key:value pairs
149 | * default is null (get all data without any filters)
150 | * e.g. {name: "Ashton Fei", role: ["admin", "staff"]}
151 | * note: value can be an array for multiple values in one column
152 | * @returns an array of objects or empty array
153 | */
154 | static get(tableName, filters = null) {
155 | const response = {
156 | success: true,
157 | message: "Items have been retrieved from the database.",
158 | data: null,
159 | }
160 | const { success, message, table } = this.getTableByName(tableName)
161 | if (!table) return { ...response, success, message }
162 | if (!filters) return { ...response, data: SSDB.getAllItems(table) }
163 | return { ...response, data: SSDB.getItemsByFilters(table, filters) }
164 | }
165 |
166 | /**
167 | * @param {string} tableName the name of table(tab) in the database(spreadsheet)
168 | * e.g. users
169 | * @param {object} filters an object of key:value pairs
170 | * default is null (get all data without any filters)
171 | * e.g. {name: "Ashton Fei", role: ["admin", "staff"]}
172 | * note: value can be an array for multiple values in one column
173 | */
174 | static post(tableName, filters = []) {
175 | const { success, message, table } = this.getTableByName(tableName)
176 | if (!table) return { success, message }
177 | return {
178 | success,
179 | message: "Items have been posted from the database.",
180 | data: table.getDataRange().getValues()
181 | }
182 | }
183 |
184 | /**
185 | * @param {string} tableName the name of table(tab) in the database(spreadsheet)
186 | * e.g. users
187 | * @param {object} filters an object of key:value pairs
188 | * default is null (get all data without any filters)
189 | * e.g. {name: "Ashton Fei", role: ["admin", "staff"]}
190 | * note: value can be an array for multiple values in one column
191 | */
192 | static delete(tableName, filters = []) {
193 | const { success, message, table } = this.getTableByName(tableName)
194 | if (!table) return { success, message }
195 | return {
196 | success,
197 | message: "Items have been deleted from the database.",
198 | data: table.getDataRange().getValues()
199 | }
200 | }
201 | }
202 |
203 | class Auth {
204 | constructor() {
205 |
206 | }
207 |
208 | static hashPassword(password) {
209 | const signature = Utilities.computeHmacSha256Signature(password, SETTINGS.SECRECT)
210 | return Utilities.base64EncodeWebSafe(signature)
211 | }
212 |
213 | static validatePassword(password, correctHashPassword) {
214 | return this.hashPassword(password) === correctHashPassword
215 | }
216 |
217 | static validateToken(token) {
218 | return JWT.isValidToken(token) ? {
219 | success: true,
220 | message: "Token is valid.",
221 | data: JSON.parse(Utilities.newBlob(Utilities.base64DecodeWebSafe(token.split(".")[1])).getDataAsString()),
222 | token,
223 | } : {
224 | success: false,
225 | message: "Token is invalid.",
226 | data: null,
227 | token: null,
228 | }
229 | }
230 |
231 | static singin(email, password) {
232 | const response = {
233 | success: true,
234 | message: 'You are signed in successfully.',
235 | data: null
236 | }
237 |
238 | // get users by email address
239 | const { success, message, data } = API.get(SETTINGS.AUTH_TABLE_NAME, { email })
240 | if (!success) return { ...response, success, message }
241 |
242 | // if user is not found
243 | const user = data[0]
244 | if (!user) return { ...response, success: false, message: "Your credentials are not correct." }
245 |
246 | // if password is not valid
247 | const isPasswordValid = this.validatePassword(password, user.password)
248 | if (!isPasswordValid) return { ...response, success: false, message: "Your credentials are not correct." }
249 |
250 | user.token = JWT.createToken(user)
251 | return { ...response, data: user }
252 | }
253 |
254 | static signout(token) {
255 | return { success: true, message: "You have been signed out.", data: SETTINGS.ROOT_URL }
256 | }
257 | }
--------------------------------------------------------------------------------
4 |
5 | Home
6 |
7 |
11 | Users
12 |
13 |
14 | Hello, {{ user.name }}, you are logged in as {{ user.role }}. Click to
16 | Sign out.
18 |
19 |
20 |
21 |
22 |
23 |
21 |
22 |
24 |
67 | Apps Script
70 |
71 |
72 | Web Apps
77 |
78 |
80 | YouTube
81 |
82 |
83 | Twitter
84 |
85 |
86 | Github
87 |
88 |
89 | {{ msg }}
25 |Essential Links
26 |-
27 |
- 28 | Core Docs 29 | 30 |
- 31 | Forum 32 | 33 |
- 34 | Community Chat 35 | 36 |
- 37 | Twitter 38 | 39 |
- 41 | 42 | Docs for This Template 43 | 44 | 45 |
40 |
Ecosystem
47 |-
48 |
- 49 | vue-router 50 | 51 |
- 52 | vuex 53 | 54 |
- 55 | 56 | vue-loader 57 | 58 | 59 |
- 60 | 61 | awesome-vue 62 | 63 | 64 |