Herokuで作るFacebookアプリ

第4回 Facebookとの認証の連携

この記事を読むのに必要な時間:およそ 3 分

続いて,この認証処理を行うSessionsController(app/controllers/sessions_controller.rb)を見ていきます。

class SessionsController < ApplicationController
  def create
    auth = request.env["omniauth.auth"]
    user = User.find_by_provider_and_uid(auth["provider"], auth["uid"]) || User.create_with_omniauth(auth)
    session[:user_id] = user.id
    redirect_to root_url, :notice => "Signed in!"
  end

  def destroy
    reset_session
    redirect_to root_url, :notice => "Sigined out!"
  end
end

request.env[⁠omniauth.auth⁠]の中にFacebookで認証を行った結果のデータが格納されてこのコントローラが呼び出されます。このデータから既存のユーザであればログイン,まだ利用していないユーザであれば新規登録してログインするようになっています。

最後に,認証処理を始めるリンクはレイアウトファイル( app/views/layouts/application.haml )にあります。

.right
  - if current_user
    = "Welcome, #{current_user.name} !"
    = link_to "Sign Out", signout_path
  - else
    = link_to "Sign in with facebook", "/auth/facebook"
.left
  Manga Dojo
.clear_both

認証処理を始めるには,⁠Sigin in with facebook⁠のリンクのように⁠/auth/facebook⁠というURLにアクセスすることがomniauthのルールになっています。

このように実装するとomniauthを利用した外部認証が利用できます。上記で重要な部分を解説しましたが,このコミットには,上記以外のFacebookから取得したユーザのデータを表示する部分・ログアウト処理などの実装もありますので,詳細はコミットログを見ていただければと思います。

動作を確認する

実際にローカルで動作させてテストしてみましょう。上のレポジトリからソースをコピーするか,コードを参考にしながら自分で書いてみて,サービスを起動してみましょう。起動させる前に環境変数に FACEBOOK_APP_ID, FACEBOOK_APP_SECRET をアプリの設定を上で説明したように設定できていることを確認してサーバを起動してください。

ブラウザでhttp://localhost:3000/にアクセスしてみましょう。アプリが起動していると思います。画面右上の⁠Sigin in with facebook⁠のリンクをクリックしてみてください。Facebookの画面に移動して認証を許可するかどうかの画面が表示されると思います。

図2 Facebookの認証を許可する

図2 Facebookの認証を許可する

この画面で,⁠許可する」ボタンを押すと画面右上にあなたの名前が表示されるはずです。このような動きが正しく動作すればFacebookでの認証は成功です。もし,この画面が出ないようであれば,Facebookアプリの設定項目の Web Site > Site URL の項目にhttp://localhost:3000/が設定されているか,環境変数として App id と App Secret が設定されているかなど確認してください。

さらに,Facebookの中で動作する(Canvasと呼びます)状態で動きを確認してみましょう。アプリ設定画面の Facebook Integration > Canvas Page の項目を確認して下さい。先ほどアプリのIDを設定していただいたと思います。ここに表示されているようなURL(http://apps.facebook.com/(アプリのID)/)にアクセスしてみてください。Facebookの画面の中に先ほどの画面が表示されていると思います。同じように画面右上のログインボタンからログインすると名前が表示されると思います。

Heroku上にデプロイした環境で動作を確認する

続いて,Heroku上にデプロイしたもので動作確認を行いましょう。まずは,先程は開発環境用にアプリ登録しましたが,Herokuで動作するようのものも新しく追加しましょう。

Web site
Site URL => http://manga-dojo.heroku.com/
Facebook Integration
Canvas Page => mangadojo (アプリのIDとなる文字列を入力してください。)
Canvas URL => http://manga-dojo.heroku.com/
Canvas Type => IFrame
Advanced
サンドボックスモード => 無効にする

Herokuへのデプロイは前々回のHeorkuを解説したのとほぼ同じ処理を行います。

heroku create manga-dojo # アプリ名(manga-dojoの部分)は変更してください
git push heroku master
heroku rake db:migrate

さらに今回は,環境変数の設定を行います。以下のようなコマンドを発行します。

heroku config:add FACEBOOK_APP_ID=xxxx
heroku config:add FACEBOOK_APP_SECRET=xxxx

IDとSecretは,Heroku環境用に登録したアプリ設定画面から取得したものを設定してください。

これで,Heroku上で動作するはずです。Herokuに直接アクセスのパターンと,FacebookのCanvasで動作するパターンを試してみてください。ローカル環境でテストしたときと同様に動作するはずです。

まとめ

Facebookアプリとしての認証部分のコードをひと通り動かし,解説しました。アプリを作る上で必要な認証部分を学べたかと思います。皆さんもアイデアを考えてまずはここからスタートしてみてください。

今回は,認証部分について一気に解説したのでちょっと早足な感じになってしまいました。次回は,FacebookのAPIとはどのように利用されているのかなどを含めAPIについて詳しく見ていきたいと思います。

著者プロフィール

松村章弘(まつむらあきひろ,ハンドルネーム:mat_aki)

SonicGarden プログラマー。

1984年生まれ。社会人1年目からRuby on Railsのみで開発を続け現在4年目。Webサービスの企画・運営・プログラミングまですべてをこなす。世界で利用されるWebサービスを創ることを目標にしている。現在は youRoom の開発を行っている。

mat_akiの日記:http://d.hatena.ne.jp/mat_aki/

Twitter:http://twitter.com/mat_aki