web-dev-qa-db-ja.com

React NativeのFetchで認証ヘッダを使用する

私は、Product Hunt APIから情報を取得するためにReact Nativeでfetchを使用しようとしています。適切なアクセストークンを取得してStateに保存しましたが、GETリクエストのAuthorizationヘッダー内で渡すことはできないようです。

これが私がこれまでに持っているものです：

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

私のコードに期待することは次のとおりです。

  1. まず、インポートしたAPIモジュールのデータを含むアクセストークンをfetchします。
  2. その後、受け取ったアクセストークンと等しくなるようにthis.stateのclientTokenプロパティを設定します。
  3. 次に、Product Huntからの現在の投稿の配列を含む応答を返すgetPostsを実行します。

アクセストークンが受信されていること、およびthis.stateがそれをclientTokenプロパティとして受信していることを確認できます。 getPostsが実行されていることを確認することもできます。

表示されるエラーは次のとおりです。

{"error"： "unauthorized_oauth"、 "error_description"： "有効なアクセストークンを入力してください。APIリクエストの認証方法についてはapiのドキュメントを参照してください。正しいスコープが必要かどうかも確認してください。 「プライベートエンドポイントにアクセスします。」}

私はどういうわけか私が自分の認証ヘッダでアクセストークンを正しく伝えていないという仮定に基づいて作業してきました、しかし正確にその理由を理解することができないようです。

javascriptoauth-2.0react-nativefetch-api
102
Richard Kho

結局、私はfetchメソッドを間違って使っていました。

fetchは2つのパラメータを期待します：APIへのエンドポイント、そしてボディとヘッダを含むことができるオプションのオブジェクト。

意図したオブジェクトを2番目のオブジェクト内にラップしていましたが、これは望ましい結果をもたらしませんでした。

これが高水準の外観です。

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

私は自分のオブジェクトを以下のように構成しました。

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

認可ヘッダを使用したフェッチの例：

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

私はこの同じ問題を抱えていました、私は認証トークンにDjango-rest-knoxを使っていました。このように見えた私の取得方法には何も問題がないことがわかりました。

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

私はApacheを実行していました。

私にとってこの問題を解決したのは'On'のWSGIPassAuthorizationをwsgi.confに変更することでした。

DjangoアプリをAWS EC2にデプロイし、Elastic Beanstalkを使用して自分のアプリケーションを管理したので、Django.configでは、次のようにしました。

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