Javascript 身份验证时出错

我正在尝试使用unsplash api实现搜索功能，从unsplash.com搜索图像。但由于某些原因，我无法正确地进行身份验证。我收到一个网络错误

import React, { Component } from 'react';
import Unsplash, { toJson } from 'unsplash-js';
import './App.css';

const unsplash = new Unsplash({
  applicationId: '',
  secret: '',
  callbackUrl: 'urn:ietf:wg:oauth:2.0:oob',
  headers: {
    "Accept-Version": "v1"
  }
});

    class App extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const authenticationUrl = unsplash.auth.getAuthenticationUrl([
      "public",
      "read_user",
      "write_user",
      "read_photos",
      "write_photos"
    ]);
    location.assign(authenticationUrl);
    unsplash.auth.userAuthentication(query.code)
      .then(toJson)
      .then(json => {
        //console.log(unsplash.auth.userAuthentication(query.code))
        unsplash.auth.setBearerToken(json.access_token);
      })
      .catch(err => console.log('Auth err', err));

  }

  // handleClick() {
  //   let query = document.getElementById('input').value;
  //   fetch('https://api.unsplash.com/search/photos/?query=' + query)
  //     .then(response => console.log(response))
  //     //.catch(error => console.log('error: ' + error));
  // }

  handleClick() {
    let query = document.getElementById('input').value;
    unsplash.search.photos(query, 1) //function provided by api
      .then(toJson)
      .then(json => {
        console.log(json);
      });
  }

  render() {
    return (
      <div className="App">
        <form id='form'>
          <input type='text' id='input' ></input>
          <input type='submit' id='submit' onClick={this.handleClick} ></input>
        </form>
        <div id='field' >
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“Unsplash js”导入Unsplash，{toJson}；
导入“/App.css”；
const unsplash=新的unsplash({
应用程序ID:“”，
秘密：''，
callbackUrl:'urn:ietf:wg:oauth:2.0:oob'，
标题：{
“接受版本”：“v1”
}
});
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
const authenticationUrl=unsplash.auth.getAuthenticationUrl([
“公众”，
“读取用户”，
“写入用户”，
“阅读照片”，
“写照片”
]);
分配（authenticationUrl）；
unsplash.auth.userAuthentication（query.code）
.然后（toJson）
。然后（json=>{
//log（unsplash.auth.userAuthentication（query.code））
unsplash.auth.setBearerToken（json.access\u令牌）；
})
.catch（err=>console.log（'Auth err'，err））；
}
//handleClick（）{
//让query=document.getElementById（'input'）.value；
//取（'https://api.unsplash.com/search/photos/?query=“+查询）
//.then（response=>console.log（response））
////.catch（error=>console.log（'error:'+error））；
// }
handleClick（）{
让query=document.getElementById（'input'）.value；
unsplash.search.photos（query，1）//api提供的函数
.然后（toJson）
。然后（json=>{
log（json）；
});
}
render（）{
返回(
);
}
}
导出默认应用程序；

---

如果这有帮助的话，Api文档是很有用的。我从未有过身份验证方面的经验。

如果Unsplash的文档建议将参数

query.code

传递给

Unsplash.auth.userAuthentication

，我相信他们是想让您先解析查询字符串并声明

query

的值

---

你可以使用诸如之类的库来帮助你实现这一点。

你能显示错误（屏幕或代码）吗？./src/App.js第25行：“位置”的意外使用不受限制的全局搜索关键字来了解有关每个错误的更多信息。我不知道你为什么需要在你的情况下使用

location

。你能评论/删除那一行，然后显示你后来得到的错误吗？（最好是通过编辑您的问题以便其他人可以轻松查看）如果我注释了位置，这看起来像是一个lint错误，但不是networkerror无错误，但当我尝试搜索时，它会给我网络错误。关于被阻止的“跨源”请求的一些东西哦，但是我在哪里使用那个查询字符串呢？当我运行应用程序时，我被重定向到身份验证代码，然后我只看到错误