原水商店

先ほど投稿した Part 1 で Facebook 側の設定が完了しました。続いて、NuGet で FacebookWeb をインストールしたプロジェクトに、以下のコードを記載していきましょう。

最初に Web.config にある facebookSettings で、appID 、appSecret 、 canvasPage そして canvasUrl の 4 つの項目を入れていきます。appID と appSecret は Facebook 側で設定されている値をそのまま、それ以外は自分で設定している内容を記載します。

<facebookSettings appId="{appID}" appSecret="{appSecret}" canvasPage="http://apps.facebook.com/{appUrl}/" canvasUrl ="http://localhost:61436/" cancelUrlPath = "" />

続いて、default.aspx に Label を一つ配置します。今回はこんな感じのコードにしてみました。

<form id="form1" runat="server">
<div>
こんにちは <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> さん！
</div>
</form>

続いて default.aspx.cs には Page_Load() の中にコードを入れていきます。using  に Facebook 、Facebook.Web の 2 行を追加して、以下のコードを追加してできあがり。

protected void Page_Load(object sender, EventArgs e)
{
     CheckIfFacebookAppIsSetupCorrectly();

     var auth = new CanvasAuthorizer { Permissions = new[] { "user_about_me" } };

     if (auth.Authorize())
     {
         var fb = new FacebookWebClient();
         var result = (IDictionary<string, object>)fb.Get("/me");
         var name = (string)result["name"];
         Label1.Text = name;
     }
}

 private void CheckIfFacebookAppIsSetupCorrectly()
{
     bool isSetup = false;
     var settings = ConfigurationManager.GetSection("facebookSettings");
     if (settings != null)
     {
         var current = settings as IFacebookApplication;
         if (current.AppId != "{app id}" &&
             current.AppSecret != "{app secret}" &&
             current.CanvasPage != "http://apps.facebook.com/{fix path}/")
         {
             isSetup = true;
         }
     }

     if (!isSetup)
     {
         Response.Redirect("~/GettingStarted.aspx");
     }
}

これで設定は完了です。動作させてみましょう。

ということで、ログインをしたら名前が表示される、というシンプルな Facebook アプリが出来上がりました。

NuGet を 2 回に分けて紹介をしました。そして 2 回目にインストールしたのは、実は Facebook C# SDK として提供されているライブラリで、 http://facebooksdk.codeplex.com がプロジェクトのサイトになります。このまま一気に Facebook のアプリケーションとしての Hello World 的なものを作っていきます。

Part 1 ということで Facebook サイト側の設定を紹介します。というのも、Facebook アプリを作るためには、Facebook に開発者登録をする必要があります。今回は apps.facebook.com の配下で動くアプリケーションを作る形です。初回は本人認証ということで、電話番号認証 or クレジットカード認証が求められるので、どちらかで完了してください。

• http://www.facebook.com/developers/createapp.php

アプリケーション名には今回作るアプリケーションの名前を入れてください。アプリケーションを作るためには当然「同意」しないといけません。

セキュリティチェックで表示される読みにくい文字をクリアすれば、設定が追加されます。

設定を入れていきましょう。まずは、About の項目、ここにはアプリケーションのアイコンとか問い合わせ先など、アプリケーションに関する必要な項目を追加します。

Web Site には、今回連携をする Web ページのサイトの URL を記入します。開発中は localhost なども余裕で使えます（その環境だけですが）。

Facebook Integration には以下のように入れてみました。ちなみに、今回は Canvas Type としては IFrame を選択しています。

これで Facebook 側の準備が出来ました。次回は、Visual Studio 側に戻ってプログラミングをしましょう。