JavaScript
Node.js
Twitter
Meteor
BlazeJS

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

Meteor + Blaze で匿名質問サービスをつくろう:第1夜 準備と環境構築 より続き。

Meteor アプリに Twitter ログインを実装する

実はこれ、驚くほど簡単なのです。はじめましょう。

パッケージの導入

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

$ 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

他にどんなパッケージがあるかは、 AtmosphereJS で検索してみればわかります。

UI の変更

まずはサーバーを起動しましょう。

$ 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 にアクセスします。

image.png

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

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

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

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

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

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

OAuth の設定

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

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

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

image.png

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

$ 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

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

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

テスト

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

image.png

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

image.png

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

ご覧の通りコードをほとんど書いてないのですが、一応現時点でのソースを。
GitHubへ

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