Meteor + Blaze で匿名質問サービスをつくろう：第2夜 Twitter ログインの実装

[Meteor + Blaze で匿名質問サービスをつくろう：第1夜 準備と環境構築](https://qiita.com/plageoj/items/e9d5d9d5e24d54fa1319) より続き。

# Meteor アプリに Twitter ログインを実装する
実はこれ、驚くほど簡単なのです。はじめましょう。

## パッケージの導入
`accounts-***` というパッケージを追加すると、*** に相当する SNS のログイン
機能を追加できます。

```bash
$ meteor add accounts-ui

Changes to your project's package version selections:

accounts-base          added, version 1.4.0
accounts-ui            added, version 1.2.0
accounts-ui-unstyled   added, version 1.3.0
ddp-rate-limiter       added, version 1.0.7
less                   added, version 2.7.11
localstorage           added, version 1.2.0
rate-limit             added, version 1.0.8
reactive-dict          added, version 1.2.0
service-configuration  added, version 1.0.11
session                added, version 1.1.7


accounts-ui: Simple templates to add login widgets to an app

$ meteor add accounts-twitter

Changes to your project's package version selections:

accounts-oauth    added, version 1.1.15
accounts-twitter  added, version 1.4.0
oauth             added, version 1.2.0
oauth1            added, version 1.2.0
twitter-oauth     added, version 1.2.0


accounts-twitter: Login service for Twitter accounts
```

`accounts-ui` は、`accounts-***` で使う UI をまとめたものです。
この代わりに `useraccounts` パッケージを使うと、UI を自分で作ることもできます。
詳しくはこちら: [Users and Accounts | Meteor Guide](https://guide.meteor.com/accounts.html#useraccounts)

他にどんなパッケージがあるかは、 [AtmosphereJS で検索](https://atmospherejs.com/?q=accounts)してみればわかります。

## UI の変更
まずはサーバーを起動しましょう。

```bash
$ meteor run
[[[[[ C:\Users\YOUR_NAME\Documents\project\queuestion ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/
   Type Control-C twice to stop.
```

この状態で、[localhost:3000](http://localhost:3000/) にアクセスします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/116845/db755394-28f3-d673-677a-811a96d4a65f.png)

歓迎されましたね！あなたの予想に反して、このページが見えていますか？

このファイルは `client/main.html` にあります。
適当なエディタで開いてください。

そして、`<body>` 以下を変更します。
ついでに、2つある `<template>` も削除してしまいましょう。

```html:client/main.html
<head>
    <title>queuestion</title>
</head>

<body>
    {{> loginButtons}}
</body>
```

ファイルを保存すると、Meteor のホットコードプッシュが働いて、自動的に
ブラウザがリロードされます。Gulp 要らずなわけです。

## OAuth の設定

[Twitter not configured] というボタンが表示されましたか？

もし、No login services configured と表示されるようであれば、アドブロックを
無効にしてみてください。
それでもだめなようなら、パッケージが正常に追加されているか確認してください。

で、このボタンを押すと、こう言われました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/116845/56c029fd-6506-a705-9d72-7aad85e389df.png)

これから、Twitter のアプリ連携を設定しますが、コード上でやるか、GUI の
パッケージをインストールしろよと言ってきています。GUI で設定しましょう。

```bash
$ meteor add twitter-config-ui

Changes to your project's package version selections:

twitter-config-ui  added, version 1.0.0


twitter-config-ui: Blaze configuration templates for Twitter OAuth.
```

さきほどのボタンが、[Configure Twitter Login] に変わります。
押すと、アプリ設定のインストラクションがありますので、これに従ってアプリを登録しましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/116845/9a9d2c07-6576-4201-de80-d6dbc66a6726.png)

[apps.twitter.com](https://apps.twitter.com/app/new) へアクセスし、必要事項を入力していきます。
名前は `Queuestion`、Webサイトは第1夜へのリンク(サービスを公開したら変えます)、
コールバックURLはダイアログに表示されている、指定のものを使います。

API キーと API シークレットを入力して [Save Configuration] を押すと
赤いボタンが青く変化するはずです。

## テスト

この青い [Sign in with Twitter] ボタンを押すとポップアップが立ち上がり……

![image.png](https://qiita-image-store.s3.amazonaws.com/0/116845/23b78440-971a-cde9-cb42-8b0f6d79d3c5.png)

[Authorize app] を押すと元の画面に戻って……

![image.png](https://qiita-image-store.s3.amazonaws.com/0/116845/e9099ec7-8d5d-b617-9bde-5b0700504d3f.png)

テスト用に使ったアカウントの表示名がばれてしまいますw
が、これでログインが完了しました。

ご覧の通りコードをほとんど書いてないのですが、一応現時点でのソースを。
[GitHubへ](https://github.com/plageoj/queuestion/tree/3df37a753b5d95add1d2fa66a7009dbb302f6b04)

第3夜では、ルーティングを追加しましょう。SPA として形を整えていきます。