Herokuで作るFacebookアプリ

第4回 Facebookとの認証の連携

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

はじめに

前回まででHerokuとFacebookアプリの概要を学んでいただけたかと思います。今回からは本格的に実装に入っていきたいと思います。まずは,アプリケーションの基本となる認証部分を実装します。Facebookアプリの登録方法からRailsのプラグインを用いて簡単に認証連携を行う方法,Heroku上でのデプロイまで紹介します。

Facebookアプリの認証

Facebookアプリの作成にあたり,必要な部分は認証部分になります。以下のHerokuのドキュメントにそのあたりの解説記事があります。英語で,サンプルがSinatraで記載されているドキュメントになっています。

このHerokuのドキュメントを参考に,SinatraでなくRails3を利用したサンプルを作成します。

今回紹介するFacebookの認証は,OAuthを用いた方式になっています。この認証方式は,Twitterなどでも利用されているオープンな仕様です。ここでは,omniauthというgemを利用して実装するので詳しい仕様は理解せずに実装できますが,利用する上で仕様を理解することも重要だと思いますので,別途学んでいただくことをお勧めします。

Facebookへのアプリの登録

Facebookのアプリとして動作するアプリを作るためには,アプリをFacebookに登録する作業が必要になります。

こちらのページからアプリの登録ができます。その際にFacebookのデベロッパー登録が必要です。デベロッパーとしてアプリを登録するために,アカウントの認証をクレジットカードなどで行ってください。

今後,開発していく上でアプリは開発環境用・本番環境用の2つ登録しておくと便利です。このように分けておくことで登録内容を変更する必要なく開発を継続できます。まずは,開発用を登録しましょう。先程の画面の右上に「Set up New App」というリンクがありますので,そちらからアプリを登録してください。アプリ名などを入力していくと,途中画像の認証などがありますが,指示通りに入力すれば簡単に登録できるはずです。これらの項目は後から変更も可能ですので,まずは登録してみてください。

開発用に設定する上でのポイントは以下の点です。

Web site
  Site url => http://localhost:3000/
Facebook Integration
  Canvas Page => mangadojodev (アプリのIDとなる文字列を入力してください。)
  Canvas URL => http://localhost:3000/
  Canvas Type => IFrame
Advanced
  サンドボックスモード => 有効にする

図1 各種設定を行う

図1 各種設定を行う

Facebookで認証するアプリを作る

それでは実際にRailsプロジェクトを立ち上げて,Facebookアプリとして認証をやってみましょう。ポイントは,omniauthという外部サービスを利用した認証用のライブラリを利用する部分です。このgemは外部とのやりとりを全てカバーしてくれるので利用する側は,簡単なコードを書くだけで複雑な外部との認証連携などを実装できます。

まずは,今回サンプルとして作成したアプリの認証の動きを確認してもらうのが良いかと思います。もちろんHerokuを利用してアプリを動かしているので,以下のURLから触ってみてください。

IFrameの画面の右上に今回認証を実装したリンクがあります。リンクをクリックして動作の流れを掴んでみてください。

上記のアプリのコードは,Githubのレポジトリにアップロードされています。

全体像は,こちらを見ていただくことにしてここからは認証を行うためのポイントを紹介していきます。omniauthを利用して,Facebookとの認証連携を行っている変更のコミットは以下のものになります。

こちらの差分を細かく見ていきましょう。

まずは,Gemfileでoa-oauthを利用するように以下のコードを追加します。

gem 'oa-oauth'

そして,config/initializers/oa-oauth.rbというファイルを以下のように作成します。

require 'omniauth/oauth'

app_id = ENV["FACEBOOK_APP_ID"]
app_secret = ENV["FACEBOOK_APP_SECRET"]
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook , app_id , app_secret , { :scope => 'email, status_update, publish_stream' }
end

このようにしてRackのmiddlewareとしてFacebook認証を行う設定を書きます。環境変数として,FACEBOOK_APP_IDとFACEBOOK_APP_SECRETをアプリの設定画面のFacebook Integrationのページに表示されているアプリケーションIDとApplication Secretの項目を設定するようなコードになっています。

次に,config/routes.rbでルーティングを以下のように定義します。callbackの含まれるURLはFacebookとの認証が終わった際に戻ってくるURLです。こちらで認証処理などを行います。

match "/auth/:provider/callback" => "sessions#create"
match "/signout" => "sessions#destroy", :as => :signout

著者プロフィール

松村章弘(まつむらあきひろ,ハンドルネーム: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

コメント

  • つまずきました

    「ブラウザでhttp://localhost:3000/にアクセスしてみましょう」とありますが、auth/facebook/が必要です。

    あと、heroku rake db::migrateは今回では必要ないと思います。

    Commented : #2  shinriyo (2011/05/21, 19:56)

  • ファイル名の記載

    gitを見ましたが、application.htmlではなくてapplication.html.hamになってました。

    Commented : #1  shinriyo (2011/05/21, 16:01)

コメントの記入