SinatraとOmnioauthとbootstrapでTwitter認証ログインのページを作ってみた
よくある、twitterのアカウントを使ってログインする系のwebアプリのひな型っぽいのを作ってみました。 自分の理解を深めるために作りましたが、多分、Railsとか使えば、設定を簡単に書くだけで実現できると思います。
使った主なモジュールなど
sinatra
- サーバーへのリクエストを制御するコントローラー。今までは単なるアクセスされたuriからページへの振り分けくらいしか使ってなかったが、今回はセッションとか使って知識が少し深まった。
omnioauth
- twitterだけではなく、facebookとか色々なOAuth認証にも対応している様ですが、今回はtwitterに絞りました。
- OAuth認証は、リクエストの手数と帰ってくる値がわかれば、そんなにややこしくない感じがした。
activerecord
ログインユーザーの管理DB部分はactiverecordとSQLite3を使ってデータベース化。webアプリを実際に作るときは、twitterのID番号をキーとして、コンテンツのデータと紐付ければユーザー毎のコンテンツも作れるのではないかと。
bootstrap
- それっぽいメニューバーの部分はbootstrapを使って再現。bootswatchのページのソースを見ながら抜粋して書いてみました。
作って考えた事、学んだこと
- sinatraでは、アプリケーション全体共通のインスタンス変数が使えない。リクエスト毎にインスタンスが生成される模様。1ログインユーザー毎に共有したいデータ(ユーザー名やtwitterのID番号等)は、セッションという機能を使ってsession配列に格納すれば良い感じ。これだと、毎回twitterのログイン認証が求められる仕様になるが、いわゆる「ログインを保存」的な振る舞いにしようとするならば、おそらくcookieの保存期限、cookieのデータ参照等を使えばなんとかなりそう。
- 一人で作るアプリなら、Githubにはmasterブランチだけ置いておき、ローカルにfetch(pull)したリポジトリでdevelopブランチを作って開発&マージする。最初、Github上でdevelopブランチを作ってしまったけれど、よくよく考えてみれば不要だしコンフリクトの原因になっていた。
とりあえず出来上がったひな型がこちら。
これが
こうなって
ログイン認証出来ました。初めてログインするユーザーの場合、DBにIDとユーザーネームが登録されます。
sign out はこんな感じ。
bundle exec rackupで起動して、ローカルのブラウザ２つ（chromeとfirefox）から接続して、それぞれ別のアカウントでログイン出来ました。
やりたかった部分は出来たと思うので、これを利用して作りたかったアプリに発展させて行く予定です。
あと、レスポンシブも未対応だった、、、
