Почему я все еще получаю ошибку 401 (несанкционированный) из запроса api get?

У меня есть пример попыток получить некоторые видео с канала в реакции с помощью axios и получить запрос на api. Все выглядит хорошо, но когда он компилируется, я получаю консольную ошибку, которая гласит: GEThttps://api.vimeo.com/channels/180097/videos/&key=*********** 401 (Authorization Required

Маркер доступа является правильным, если он был зарегистрирован. Вот код:

import React, { Component } from 'react';
import axios from 'axios';

const API_KEY = '***********************';

class Apicall extends Component {

   componentDidMount() {
       this.getChannel();
   }

   getChannel() {
        axios.get(`https://api.vimeo.com/channels/180097/videos/&key=${API_KEY}`) 
    .then(res => {
        const videos = res.data.data.children.map(obj => obj.data);
        this.setState({videos});
      });
   }

   constructor(props) {
       super(props);

      this.state = {
        channel_id: '180097',
        data: [],
        videos: [],
        per_page: '5',
        paging: {
            first: '/channels/180097/videos?page=1',
            last: '/channels/180097/videos?page=3' 
        }
    }
    this.getChannel = this.getChannel.bind(this);
}

render(){
    return (
         <div className="container">
           <h1></h1>
           <ul>
               {this.state.videos.map(video => 
                  <li key={video.uri}></li>
               )}
           </ul>
         </div>
       );
    }
 }
 export default Apicall;

Почему он все еще не получает токен доступа?

javascript,reactjs,api,get,axios,

0

Ответов: 1

2 принят

Прежде всего, необходимо сделать запрос на запись к https://api.vimeo.com/oauth/authorize/clientс вашим Authorizationзаголовок установлен Basic Auth, ваше имя пользователя вашего приложения client identifierи ваш пароль your client secret. Итак Authentication: Basic base64(<client-identifier>:<client-secret>). Вам также необходимо установить grant_typeнаclient_credentials

Затем вы получите ответ вроде:

{
    "access_token": "dd339558163d867d92f4616ca06<redacted>",
    "token_type": "bearer",
    "scope": "public private",
    "app": {
        "name": "test",
        "uri": "/apps/<app_id>"
    }
}

Затем access_tokenих можно использовать для следующих запросов:

Вы отправляете запрос на https://api.vimeo.com/channels/180097 с Authorizationзаголовком, установленным вAuthorization: Bearer <access_token>

Axios будет что-то вроде этого:

axios.post('https://api.vimeo.com/oauth/authorize/client',
        { grant_type: 'client_credentials' },
        { headers: { Authorization: 'Basic btoa(<client-identifier>:<client-secret>)' } })

axios.get('https://api.vimeo.com/channels/180097',
    { headers: { Authorization: Bearer <access_token>' } })

Конечно, мне потребовалось некоторое время, чтобы узнать, потому что документация vimeo api довольно плохая.

Экспорт почтальона в xhr:

var data = "grant_type=client_credentials";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://api.vimeo.com/oauth/authorize/client");
xhr.setRequestHeader("Authorization", "Basic <insert_base64_of_client_id_and_client_secret>");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Postman-Token", "e13df60c-a625-411d-8020-a51086e60838");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(data);
var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://api.vimeo.com/channels/180097");
xhr.setRequestHeader("Authorization", "Bearer <insert_access_token>");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Postman-Token", "5f32ac6c-2c86-4fbc-a7cb-43c8b01f7ea7");

xhr.send(data);
JavaScript, reactjs, апи, получить, Вардар,
Похожие вопросы
Яндекс.Метрика