React Native'da Getir özelliğiyle bir yetkilendirme başlığı kullanma

fetchReact Native Ürün Avı API'sından bilgi almak için kullanmaya çalışıyorum . Uygun Erişim Jetonunu aldım ve Eyalete kaydettim, ancak bir GET isteği için Yetkilendirme başlığı içinde geçiremiyorum.

Şimdiye kadar sahip olduğum şey:

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();
  },

Kodum için beklentim şudur:

1. İlk olarak, fetchiçe aktarılan API modülümden veriler içeren bir erişim belirteci yapacağım
2. Bundan sonra, clientTokenözelliğini this.statealınan erişim belirtecine eşit olacak şekilde ayarlayacağım .
3. Ardından, getPostsProduct Hunt'tan bir dizi geçerli gönderi içeren bir yanıt döndürmesi gereken çalışacağım .

Aldığım ve ediliyor belirteç erişim doğrulamak mümkün duyuyorum this.stateonun gibi alıyor clientTokenmülkiyet. Ayrıca getPostsçalıştırıldığını doğrulayabiliyorum .

Aldığım hata şudur:

{"error": "unauthorized_oauth", "error_description": "Lütfen geçerli bir erişim belirteci sağlayın. Bir API isteğinin nasıl yetkilendirileceğiyle ilgili API belgelerine bakın. Lütfen doğru kapsamlara ihtiyacınız olduğundan emin olun. msgstr "özel uç noktalara erişmek için."}

Yetkilendirme başlığımda bir şekilde erişim belirtecini düzgün bir şekilde geçirmediğim varsayımı üzerinde çalışıyorum, ancak nedenini tam olarak anlayamıyor gibi görünmüyorum.

Yetkilendirme başlığına sahip örnek getirme:

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'
 });

Anlaşılan, fetchyöntemi yanlış kullanıyordum .

fetch iki parametre bekler: API'nin bitiş noktası ve gövde ve üstbilgiler içerebilen isteğe bağlı bir nesne.

Amaçlanan nesneyi ikinci bir nesne içine sarıyordum, bu da bana istenen sonucu alamadı.

İşte nasıl üst düzeyde görünüyor:

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

Nesnemi şöyle yapılandırdım:

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'
  })

Bu özdeş bir sorun vardı, kimlik doğrulama simgeleri için django-rest-knox kullanıyordum. Bu gibi görünüyordu benim getirme yöntemi ile hiçbir şey yanlış olduğu ortaya çıkıyor:

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

Apache kullanıyordum.

Benim için bu sorunu çözmüş değişen oldu WSGIPassAuthorizationiçin 'On'de wsgi.conf.

AWS EC2'de konuşlandırılmış bir Django uygulaması vardı ve başvurumu yönetmek için Elastik Beanstalk kullandım, bu yüzden django.configbunu yaptım:

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

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);
        });
};