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

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

---

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

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

- [Vue.jsをvue-cliを使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)

---

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

- node.jsのインストール（以下のサイトを参考にインストールする）
[【Node.js入門】各OS別のインストール方法まとめ](https://www.sejuku.net/blog/72545)

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

```shell

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


```

- コンテンツの作成

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

```javascript: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にアクセスするようにした。

```javascript: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>
```

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

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

```shell

$ npm run serve
```

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

```shell
  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/」にアクセスすると以下のように表示される。


|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/6b67c0ca-8931-5e79-cc26-addea114e48e.jpeg)
|:-:

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

<img width="521" alt="screen2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407848/d1bd2548-ee2d-746c-cea2-6ccd05554f45.jpeg">

[作成したアプリをS3で公開した記事](https://qiita.com/jnakanaka1/items/6c18aef2a64b0b20fd67)を公開しました。

前回までの投稿は以下
[Twitter APIを使って自動でTweetする(1)](https://qiita.com/jnakanaka1/items/bf4f450bd9dd3bd5005f)
[Twitter APIを使って自動でTweetする(2)](https://qiita.com/jnakanaka1/items/3b8fbedb14e1a8dcf406)