错误400：使用http：// localhost：3000时redirect_uri_mismatch

如何解决错误400：使用http：// localhost：3000时redirect_uri_mismatch

在尝试仅使用简单NPM时，我收到错误400：redirect_uri_mismatch错误，开始在http：// localhost：3000 /中加载我的React Web应用程序。对于OAuth 2.0部分中关于授权重定向URI和授权Java脚本来源的内容，我感到非常困惑，不确定是否正确输入这些内容甚至可以解决问题。我相信我已使用API密钥正确输入了所有代码。我要做的就是创建一个任务列表应用程序，该程序可让您通过按一下按钮将任务添加到我的Google日历中。这是我的代码：

import React,{ useState,useEffect } from 'react';
import './App.css';
import Form from './Components/Form';
import TaskList from './Components/TaskList';

function App() {
  const [inputText,setInputText] = useState("");
  const [tasks,setTasks] = useState([]);
  const [status,setStatus] = useState('all');
  const [filteredTasks,setFilteredTasks] = useState([]);

  // Google Calendar API
  var gapi = window.gapi
  var CLIENT_ID = ""; // Hidden for privacy
  var API_KEY = ""; // Hidden for privacy
  var disCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
  var ScopES = "https://www.googleapis.com/auth/calendar.readonly";
  //
  
  useEffect(() => {
    getLocalTasks()
  },[]);
  useEffect(() => {
    const filterHandler = () => {
      switch(status) {
        case 'completed':
          setFilteredTasks(tasks.filter((task) => task.completed === true));
          break;
        case 'uncompleted':
          setFilteredTasks(tasks.filter((task) => task.completed === false));
          break;
          
        default:
          setFilteredTasks(tasks);
          break;
      }
    };

    filterHandler();
    saveLocalTasks();
  },[tasks,status]);


  const handleClick = () => {
    gapi.load('client:auth2',() => {
      console.log('Loaded Client')

      gapi.client.init({
        apiKey: API_KEY,clientId: CLIENT_ID,discoveryDocs: disCOVERY_DOCS,scope: ScopES,})

      gapi.client.load('calendar','v3',() => console.log('Boom!'))

      gapi.auth2.getAuthInstance().signIn()
      .then(() => {
        
        var event = {
          'summary': 'Awesome Event!','location': '800 Howard St.,San Francisco,CA 94103','description': 'Really great refreshments','start': {
            'dateTime': '2020-06-28T09:00:00-07:00','timeZone': 'America/Los_Angeles'
          },'end': {
            'dateTime': '2020-06-28T17:00:00-07:00','recurrence': [
            'RRULE:FREQ=DAILY;COUNT=2'
          ],'attendees': [
            {'email': 'lpage@example.com'},{'email': 'sbrin@example.com'}
          ],'reminders': {
            'useDefault': false,'overrides': [
              {'method': 'email','minutes': 24 * 60},{'method': 'popup','minutes': 10}
            ]
          }
        }

        var request = gapi.client.calendar.events.insert({
          'calendarId': 'primary','resource': event,})

        request.execute(event => {
          console.log(event)
          window.open(event.htmlLink)
        })

      })
    })
  }


  // Save to LocalStorage
  const saveLocalTasks = () => {
    localStorage.setItem('tasks',JSON.stringify(tasks));
  };

  const getLocalTasks = () => {
    if (localStorage.getItem('tasks') === null) {
      localStorage.setItem('tasks',JSON.stringify([]));
    } else {
      let taskLocal = JSON.parse(localStorage.getItem('tasks'));
      setTasks(taskLocal);
    }
  }

  return (
    <div className="App">
      <header>My Task List</header>

      {/* State */}
      <Form 
      inputText={inputText} 
      tasks={tasks} 
      setTasks={setTasks} 
      setInputText={setInputText}
      setStatus={setStatus}
      />

      <TaskList
      filteredTasks={filteredTasks} 
      setTasks={setTasks}
      tasks={tasks}
      />

      <button onClick={handleClick} className="addEvent">Add Event</button>
    </div>
  );
}

export default App;