Reactjs 错误400:使用时重定向\u uri\u不匹配http://localhost:3000

我在尝试使用一个简单的NPM开始加载我的react web应用程序时，遇到了错误400:redirect\u uri\u不匹配错误http://localhost:3000/. 对于授权重定向URI和授权Javascript源代码，在OAuth2.0部分中应该放些什么，我非常困惑，不确定正确输入这些内容是否能够解决问题。我相信我已经用API密钥正确输入了所有代码。我所要做的就是创建一个任务列表应用程序，让你只需按一下按钮就可以将任务添加到我的谷歌日历中。这是我的密码：

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',
            'timeZone': 'America/Los_Angeles'
          },
          '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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“./Components/Form”导入表单；
从“./Components/TaskList”导入任务列表；
函数App（）{
常量[inputText，setInputText]=useState（“”）；
const[tasks，setTasks]=useState（[]）；
const[status，setStatus]=useState（'all'）；
常量[filteredTasks，setFilteredTasks]=useState（[]）；
//谷歌日历API
var gapi=window.gapi
var CLIENT_ID=“”；//为隐私而隐藏
var API_KEY=“”；//为隐私而隐藏
var DISCOVERY_DOCS=[”https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
变量作用域=”https://www.googleapis.com/auth/calendar.readonly";
//
useffect（（）=>{
getLocalTasks（）
}, []);
useffect（（）=>{
常量过滤器句柄=（）=>{
开关（状态）{
案件‘已完成’：
setFilteredTasks（tasks.filter（（task）=>task.completed==true））；
打破
案例“未完成”：
setFilteredTasks（tasks.filter（（task）=>task.completed==false））；
打破
违约：
setFilteredTasks（任务）；
打破
}
};
过滤器手柄（）；
saveLocalTasks（）；
}，[任务、状态]；
常量handleClick=（）=>{
load（'client:auth2'，（）=>{
console.log（'Loaded Client'）
gapi.client.init({
API密钥：API_密钥，
clientId:客户端ID，
发现文档：发现文档，
范围：范围，
})
gapi.client.load（'calendar'，'v3'，（）=>console.log（'Boom！'））
gapi.auth2.getAuthInstance（）.signIn（）
.然后（（）=>{
var事件={
“摘要”：“精彩事件！”，
“位置”：“800 Howard St.，旧金山，CA 94103”，
‘描述’：‘非常棒的点心’，
“开始”：{
“日期时间”：“2020-06-28009:00:00-07:00”，
“时区”：“美国/洛杉矶”
},
“结束”：{
“日期时间”：“2020-06-28 17:00:00-07:00”，
“时区”：“美国/洛杉矶”
},
“重现期”：[
'RRULE:FREQ=每日；COUNT=2'
],
“与会者”：[
{'email'：'lpage@example.com'},
{'email'：'sbrin@example.com'}
],
“提醒”：{
“useDefault”：false，
“覆盖”：[
{'method'：'email'，'minutes'：24*60}，
{'method'：'popup'，'minutes'：10}
]
}
}
var request=gapi.client.calendar.events.insert({
'日历ID'：'主要'，
“资源”：事件，
})
执行（事件=>{
console.log（事件）
window.open（event.htmlink）
})
})
})
}
//保存到本地存储
const saveLocalTasks=（）=>{
setItem（'tasks'，JSON.stringify（tasks））；
};
const getLocalTasks=（）=>{
if（localStorage.getItem（'tasks'）==null）{
localStorage.setItem（'tasks'，JSON.stringify（[]）；
}否则{
让taskLocal=JSON.parse（localStorage.getItem（'tasks'））；
setTasks（taskLocal）；
}
}
返回(
我的任务列表
{/*状态*/}
添加事件
);
}
导出默认应用程序；

我也曾试图查找以前关于同一问题的问题，但似乎无法找到答案。这是关于使用谷歌日历API的问题。您需要OAuth2来处理您想要发出的请求。谷歌将根据应用程序的类型发布不同类型的凭证。对于web应用程序，他们希望您将授权请求的Javascript源以及成功授权后客户端将重定向到的重定向URI列为白名单。您需要在项目的同意屏幕中指定这两个地址，然后再次下载凭据对象。让我知道这是否有帮助。是的，这是有意义的，但你说的白名单我的JS来源是什么意思？我知道你在说什么，但是在JS源代码和重定向URI中，我是否会把“localhost:3000”放进去？我是否会将下载的0Auth 2.0文件代码添加到我代码中的package.json文件中？