试图让网站更新谷歌表格

Question

我正在尝试创建一个表单来更新项目在 REACTJS 中的 googlesheets，我遵循了本指南 https://medium.com/@mheavers/storing-form-data-from-a-website-in-google-spreadsheets-using-javascript-react-a15aeb9143cb

现在我面临一个问题，我收到以下错误 错误：请求缺少所需的身份验证凭据。预期的 OAuth 2 访问令牌、登录 cookie 或其他有效的身份验证凭据。见https://developers.google.com/identity/sign-in/web/devconsole-project。

我的代码：

import React,{useState,useEffect} from 'react'
import {Form,Text} from 'informed'
import {gapi} from 'gapi-script'
const Forms=()=>{

    const [SignInStatus, setSignInStatus] = useState("")

    const SPREADSHEETID= ***my spreadsheet id**
    const apiKey= ***my api key***
    const clientID=***my oauth id***
    const SCOPE=['https://www.googleapis.com/auth/spreadsheets']

    const initClient=()=>{
        console.log("got key")
        gapi.client.init({
            'apiKey': apiKey,
            'clientId':clientID,
            'scope': SCOPE,
            'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],

        }).then(()=>{
            gapi.auth2.getAuthInstance().isSignedIn.listen(SignInStatus)
            setSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get())
            
        })
    }
    const handleclientLoad=()=>{
        gapi.load('client:auth2',initClient)
    }
    useEffect(() => {
        handleclientLoad()
       
    }, [])
    const onFormSubmit=(submissionValues)=>{
        console.log(submissionValues)
        
        const params={
            spreadsheetId:SPREADSHEETID,
            clientId: clientID,
            range:'Sheet1',
            valueInputOption:'RAW',
            insetDataOption:'INSERT_ROWS'
        }
        const valueRangeBody={
            'majorDimension':'ROWS',
            'VALUES':[submissionValues]
        }

        let request=gapi.client.sheets.spreadsheets.values.append(params,valueRangeBody)
        request.then(function(response){
            console.log(response.result)
        },function (reason){
            console.log(reason.result.error)
            console.log("error: " + reason.result.error.message)
        })
    }
    return(
        <Form onSubmit={onFormSubmit}>
            <label>
                first name: 
                <Text field="name"/>
            </label>
            <button type="submit">Submit</button>
        </Form>

    )
}



export default Forms

Answer 1

这可能不是您想要的，但 forms.google.com 已经做到了。