javascript - 如何获取 api 的身份验证

Question

我想使用 unsplash api 制作一个图像搜索网络应用程序，但我似乎无法让它工作，我按照这里的说明 https://github.com/unsplash/unsplash-js#dependencies这里还有其他信息 https://unsplash.com/documentation#authorization-workflow 。我是授权新手。

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

const unsplash = new Unsplash({
  applicationId: '1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc',
  secret: 'd47bcd8287983e24da69c37348b21bee55b4c808390413f52fa6aa545b11debc',
  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(json.access_token)
        unsplash.auth.setBearerToken(json.access_token);
      })
      .catch(err => console.log('Auth err', err));

  }

  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;

错误:

https://unsplash.com/oauth/authorize?client_id=1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc&redirect_uri=urn:ietf:wg:oauth:2.0:oob&response_type=code&scope=public+read_user+write_user+read_photos+write_photos App.js:29
 ReferenceError: query is not defined App.js:31
The above error occurred in the <App> component:
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
 index.js:2178
 ReferenceError: query is not defined App.js:31
./src/App.js
  Line 31:  'query' is not defined  no-undef

Search for the keywords to learn more about each error.

Answer 1

文档说:

// The OAuth code will be passed to your callback URL as a query string

在此之前:现在您已经有了身份验证 URL，您需要将用户重定向到该 URL。 location.assign(authenticationUrl);

所以:

1. 您可能需要一些路由解决方案，例如 React Router 或类似的解决方案。
2. 点击后，使用您的路由器将用户重定向到 URL (authenticationURL)(React Router 示例:import { Redirect } from react-router-dom，然后在代码中 <Redirect to={url} />。
3. 用户获得授权后，Unsplash 会通过 code 将他带回您的应用程序在 URL 查询字符串中。 code的存在您可能想在 componentDidMount() 中捕获或componentDidUpdate() (取决于您的应用程序/解决方案)。您应该能够从路由器捕获的查询字符串。如果您使用 React Router，您可以关注以下帖子:How to get parameter value from query string
4. 将代码作为参数传递。剩下的看起来还不错。