Реагируйте на использование API поиска в Twitter с аутентификацией только для приложений

Question

Я новичок в React Native и хочу создать приложение, которое использует API поиска в Твиттере для отображения твитов. Нет необходимости в аутентификации пользователя.

Последние две ночи я боролся за то, чтобы это заработало, и начинаю разочаровываться в xD.

Я попытался создать запрос, используя Fetch и XMLHttpRequest, но безуспешно. Также я попробовал несколько пакетов, включающих OAuth 2.0, который также не работал. У меня такое чувство, что я слишком усложняю вещи, так как все, что я хочу сделать, - это использовать аутентификацию только для приложений и использовать API стандартного поиска.

У кого-нибудь есть фрагмент кода о том, как сделать это в реагировать на натив без каких-либо дополнительных пакетов? Возможно ли это вообще с помощью «just» Fetch или XMLHttpRequest?

Заранее спасибо

Редактировать: Вот мой код пока

var base64 = require('base-64');

var credentials = encodeURIComponent(key) + ":" + encodeURIComponent(secret);
var encoded = new Buffer(credentials).toString('base64');
console.log(encoded);

fetch('https://api.twitter.com/oauth2/token', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    'Authorization': 'Basic ' + encoded
  },
  body: {
    'grant_type': 'client_credentials'
  },
}).then((response) => console.log(response))

Вот ответ:

Response {
   "_bodyBlob": Blob {
 "_data": Object {
   "blobId": "8dea4e53-7b39-4b78-b1a5-d7ef5a58de48",
   "offset": 0,
   "size": 114,
 },
   },
   "_bodyInit": Blob {
 "_data": Object {
   "blobId": "8dea4e53-7b39-4b78-b1a5-d7ef5a58de48",
   "offset": 0,
   "size": 114,
 },
   },
    "headers": Headers {
 "map": Object {
   "cache-control": Array [
     "public, max-age=0",
   ],
   "content-disposition": Array [
     "attachment; filename=json.json",
   ],
   "content-type": Array [
     "application/json;charset=utf-8",
   ],
   "date": Array [
     "Wed, 16 May 2018 16:55:48 GMT",
   ],
   "expires": Array [
     "Tue, 31 Mar 1981 05:00:00 GMT",
   ],
   "last-modified": Array [
     "Wed, 16 May 2018 16:55:48 GMT",
   ],
   "ml": Array [
     "A",
   ],
   "server": Array [
     "tsa_o",
   ],
   "status": Array [
     "403 Forbidden",
   ],
   "strict-transport-security": Array [
     "max-age=631138519",
   ],
   "x-connection-hash": Array [
     "b6dde5b876b934c8dcdb059ef0c400fa",
   ],
   "x-content-type-options": Array [
     "nosniff",
   ],
   "x-frame-options": Array [
     "DENY",
   ],
   "x-response-time": Array [
     "105",
   ],
   "x-transaction": Array [
     "0084737c0054c4dc",
   ],
   "x-tsa-request-body-time": Array [
     "26",
   ],
   "x-twitter-response-tags": Array [
     "BouncerCompliant",
   ],
   "x-ua-compatible": Array [
     "IE=edge,chrome=1",
   ],
   "x-xss-protection": Array [
     "1; mode=block; report=https://twitter.com/i/xss_report",
   ],
 },
    },
   "ok": false,
   "status": 403,
    "statusText": undefined,
   "type": "default",
   "url": "https://api.twitter.com/oauth2/token",
  }

Answer 1

Итак, я рад сообщить, что у меня это работает.Основной проблемой была кодировка тела запроса.

Вот рабочий код для аутентификации и получения токена на предъявителя. Затем с помощью этого токена используйте API поиска:

_getBearer = () => {

var details = {
  'grant_type': 'client_credentials'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

var key = "xxx";
var secret = "yyy";
var base64 = require('base-64');
var credentials = encodeURIComponent(key) + ":" + encodeURIComponent(secret);
var encoded = new Buffer(credentials).toString('base64');
console.log("Created encoded credentials: " + encoded);
fetch('https://api.twitter.com/oauth2/token', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    'Authorization': 'Basic ' + encoded
  },
  body: formBody
}).then((response) => response.json())
  .then((responseData) => {
    bearerToken = responseData.access_token;
    console.log("Got Bearer: " + responseData.access_token);
    this._loadTweet();

  })
  .catch((error) => {
    console.error(error);
    Alert.alert('Alert Title failure' + JSON.stringify(error))
  });

_loadTweet = () => {
  console.log("start load tweet");

  fetch('https://api.twitter.com/1.1/search/tweets.json?q=love', {
    method: 'GET',
    headers: {
      'Authorization': "Bearer " + bearerToken
    }
  }).then((response) => response.json())
    .then((responseData) => {
      console.log(JSON.stringify(responseData));
    })
    .catch((error) => {
      console.error(error);
      Alert.alert('Alert Title failure' + JSON.stringify(error))
    });
};

};