Twitter APIを使って自動でTweetする（３）

2019/5/26 更新
認可取得画面のURLが「https://api.twitter.com/oauth/authorize」だと何度も認可取得確認が表示されるため、「https://api.twitter.com/oauth/authenticate」に変更した。

---

「第一回：Twitter APIを使って自動でTweetする」でRequest Tokenの取得を、「第二回：Twitter APIを使って自動でTweetする」でそれをAWSのAPI GatewayとLambdaにデプロイした。
今回は、取得したRequest Tokenを利用して、Twitterの認証を行う画面を作成する。画面はlambdaからのレスポンスでhtmlを返してもよかったが、vue.jsを使って作成し、S3のウェブサービスのホスト機能で公開することにした。とりあえず、今回はローカルでVueアプリを立ち上げるところまで。

引用

今回の記事を作成するにあたり、以下の記事を参考にした。

• Vue.jsをvue-cliを使ってシンプルにはじめてみる

---

ちなみに、今回のアプリを作成にあたり、node.js(version 8.9.0)とvue(version 2.6.0)とvue-cli(version 3.7.0)を利用している。

• node.jsのインストール（以下のサイトを参考にインストールする）
  【Node.js入門】各OS別のインストール方法まとめ

• vueのインストールとプロジェクト(twitterapp)の作成

$ npm install vue
$ npm install -g @vue/cli
$ vue create twitterapp  # いろいろと設定の確認があるが、すべてDefaultでOK
$ cd twitterapp
$ npm install bootstrap-vue  # bootstrapも使ってみたかったのでいれてみた

• コンテンツの作成

main.jsでbootstrapをインポートし、利用できるようにする。

twitterapp/src/main.js

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

「Twitterでログイン」ボタンがあるだけのシンプルなページを作る。ボタンをクリックすると、前回作成したAPIを利用してRequest Tokenを取得し、それを使ってTwitterの認証APIにアクセスするようにした。

twitterapp/src/App.vue

<template>
  <div id="app">
    <button class="btn btn-primary" @click="login()">Twitterでログイン</button>
  </div>
</template>

<script>
export default {
  methods: {
    login () {
      // request_tokenの取得
      fetch('<Request Token取得APIのURI>', {method:"POST"})
    .then( response => {
      return response.text()
    })
    .then( auth_token => {
      // 取得したrequest_tokenを使ってTwitterの認証画面に遷移
      window.location.href = 'https://api.twitter.com/oauth/authorize?' + auth_token
    })
    .catch( () => {
    });
  }}
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• ローカルでサーバを稼働しアプリの動作を確認する

ローカルでサーバを実行して今回作成したアプリが正しく動作するか確認をする

$ npm run serve

サーバの起動に成功すると以下のようなメッセージが出る。

  App running at:
  - Local: http://localhost:8080/
  - Network: http://xxx.xxx.xxx.xxx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

上記に表示された「http://localhost:8080/」にアクセスすると以下のように表示される。

「Twitterでログイン」ボタンをクリックすると以下のようにTwitterへのアクセス許可を求める画面が表示される。（Twitterに未ログインの場合は、その前にTwitterへのログイン画面が表示される。）

作成したアプリをS3で公開した記事を公開しました。

前回までの投稿は以下
Twitter APIを使って自動でTweetする(1)
Twitter APIを使って自動でTweetする(2)