Yesodチュートリアルのサンプル（Yosog）には予め認証（auth）のコードが含まれており、/auth/loginでGoogleEmailとBrowserIdによる認証が可能になっています。今回、そのチュートリアルサンプルをFacebookのOAuth認証とつなげることができたのでその手順とコードを紹介しておきます。
Facebookの設定
FacebookのOAuth認証を利用するには、認証を利用するアプリケーションをFacebookのdevサイトに予め登録しておく必要があります。手順は以下の通りです。
- アプリを登録してApp IDとSecretを得る
- facebookの開発者サイトにログイン
- 「アプリ」-「 新しいアプリを作成する」で必要項目を入力
- ログイン後のページ遷移ができるようにサイトURLを設定しておく
- 新たに登録したアプリの設定ページで「基本データ」タブを開く
- [Add Platform]を選択し一覧から「ウェブサイト」を選択
- 表示された設定項目中の「サイトURL」に起動するweb appのURLを登録
- ローカルで起動したサーバーを用いて動作確認する際いは以下のURLを設定しておく
- http://localhost:3000/
チュートリアルのコードの変更
まず
ここを参考にチュートリアルサンプルが動作する環境を整えてください。http://localhost:3000/で"Hello"画面が出ていればOKです。http://localhost:3000/auth/loginにアクセスすると、GoogleEmail/BrowseIdによる認証画面が表示されます。この状態で以下の変更を加えるとFacebook認証を利用することができます。
- Foundation.hsの変更
- importに以下のモジュールを追加
以下の3行を追加します。
import Yesod.Facebook (YesodFacebook(..))
import Yesod.Auth.Facebook.ServerSide
import Facebook (Credentials(..))
- authPluginsをFacebookに書き換える
既存のBrowserId, GoogleEmailの宣言をFacebookのものに書き換えます。
authPlugins _ = [authBrowserId def, authGoogleEmail]
authPlugins _ = [authFacebook ["email"]]
- Facebook.Credentialの追加
以下のコードを追加します。前述のFacebookの設定によって得られるApp IDとApp Secretをそれぞれ、Facebook.Credentialの第２、第３引数に指定します。
instance YesodFacebook App where
fbCredentials _ = Facebook.Credentials "Yesod FB Auth Sample" "012345678901234" "aaaaaaaabbbbbbbbccccccccdddddddd"
fbHttpManager = httpManager
- Yosog.cabalに依存ライブラリを追加する
Yosog.cabalをエディタで開き、build-dependsに以下の3つのライブラリを追加します。
, yesod-fb
, yesod-auth-fb
, fb
- HomeRの変更（省略可能）
Handler/Home.hsのgetHomeRのコードを以下のように編集することで、http://localhost:3000/の挙動をAuthentication and AuthorizationのAuthenticate Meサンプルと同じ挙動にすることができます。
import Yesod.Auth
getHomeR :: Handler Html
getHomeR = do
maid <- lookupSession "_ID"
defaultLayout
[whamlet|
<p>Your current auth ID: #{show maid}
$maybe _ <- maid
<p>
<a href=@{AuthR LogoutR}>Logout
$nothing
<p>
<a href=@{AuthR LoginR}>Go to the login page
|]
これでFacebookのOAuth認証が利用可能になります。ブラウザを起動してhttp://localhost:3000/auth/loginにアクセスしてください。ブラウザ上に"
Login with Facebook"というリンクが表示されるはずです。そのリンクをクリックするとFacebookのサイトにジャンプしてアプリケーションの認証が促されます。そこでOKを選択すると、ログイン状態に遷移します。
動作確認に用いたコードはgithubにアップしました。
参考にしたサイト：
