我正在做一个项目，将以 HTML 表单收集的信息发送到 Google 电子表格。我找到了一个关于如何执行此操作的非常好的教程。这些是我正在使用的文件和脚本：
1。 HTML 文件
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Google Sheet.css">
</head>
<body>
<div class="container">
<form method="post" action="URL of the Web App" name="contact-form">
<h4>Contact Us</h4>
<input type="text" name="your-name" placeholder="Name">
<input type="text" name="your-number" placeholder="Number">
<input type="email" name="your-email" placeholder="Email">
<textarea name="message" rows="7" placeholder="Your Message"></textarea>
<input type="submit" value="Submit" id="submit">
</form>
</div>
</body>
<script src="Google Sheet.js"></script>
</html>
2。 JS文件
const scriptURL = 'URL of the Web App'
const form = document.forms['contact-form']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { redirect: 'follow', method: 'POST', body: new FormData(form)})
.then(response => alert("Thank you! Form is submitted" ))
.then(() => { window.location.reload(); })
.catch(error => console.error('Error!', error.message))
})
3. Google Apps 脚本中的脚本
const sheetName = ''
const scriptProp = PropertiesService.getScriptProperties()
function intialSetup () {
const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
const lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
const sheet = doc.getSheetByName(sheetName)
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
const nextRow = sheet.getLastRow() + 1
const newRow = headers.map(function(header) {
return header === 'Date' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
.setMimeType(ContentService.MimeType.JSON)
}
catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}
finally {
lock.releaseLock()
}
}
问题描述
如果我将应用程序部署为“谁有权访问”-->“任何人”，则一切正常。但我希望这个表格只能由我自己访问。
所以我将部署更改为“谁有权访问”-->“只有我”，并且脚本不起作用。
如果我删除 js 部分（处理错误并在成功时在屏幕上显示一个漂亮的窗口），我会再次工作。
所以我的猜测是我需要在获取中传递某种授权令牌。但我不知道如何或在哪里获得这个令牌。
您应该将 OAuth2 与 google apps 脚本结合使用
在 js 中实现 OAuth2 的示例
const token = ‘YOUR_OAUTH2_TOKEN’;
fetch(scriptURL, {
method: ‘POST’,
body: new FormData(form),
headers: {
‘Authorization’ : ‘Bearer’+ token
}
})
.then(response => alert (“submitted”))
.then(() => {window.location.reload();})
.catch(error => console.error(‘Error’, error.message)