読者です 読者をやめる 読者になる 読者になる

Perlがくしゅう帳(Rubyも)

プログラミングの勉強会の参加記録や学んだことなど。 twitter ID : @tomcha_で活動しています。 最近は主にPerl関連の勉強会やコミュニティに参加しています。移転前のブログはこちら->http://ruby.doorblog.jp/

SinatraとOmnioauthとbootstrapでTwitter認証ログインのページを作ってみた

Ruby

よくある、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ブランチを作ってしまったけれど、よくよく考えてみれば不要だしコンフリクトの原因になっていた。


    とりあえず出来上がったひな型がこちら

    これが

f:id:tomcha0079:20141103195254p:plain


こうなって

f:id:tomcha0079:20141103195301p:plain


ログイン認証出来ました。初めてログインするユーザーの場合、DBにIDとユーザーネームが登録されます。

f:id:tomcha0079:20141103195311p:plain


sign out はこんな感じ。

f:id:tomcha0079:20141103195315p:plain



bundle exec rackupで起動して、ローカルのブラウザ2つ(chromefirefox)から接続して、それぞれ別のアカウントでログイン出来ました。 やりたかった部分は出来たと思うので、これを利用して作りたかったアプリに発展させて行く予定です。 あと、レスポンシブも未対応だった、、、

疑問点

  • 同一ブラウザアプリの別タブでアクセスすると、新たにログインを求められる。別リクエスト(別セッション)?なので当然といえば当然なのだけれど、cookieは同じサイトだから1つ?だとすれば、きちんとcookieを見てから別セッションなのか同一セッションなのかを処理する部分をきっちり作る必要があるのかも。
  • signout機能部分、sinatraのsession配列変数をnilにしているだけだか、それで良いのだろうか?上の疑問と同様に、cookieに対する処理まで書かないとダメなのかも。