wake-up-neo.com

Verwenden eines Autorisierungsheaders mit Fetch in React Native

Ich versuche, fetch in React Native) zu verwenden, um Informationen aus der Product Hunt-API abzurufen. Ich habe das richtige Zugriffstoken erhalten und es in State gespeichert, aber nicht Es scheint nicht möglich zu sein, es innerhalb des Authorization-Headers für eine GET-Anforderung weiterzuleiten.

Folgendes habe ich bisher:

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

Ich erwarte für meinen Code Folgendes:

  1. Zuerst werde ich fetch ein Zugriffstoken mit Daten aus meinem importierten API-Modul erstellen
  2. Danach setze ich die Eigenschaft clientToken von this.state, um dem empfangenen Zugriffstoken zu entsprechen.
  3. Anschließend führe ich getPosts aus, das eine Antwort mit einer Reihe aktueller Posts von Product Hunt zurückgeben sollte.

Ich kann überprüfen, ob das Zugriffstoken empfangen wird und ob this.state empfängt es als seine Eigenschaft clientToken. Ich kann auch überprüfen, ob getPosts ausgeführt wird.

Der Fehler, den ich erhalte, ist der folgende:

{"error": "unauthorized_oauth", "error_description": "Bitte geben Sie einen gültigen Zugriffstoken an. Informationen zum Autorisieren einer API-Anforderung finden Sie in unserer API-Dokumentation. Stellen Sie außerdem sicher, dass Sie die richtigen Bereiche benötigen. Bsp." private public " "um auf private Endpunkte zuzugreifen."}

Ich bin davon ausgegangen, dass ich das Zugriffstoken in meinem Autorisierungsheader nicht richtig weitergebe, aber anscheinend nicht in der Lage bin, genau herauszufinden, warum.

javascriptoauth-2.0react-nativefetch-api
106
Richard Kho

Es stellte sich heraus, dass ich die Methode fetch falsch angewendet habe.

fetch erwartet zwei Parameter: einen Endpunkt für die API und ein optionales Objekt, das Body und Header enthalten kann.

Ich wickelte das beabsichtigte Objekt in ein zweites Objekt ein, was zu keinem gewünschten Ergebnis führte.

So sieht es auf hohem Niveau aus:

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

Ich habe mein Objekt so strukturiert:

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'
  })
54
Richard Kho

Beispiel für einen Abruf mit Berechtigungskopf:

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

Ich hatte dieses identische Problem, ich benutzte Django-rest-knox für Authentifizierungstoken. Es stellte sich heraus, dass mit meiner Abrufmethode, die so aussah, nichts falsch war:

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

Ich habe Apache ausgeführt.

Was dieses Problem für mich löste, war, WSGIPassAuthorization in 'On' In wsgi.conf Zu ändern.

Ich hatte eine Django App auf AWS EC2 implementiert und verwaltete meine Anwendung mit Elastic Beanstalk. In Django.config Habe ich Folgendes ausgeführt:

container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'
3
Marquistador
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);
        });
};
0
lilash sah