Запись данных в электронную таблицу без авторизации ReactJS - PullRequest
Новая
       18

Запись данных в электронную таблицу без авторизации ReactJS

0 голосов
/ 13 марта 2020

Я создаю компонент "оставьте свои данные, и мы вам перезвоним". Я хочу сохранить данные пользователя в электронную таблицу Google. Я не хочу, чтобы каждому пользователю приходилось входить в учетную запись Google.

Как мне сделать эту интеграцию?

У меня уже есть sheet_id, api_token, client_id et c ..

Я не могу найти руководство, которое работает для меня.

Большое спасибо! 

import React from "react";
import FormInput from "../FormInput/FormInput";
import {
  ButtonContainer,
  DetailsContainer,
  StaticDetailsContainer,
  FormContainer
} from "../Details/Details-styles";
import staticDetails from "../../assets/details-static.png";
import { usersTable } from "../../Firebase/Firebase";

const SHEET_ID = "1l7*****************************8nmS4gWjxE";
const API_TOKEN = "AIza**************************pM";
const CLIENT_ID =
  "852**********************************gleusercontent.com";
const SCOPE = "https://www.googleapis.com/auth/spreadsheets";
const API =
  "https://sheets.googleapis.com/v4/spreadsheets/1l7gZiQoCq8bUc9bODcw2Ij2fYj-a87B************/values:batchGet?ranges=Shee*********************KbqmRaqJpjH8ktEjUHJ_prpM";

class Details extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    email: "",
    phone: ""
  };

  handleSubmit = async event => {
    event.preventDefault();
    await usersTable.push().set(this.state);
    // add user to spreadsheet here.
    this.props.handleUIOnSubmit();
  };

  handleChange = event => {
    const { value, name } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <DetailsContainer>
        <StaticDetailsContainer src={staticDetails} />
        <FormContainer>
          <form onSubmit={this.handleSubmit}>
            <FormInput
              name="lastName"
              type={"text"}
              placeholder="שם משפחה"
              value={this.state.lastName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="firstName"
              type="text"
              placeholder={"שם פרטי"}
              value={this.state.firstName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="phone"
              type="phone"
              placeholder={"טלפון"}
              value={this.state.phone}
              handleChange={this.handleChange}
            />
            <FormInput
              name="email"
              type="email"
              placeholder={'דוא"ל'}
              value={this.state.email}
              handleChange={this.handleChange}
            />
            <ButtonContainer type="submit">תאם לי שיעור</ButtonContainer>
          </form>
        </FormContainer>
      </DetailsContainer>
    );
  }
}

export default Details;
...