【WP for ITPro】Facebook C# SDK Windows Phone サンプルを使用してみる

すっかり秋なのですが、いまだ半袖の安納です。全然寒くありません...なんかイキモノとしてやばいでしょうか?

10月26日 17:00 からの UX-TV では、ここで投稿した記事をベースに Windows Phone アプリへの認証の仕組みの実装についてお話しします。AppFabric ACS との連携についても具体的なサンプルコードを用いてお話しする予定です。

さて、Facebook のお話です。

SNS がインフラの一部となる日は、もう少し先のことかもしれませんが、IT Pro の皆さんの中にはその可能性を模索されている方も多いことでしょう。

そんなエッジな IT Pro に覚えておいていただきたいのが、Codeplex で公開されている Facebook C# SDK です。これを使うと、WEBアプリだけでなく、Windows アプリ、そしてもちろん Windows Phone アプリも Facebook と簡単につなげることができます。

Facebook C# SDK

2011年10月24日時点の最新安定板は 5.2.1 ですが、10月17日付で 5.3 ベータ版も提供されています。

ということで、さっそく試してみます。

準備

以下の URL から「Source Codes and Samples」をダウンロードしておいてください。今回は最新のベータ版 5.3 を使いました。

なお、「Assemblies Only」で提供されている Facebook.dll は、私の環境ではうまく動きませんでした。なので、Source Codes で提供されているソースコードからコンパイルして使用することにします。

Facebook C# SDK - Download: 5.3

image

ZIP ファイルで提供されているので、どこかのフォルダにまとめて解凍しておきましょう。

Windows Phone 用 Facebook.dll をコンパイルする

ダウンロードした ZIP ファイルを解凍すると、FacebookCSharpSDK フォルダ配下が以下のような構成になっているはずです。

image

Source フォルダの配下に Facebook-WP7.sln というソリューションファイルが含まれているので、Visual Studio 2010(Express も可)で開きましょう。

画面右側にある「ソリューション エクスプローラー」から「Facebook-WP7」を右クリックして「プロパティ」を開きます。

image

画面左に表示されているアプリケーションタブで、Windows Phone OS のバージョンを「Windows Phone OS 7.1」に変更しましょう。「元に戻せなくなるよ!」と警告されますが、かまいません。だって、 IS12T は 7.1 ですから。

image

この状態で、再度「ソリューション エクスプローラー」の「Facebook-WP7」を右クリックして「ビルド」を実行してください。

これで、新しい Facebook.dll が、以下のパスに作成されているはずです。

\Facebook SDK\Bin\Debug\sl3-wp

このプロジェクトには用はありませんので閉じてしまって結構です。Facebook.dll の場所だけ覚えておいてください。

Facebook にアプリ登録する

Facebook と連携するには、Facebook 側でアプリケーション登録をしておく必要があります。アプリケーション登録をすることにより、これから開発する Windows Phone アプリが、Facebook から信頼され、情報交換をできるようにするためです。

はじめて Facebook の開発者サイトを開く方は、以下のようなダイアログが表示されるので「許可する」をクリックしてください。

image

開発者サイトが開くと、画面の右上に「+新しいアプリケーションを作成」というボタンが表示されるのでクリックします。

image

「New App」ダイアログが開くので、アプリケーションの識別名を適当に入力し、「同意する」にチェックを入れ、「続行」してください。

image

途中、セキュリティチェックなんかがあって、最終的に以下の画面が表示されます。個々に表示されている、「App ID」と「App Secret」がとても重要ですので、外部に漏れないようにしてください。

image

そして、さらに重要な設定を行います。画面の左側から「詳細設定」を選択し、以下のように変更してください。アプリにもよるのですが、SDK に含まれているサンプルアプリケーションは Windows Phone のネイティブアプリです。なので、「ウェブ」が選択されているとFacebookからのセキュリティトークンを受け取ることができません。さらに、「Enhanced Auth Dialog」も「無効」に設定します。

image

以上でFacebook側の準備は完了です。App ID と App Secret は後から使うので控えておきましょう。

SDK に含まれているサンプルアプリを、ほんのちょっとだけ編集

今度は、冒頭でダウンロードしたファイルの中に「samples」というフォルダがあるので、その配下の CS-WP7.sln を Visual Studio で開きます。

はじめに先ほどコンパイルした Facebook.dll を読み込ませます。まずは、ソリューション エクスプローラーの「参照設定」にある「Facebook」を削除してしまってください。他の参照を削除しないように気を付けましょう。

image

次に「参照設定」を右クリックし、「参照の追加」を選択します。

「参照の追加」ダイアログが開いたら、「参照」タブで、先ほど作成した Facebook.dll を選択し「OK」します。

image

これで参照の設定が修正され、あたらしい Facebook.dll が使用されます。

次に、Facebook から取得した App ID と App Secret を設定します。

ソリューション エクスプローラーから「FacebookLoginPage.xaml.cs」という名前のソースファイルをダブルクリックして開きます。

image

すると、以下のような画面が開くので、AppId と AppSecret に値を入れてください。各行の最後には「セミコロン(;)」も必要なのでお忘れなく。

image

以上で設定は完了です。

サンプルアプリを実行

ということで、サンプルアプリを実行しましょう。

F5キーを押すか、ソリューション エクスプローラーのプロジェクト名(CS-WP7)を右クリックして「デバッグ」-「新しいインスタンスを開始」を選択してください。

以下の画面が表示されるはずですので、「Login To Facebook」をタップしてください。

image

次に、Facebook のログオン画面が表示されるので、メアドとパスワードを入力して「ログイン」をクリックします。ちなみに、Windows Phone Emurator を使用している方は、[Functionキー] +[↑] でキーボード入力に切り替えることができます。

image

トークンがうまく取得できれば、以下の画面が表示されます。これは、このアプリケーション(自分が作っているアプリ)が Facebook 上の個人情報にアクセスしてもよいかどうかを問い合わせる画面です。もしアプリケーションを一般に公開した場合には、アプリケーションの利用者ごとにこの画面が表示されることになり、この画面で「許可する」をクリックしたユーザーのみが、アプリケーションに対して個人情報を渡すことができます。

image

「許可する」と、以下の画面が表示され、アプリケーションからFacebookにアクセスできるようになります。

image

どうですか?正しく動きましたか?

このサンプルの良いところは、とてもシンプルなところです。

このサンプルを応用して、自分自身のアプリをFacebook対応にすることができます。

インフラ担当のエンジニアの方にとっては少々敷居が高いかもしれませんが、一緒に仕事をしている開発者に教えてあげると開発コストを下げられるかもしれません。是非チャレンジしてみてください!