[javascript] React Native에서 Fetch와 함께 인증 헤더 사용

Program / 글쓴이

fetchProduct Hunt API의 정보를 얻기 위해 React Native에서 사용하려고합니다 . 적절한 액세스 토큰을 얻어 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. 먼저 fetch가져온 API 모듈의 데이터 가 포함 된 액세스 토큰
  2. 그런 다음의 clientToken속성을 this.state수신 된 액세스 토큰과 동일 하게 설정합니다 .
  3. 그런 다음 getPostsProduct Hunt의 현재 게시물 배열을 포함하는 응답을 반환해야합니다.

나는 수신되는 액세스 토큰이 있는지 확인 할 수 있어요 this.state그것으로 수신하는 clientToken속성입니다. 또한 getPosts실행 중인지 확인할 수 있습니다.

내가받는 오류는 다음과 같습니다.

{ “error”: “unauthorized_oauth”, “error_description”: “유효한 액세스 토큰을 제공하십시오. api 요청을 승인하는 방법에 대한 API 문서를 참조하십시오. 또한 올바른 범위가 필요한지 확인하십시오. 예 :” “개인 공개 \” “개인 엔드 포인트에 액세스합니다.”}

인증 헤더에서 액세스 토큰을 올바르게 전달하지 않는다는 가정을 수행했지만 그 이유를 정확히 알 수없는 것 같습니다.

답변

인증 헤더가있는 페치 예 :

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

답변

fetch방법을 잘못 사용하고있는 것으로 나타났습니다 .

fetch API에 대한 끝점과 본문과 헤더를 포함 할 수있는 선택적 개체라는 두 가지 매개 변수가 필요합니다.

의도 한 객체를 두 번째 객체 내에 포장하여 원하는 결과를 얻지 못했습니다.

높은 수준으로 보이는 방법은 다음과 같습니다.

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

답변

나는이 동일한 문제가 있었고 인증 토큰에 django-rest-knox를 사용하고있었습니다. 다음과 같이 내 fetch 메소드에 아무런 문제가 없음이 밝혀졌습니다.

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

나는 아파치를 뛰고 있었다.

내가 어떻게이 문제를 해결하는 것은 변화했다 WSGIPassAuthorization에 'On'에서 wsgi.conf.

AWS EC2에 Django 앱을 배포했으며 Elastic Beanstalk를 사용하여 애플리케이션을 관리 django.config했습니다.

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

답변