react-native - React Native 使用 Twitter 搜索 API 进行仅应用程序身份验证

Question

我是 React Native 新手，想要构建一个使用 Twitter 搜索 API 来显示推文的应用程序。无需用户身份验证。

过去两个晚上我一直在努力让这个工作正常进行，并开始感到沮丧 xD。

我尝试使用 Fetch 和 XMLHttpRequest 构建请求，但没有成功。我还尝试了几个启用 OAuth 2.0 的软件包，但也不起作用。我觉得我把事情变得过于复杂了，因为我想做的就是使用仅应用程序身份验证并使用标准搜索 API。

有没有人有一个代码片段，说明如何在 native react 中执行此操作，而无需任何额外的包？ “仅”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

所以，我很高兴地报告我已经成功了。 主要问题是请求正文的编码。

这是用于身份验证并获取不记名 token 的工作代码。然后使用此 token 来使用搜索 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))
    });
};

};