I have an example of trying to get some videos from a channel in react using axios and get request to the api. Everything looks good but when It compiles, I get a console error that states: GET https://api.vimeo.com/channels/180097/videos/&key=*********** 401 (Authorization Required
The access token is the correct one generated when I registered it. Here's the code set up:
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;
Why is it still not getting the access token?
You first need to make a post request to https://api.vimeo.com/oauth/authorize/client
with your Authorization
header set to Basic Auth
, your username is your application client identifier
and your password is your client secret
. So Authentication: Basic base64(<client-identifier>:<client-secret>)
. You'll also need to set grant_type
to client_credentials
You'll then get a reply like:
{
"access_token": "dd339558163d867d92f4616ca06<redacted>",
"token_type": "bearer",
"scope": "public private",
"app": {
"name": "test",
"uri": "/apps/<app_id>"
}
}
The access_token
can then be used for following requests:
You make a request to https://api.vimeo.com/channels/180097 with the Authorization
header set to Authorization: Bearer <access_token>
Axios will be something like this:
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>' } })
Granted, this took me a while to find out because the vimeo api documentation is pretty bad.
Postman export in 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);