Как дописывать в гугл таблицу значения при сабмите формы с помощью developers.google.com/sheets/api/?

Question

[MeJIBuH]

Человечек - он же пользователь - заходит на сайт, вводит в нужную формочку информацию? и эта информация должна записаться в google sheet (таблицу/лист). Это нужно делать от лица одного человека, скажем, меня. Без каких-либо действий со стороны клиента, заходящего на сайт.

А что предлагает Google Sheets API? Обновлять эту самую таблицу от лица этого пользователя, то есть появляется всплывающее окно, которое запрашивает разрешение на вход в данный проект, и, в принципе, проверяет (вроде бы), авторизирован ли пользователь.

Скорее всего я не до конца разобрался с API, либо проглядел что-то.

Что я делаю не так? Помогите решить этот ребус!

Мой код, в принципе, соответствует коду-примеру с сайта Google Sheets API за исключением кнопок и проверок на авторизовацию:

<script type="text/javascript">
    // Client ID and API key from the Developer Console
    let CLIENT_ID = 'CLIENT_ID';
    let API_KEY = 'API_KEY';

    // Array of API discovery doc URLs for APIs used by the quickstart
    let DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];

    // Authorization scopes required by the API; multiple scopes can be
    // included, separated by spaces.
    let SCOPES = "https://www.googleapis.com/auth/spreadsheets";

    /**
     *  On load, called to load the auth2 library and API client library.
     */
    function handleClientLoad() {
        gapi.load('client:auth2', initClient);
    }

    /**
     *  Initializes the API client library and sets up sign-in state
     *  listeners.
     */
    function initClient() {
        gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
        }).then(function () {
            console.log('Connect!');
        }, function(error) {
            console.log(JSON.stringify(error, null, 2));
        });
    }

    function handleAppendButton(data) {
        let params = {
            spreadsheetId: 'spreadsheetId',  // TODO: Update placeholder value.
            range: 'Data!A:C',  // TODO: Update placeholder value.
            valueInputOption: 'USER_ENTERED',  // TODO: Update placeholder value.
        };

        let valueRangeBody = {
            values: [data]
        };

        let request = gapi.client.sheets.spreadsheets.values.append(params, valueRangeBody);

        request.then(function(response) {
            console.log(response);
        }, function(reason) {
            console.log('error: ' + reason.result.error.message);
        });
    }

    /**
     *  Called when the signed in status changes, to update the UI
     *  appropriately. After a sign-in, the API is called.
     */
    function updateSigninStatus(isSignedIn) {
        if (!isSignedIn) {
            gapi.auth2.getAuthInstance().signIn();
        }
    }

    window.onload = function () {
        $('#form_submit').on('click', (e) => {
            e.preventDefault();
            let name = $('input[name=name]').val();
            let tel = $('input[name=tel]').val();
            let product = $('input[name=product]').val();

            $.ajax({
                url: `/thank-you.php?name=${name}&tel=${tel}&product=${product}`,
                method: 'GET',
                dataType: 'json',
                success: function(json) {
                    handleAppendButton([name, tel, product]);
                }
            })
        });
    }
</script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

Answer 1

[Alexander Ivanov]

Чтобы воспользоваться такой возможностью, в целях безопасности, вам нужно использовать промежуточный сервер, который будет авторизироваться за вас. Это может быть минимальный облачный сервер, или облачная функция, или опубликованное веб-приложение на Google Apps Script.