Ionic4 / Angular 发布推文到 Twitter

Question

我正在开发一个应用程序，希望用户点击一个按钮并向他/她的时间线发送一条推文。有几种已知的方法可以使用Node.JS和Angular完成这个功能，但我正在寻找一种不需要运行Node服务器就能实现我的要求的解决方案。

是否有一种方法可以将Twitter API嵌入您的IONIC / Angular应用程序中。我不需要Ionic插件TwitterConnect，因为它没有POST方法。

编辑: 这是Twitter的示例，但我该如何在Angular中实现它？

curl -XPOST 
  --url 'https://api.twitter.com/1.1/statuses/update.json?status=hello' 
  --header 'authorization: OAuth
  oauth_consumer_key="oauth_customer_key",
  oauth_nonce="generated_oauth_nonce",
  oauth_signature="generated_oauth_signature",
  oauth_signature_method="HMAC-SHA1",
  oauth_timestamp="generated_timestamp",
  oauth_token="oauth_token",
  oauth_version="1.0"'

这里是链接https://developer.twitter.com/en/docs/tweets/post-and-engage/api-reference/post-statuses-update，由@Gonzalo Nicolás建议提供。 请问是否有人能够协助我提供文档或代码示例。

- Mitchell Yuen

Answer 1

抱歉我的英文不好，我来自阿根廷。您需要用POST statuses/update API解决问题， 这个解决方案来自Twitter。如果您搜索一下，就可以找到所有必须发送的文档和结构。假设您使用了auth。

链接：https://developer.twitter.com/en/docs/tweets/post-and-engage/api-reference/post-statuses-update

- Gonzalo Nicolás

---

@Mitch 有人可以协助我提供文档或一些编码示例吗？ 关于此，我可以为客户端应用程序提供指南，以了解与 Twitter 和 Angular API 集成的所有操作。 https://www.sitepoint.com/building-twitter-app-using-angular/ 在本指南中，我建议您首先了解用于注册社交媒体帐户的Auth0概念。 - Gonzalo Nicolás

Nicolas，我正在使用 Twitter 连接来允许用户登录和注册。 - Mitchell Yuen

如果你需要帮助，尼古拉斯，请查看我对这个问题的回答。 - Mitchell Yuen

Answer 2

据我所了解，您可以使用简单的node服务器访问Twitter API。最初我以为这很困难，但实际上并不需要过多担心。

您可以创建一个项目目录来启动您的node程序。

mkdir server
cd server
npm init
touch server.js

并将 twit API 和 express JS 安装到你的 Node 项目中。

npm install twit body-parser cors express

请在 Twitter 开发者页面 https://apps.twitter.com/ 上创建您的 Twitter 应用程序，然后将以下代码复制并粘贴到 server.js 文件中。在您的 Node 应用程序中创建 server.js 文件非常简单，只需创建一个名为 server.js 的文件即可。

const express = require('express');
const Twitter = require('twit');

const app = express();
const client = new Twitter({
  consumer_key:         '...',
  consumer_secret:      '...',
  access_token:         '...',
  access_token_secret:  '...',
});


app.use(require('cors')());
app.use(require('body-parser').json());

app.post('/post_tweet', (req, res) => {

  tweet = req.body;

  client
    .post(`statuses/update`, tweet)
    .then(tweeting => {
      console.log(tweeting);

      res.send(tweeting);
    })

   .catch(error => {
    res.send(error);
  });


});

app.listen(3000, () => console.log('Server running'));

那么在您的Angular项目中，只需复制并粘贴此代码，即可完成设置。

api_url = 'http://localhost:3000';

  tweet(tweetdata: string) {
    return this.http.post<any>(`${this.api_url}/post_tweet/`, {status: tweetdata})
        .pipe(map(tweet => {

            alert("tweet posted")

            return tweet;
        }));
}
sendTweet() {  
  this.tweet('This is app code')
            .pipe(first())
            .subscribe(
                data => {
                    console.log('yes')
                },
                error => {
                  'failed'
                });
}

- Mitchell Yuen

Answer 3

您可以尝试使用以下代码在时间线中显示推文的本地Twitter小部件脚本：（我没有在Angular/Ionic中尝试过，但是在我的HTML中工作正常）

// initialization : 

window.twttr = (function (d, s, id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = {
        _e: [],
        ready: function (f) {
            t._e.push(f)
        }
    });
}(document, "script", "twitter-wjs"));

// on button click, this will fire  (button will automatically generated by widget.)

twttr.ready(function (twttr) {
    twttr.widgets.createShareButton(
        'link you want to share',
        document.getElementById('twr'), {
            url: 'link that you want to share',
            count: '1',
            size: 'large'
        }).then(function (el) {
        console.log('button created');
    });
    twttr.events.bind('tweet', function (event) {
        console.log('tweet', event);
    });
});

注意：可能在Angular中window.twttr无法工作，因此您可以使用window['twttr']替代window.twttr变量。

- Mayur Kukadiya

Answer 4

这将是一篇有用的文章

const express = require('express');
const Twitter = require('twit');

const app = express();
const client = new Twitter({
  consumer_key: 'Consumer Key Here',
  consumer_secret: 'Consumer  Secret  Here',
  access_token: 'Access Token Here',
  access_token_secret: 'Token  Secret Here'
});


app.use(require('cors')());
app.use(require('body-parser').json());

app.post('/post_tweet', (req, res) => {

  tweet = {status:"Hello world"};

    client
      .post(`statuses/update`, tweet)
      .then(timeline => {
        console.log(timeline);

        res.send(timeline);
      })

     .catch(error => {
      res.send(error);
    });


});

app.listen(3000, () => console.log('Server running'));

Angular Twitter 服务

export class TwitterService {

 api_url = 'http://localhost:3000';

  constructor(private http: HttpClient) { }

  getTimeline() {
    return this.http
      .get<any[]>(this.api_url+'/home_timeline')
      .pipe(map(data => data));

  }

  getMentions() {
    return this.http
      .get<any[]>(this.api_url+'/mentions_timeline')
      .pipe(map(data => data));

  }

}

- dasunse