web-dev-qa-db-fra.com

Utilisation d'un en-tête d'autorisation avec Fetch dans React Native

J'essaie d'utiliser fetch dans React Native pour récupérer des informations à partir de l'API Product Hunt. J'ai obtenu le jeton d'accès approprié et l'ai enregistré dans State, mais je ne semble pas pouvoir le transmettre dans l'en-tête Authorization pour une demande GET.

Voici ce que j'ai jusqu'à présent:

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

L'attente que j'ai pour mon code est la suivante:

  1. Tout d'abord, je vais fetch un jeton d'accès avec les données de mon module API importé
  2. Après cela, je définirai la propriété clientToken de this.state sur le jeton d'accès reçu.
  3. Ensuite, je lancerai getPosts qui devrait renvoyer une réponse contenant un tableau des publications actuelles de Product Hunt.

Je suis en mesure de vérifier que le jeton d'accès est en cours de réception et que this.state le reçoit comme propriété clientToken. Je suis également en mesure de vérifier que getPosts est en cours d'exécution.

L'erreur que je reçois est la suivante:

{"error": "unauthorized_oauth", "error_description": "Veuillez fournir un jeton d'accès valide. Reportez-vous à la documentation de votre API pour savoir comment autoriser une demande d'API. Assurez-vous également que vous avez besoin des portées appropriées. Par exemple," public public\". "pour accéder aux points de terminaison privés."}

J'ai supposé que je ne transmettais pas correctement le jeton d'accès dans l'en-tête d'autorisation, mais je ne semble pas être en mesure de comprendre exactement pourquoi.

javascriptoauth-2.0react-nativefetch-api
106
Richard Kho

En fait, j’utilisais mal la méthode fetch.

fetch attend deux paramètres: un point de terminaison de l'API et un objet facultatif pouvant contenir un corps et des en-têtes.

J'emballais l'objet prévu dans un deuxième objet, ce qui ne m'a pas permis d'obtenir le résultat souhaité.

Voici à quoi cela ressemble à un niveau élevé:

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

J'ai structuré mon objet comme tel:

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

Exemple de récupération avec en-tête d'autorisation:

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

J'ai eu ce problème identique, j'utilisais Django-rest-knox pour les jetons d'authentification. Il s’avère que rien n’allait mal avec ma méthode fetch qui ressemblait à ceci:

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

Je courais Apache.

Ce qui a résolu ce problème pour moi a été de changer WSGIPassAuthorization en 'On' en wsgi.conf.

J'avais une application Django déployée sur AWS EC2 et j'utilisais Elastic Beanstalk pour gérer mon application. Par conséquent, dans le Django.config, je l'ai fait:

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