Een autorisatieheader gebruiken met Fetch in React Native

Ik probeer fetchin React Native te gebruiken om informatie uit de Product Hunt API te halen. Ik heb de juiste toegangstoken verkregen en deze opgeslagen in State, maar ik schijn deze niet door te kunnen geven in de Authorization-header voor een GET-verzoek.

Dit is wat ik tot nu toe heb:

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.json())
      .then((responseData) => {
          console.log(responseData);
        this.setState({
          clientToken: responseData.access_token,
        });
      })
      .then(() => {
        this.getPosts();
      })
      .done();
  },
  getPosts: function() {
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    fetch(api.posts.link, obj)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
      })
      .done();
  },

De verwachting die ik heb van mijn code is de volgende:

1. Eerst zal ik fetcheen toegangstoken met gegevens uit mijn geïmporteerde API-module
2. Daarna stel ik de eigenschap clientTokenvan this.statein op het ontvangen toegangstoken.
3. Vervolgens zal ik getPostsuitvoeren, wat een reactie zou moeten retourneren met een reeks huidige berichten van Product Hunt.

Ik kan verifiëren dat het toegangstoken wordt ontvangen en dat this.statehet ontvangt als de eigenschap clientToken. Ik kan ook verifiëren dat getPostswordt uitgevoerd.

De foutmelding die ik krijg is de volgende:

{“error”:”unauthorized_oauth”, “error_description”:”Geef een geldige toegangstoken op. Raadpleeg onze API-documentatie over hoe u een API-verzoek autoriseert. Zorg er ook voor dat u de juiste scopes nodig heeft. Bijvoorbeeld \” private public\” voor toegang tot privé-eindpunten.”}

Ik ben uitgegaan van de veronderstelling dat ik op de een of andere manier het toegangstoken niet goed doorgeef in mijn autorisatieheader, maar ik schijn niet precies te kunnen achterhalen waarom.

Antwoord 1, autoriteit 100%

Voorbeeld ophalen met autorisatiekop:

fetch('URL_GOES_HERE', { 
    method: 'post', 
    headers: new Headers({
        'Authorization': 'Basic '+btoa('username:password'), 
        'Content-Type': 'application/x-www-form-urlencoded'
    }), 
    body: 'A=1&B=2'
});

Antwoord 2, autoriteit 32%

Het bleek dat ik de fetch-methode verkeerd gebruikte.

fetchverwacht twee parameters: een eindpunt voor de API en een optioneel object dat body en headers kan bevatten.

Ik wikkelde het beoogde object in een tweede object, wat niet het gewenste resultaat opleverde.

Zo ziet het eruit op hoog niveau:

fetch('API_ENDPOINT', OBJECT)  
  .then(function(res) {
    return res.json();
   })
  .then(function(resJson) {
    return resJson;
   })

Ik heb mijn object als zodanig gestructureerd:

var obj = {  
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Origin': '',
    'Host': 'api.producthunt.com'
  },
  body: JSON.stringify({
    'client_id': '(API KEY)',
    'client_secret': '(API SECRET)',
    'grant_type': 'client_credentials'
  })
}

Antwoord 3, autoriteit 5%

Ik had hetzelfde probleem, ik gebruikte django-rest-knox voor authenticatietokens. Het bleek dat er niets mis was met mijn ophaalmethode die er als volgt uitzag:

...
    let headers = {"Content-Type": "application/json"};
    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }
    return fetch("/api/instruments/", {headers,})
      .then(res => {
...

Ik draaide apache.

Wat dit probleem voor mij oploste, was het veranderen van WSGIPassAuthorizationin 'On'in wsgi.conf.

Ik had een Django-app geïmplementeerd op AWS EC2 en ik gebruikte Elastic Beanstalk om mijn applicatie te beheren, dus in de django.configdeed ik dit:

container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'

Antwoord 4, autoriteit 2%

Het volgende codefragment zou moeten werken als u de drager-token gebruikt:

const token = localStorage.getItem('token')
const response = await fetch(apiURL, {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
            'Authorization': `Bearer ${token}`, // notice the Bearer before your token
        },
        body: JSON.stringify(yourNewData)
    })

Antwoord 5

completed = (id) => {
    var details = {
        'id': id,
    };
    var formBody = [];
    for (var property in details) {
        var encodedKey = encodeURIComponent(property);
        var encodedValue = encodeURIComponent(details[property]);
        formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");
    fetch(markcompleted, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formBody
    })
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson, 'res JSON');
            if (responseJson.status == "success") {
                console.log(this.state);
                alert("your todolist is completed!!");
            }
        })
        .catch((error) => {
            console.error(error);
        });
};