[haskell][yesod] YesodでFacebookのOAuth認証とつなぐ手順

Yesodチュートリアルのサンプル（Yosog）には予め認証（auth）のコードが含まれており、/auth/loginでGoogleEmailとBrowserIdによる認証が可能になっています。今回、そのチュートリアルサンプルをFacebookのOAuth認証とつなげることができたのでその手順とコードを紹介しておきます。

Facebookの設定

FacebookのOAuth認証を利用するには、認証を利用するアプリケーションをFacebookのdevサイトに予め登録しておく必要があります。手順は以下の通りです。

1. アプリを登録してApp IDとSecretを得る
1. facebookの開発者サイトにログイン
2. 「アプリ」-「 新しいアプリを作成する」で必要項目を入力
2. ログイン後のページ遷移ができるようにサイトURLを設定しておく
1. 新たに登録したアプリの設定ページで「基本データ」タブを開く
2. [Add Platform]を選択し一覧から「ウェブサイト」を選択
3. 表示された設定項目中の「サイトURL」に起動するweb appのURLを登録
• ローカルで起動したサーバーを用いて動作確認する際いは以下のURLを設定しておく
• http://localhost:3000/

チュートリアルのコードの変更

まずここを参考にチュートリアルサンプルが動作する環境を整えてください。http://localhost:3000/で"Hello"画面が出ていればOKです。http://localhost:3000/auth/loginにアクセスすると、GoogleEmail/BrowseIdによる認証画面が表示されます。この状態で以下の変更を加えるとFacebook認証を利用することができます。

1. Foundation.hsの変更
1. importに以下のモジュールを追加
以下の3行を追加します。

import Yesod.Facebook (YesodFacebook(..))
import Yesod.Auth.Facebook.ServerSide
import Facebook (Credentials(..))

2. authPluginsをFacebookに書き換える
既存のBrowserId, GoogleEmailの宣言をFacebookのものに書き換えます。

    authPlugins _ = [authBrowserId def, authGoogleEmail]
    authPlugins _ = [authFacebook ["email"]]

3. Facebook.Credentialの追加
以下のコードを追加します。前述のFacebookの設定によって得られるApp IDとApp Secretをそれぞれ、Facebook.Credentialの第２、第３引数に指定します。

instance YesodFacebook App where
    fbCredentials _ = Facebook.Credentials "Yesod FB Auth Sample" "012345678901234" "aaaaaaaabbbbbbbbccccccccdddddddd"
    fbHttpManager = httpManager

2. Yosog.cabalに依存ライブラリを追加する
Yosog.cabalをエディタで開き、build-dependsに以下の3つのライブラリを追加します。

                 , yesod-fb
                 , yesod-auth-fb
                 , fb

3. 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にアップしました。

• https://github.com/kurokawh/Yosog/tree/facebook

参考にしたサイト：

• http://socialmedia.project0884.com/facebook/create_app.php
• App IDとSecretの取得手順
• Authentication and Authorization :: Yesod Web Framework Book