身份验证React JS时出错

Question

我正在尝试实现搜索功能，以便使用unsplashapi从unsplash.com搜索图像。但由于某种原因，我无法正确地进行身份验证。我收到NetworkError。

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;

Api文档https://github.com/unsplash/unsplash-js#authorization如果这有帮助的话。我从未有过身份验证的经验。

Answer 1

Unsplash的文档建议将参数query.code传递给unsplash.auth.userAuthentication，我相信他们打算让您首先解析查询字符串并声明query的值。

您可以使用诸如查询字符串之类的库来帮助您实现这一点。