Facebook App事始め

Winストアアプリ

まずFacebook Developerに登録
http://developers.facebook.com/appsにアクセスし、Developerとして登録する、電話/SMSによる認証、アンケートなどがあるが滞りなく進める。

"+Create New App"ボタンを押す


App IDを後でプロジェクト内で使用するので、メモメモ。

Visual Studio 2013を起動し、新規プロジェクトを作成

Visual C# -> Windows Store Appで名前は適当

Facebook APIをインストール

"Tools" -> "Library Package Manager" -> "Package Manager Console"を開き、以下の二つをインストール

呪文は以下の通り。



Install-Package Facebook

Install-Package Facebook.Client -pre

FacebookApp IDやセッション情報などを保持するプロパティを追加

"App.xaml.css"のAppクラスに以下のメンバを追加。



public static readonly string FacebookAppID = "(上記のApp ID)";

internal static string AccessToken = String.Empty; // セッションのアクセストークンを保持する

internal static string FacebookID = String.Empty; // ログインするユーザのユーザIDを保持する

public static bool isAuthenticated = false;

public static FacebookSessionClient FBSessionClient = new FacebookSessionClient(FacebookAppID); //
ここで、先の"+Create New App"で生成された"App ID"を使用する。
名前が解決できないと文句を言われるので、


using Facebook.Clinet;
を追記する。

MainPageにFacebookのログイン認証をするためのUIコンポネント、実装を追加

"MainPage.xaml"にボタンを一個貼り付け、"Click"のイベントハンドラを作る。
ボタンのイベントハンドラ一覧から、"Click"の欄に適当なメソッド名("btnFacebookLogin")を入力し、リターンを押せば、"MainPage.xaml.cs"側にテンプレートが生成される。
"MainPage.xaml.cs"のMainPageクラスに



private FacebookSession FBsession;
とメンバを追加。
認証用のメソッド、上記のボタンのイベントハンドラを以下のように実装。


private async Task Authenticated()

{

    string ErrMesage = String.Empty;

    try

    {

        FBSession = await App.FBSessionClient.LoginAsync("user_about_me, read_stream");

        App.AccessToken = FBSession.AccessToken;

        App.FacebookID = FBSession.FacebookId;

        Frame.Navigate(typeof(DefaultPage));

    }

    catch(InvalidOperationException e)

    {

        ErrMessage = "Login Failure:" + e.Message;

        MessageDialog msgDialog = new MessageDialog(ErrMessage);

        msgDialog.ShowAsync();

    }

}
async private void btnFacebookLogin(object sender, RoutedEventArgs e)

{

    if(!App.isAuthenticated)

    {

        App.isAuthenticated = true;

        await Autheticated();

    }

}
またも、名前が解決できないと文句を言われるので、


using System.Threading.Tasks;

using Facebook.Clinet;

using Windows.UI.Popups;
を追記する。

ログイン成功後に遷移する、DefaultPageを作成する

このままでは、上記のAuthenticatedメソッド内のDefaultPageがないよエラーなので、DefaultPageを作成する。
"Solution Explorer"で、現在のプロジェクトを右クリックし、"Add" -> "New Item"を選択する。
次に、"Basic Page"を選択して、名前を"DefaultPage.xaml"とする。
次にこの"DefaultPage.xaml"にTextBlockとImageを1つずつ貼り付ける、名前は適当("tbUserName"、"imageUserPhoto")。
ロード時に情報を更新する以下のメソッドを実装。



private async void loadUserInfo()

{

    FacebookClient fbClient = new FacebookClient(App.AccessToken);

    dynamic parameters = new ExpandoObject();

    parameters.access_token = App.AccessToken;

    parameters.fields = "name";

    string UserProfilePictureURL =

        string.Format(

            "https://graph.facebook.com/{0}/picture?type={1}&access_token={2}",

            App.FacebookID,

            "normal",

            fbClient.AccessToken);

    //

    dynamic result = await fbClinet.GetTaskAsync("me", parameters);

    //

    this.tbUserName.Text = result.name;

    this.imgUserPhoto.Source = new BitmapImage(new Uri(UserProfilePictureURL));

}
この作ったメソッドを、コンストラクタ(DefalutPage())の最後に呼び出す。
またも、名前が解決できないと文句を言われるので、


using System.Threading.Tasks;

using Facebook;

using System.Dynamic;
を追記する。


さぁ、いよいよ動作する、はずだ。
ビルドしてデバッグを開始すると、例のバッテンマークのページが開いた後、ボタンが一個だけ表示されたページが表示される。
このボタンを押すと、あら不思議、よく見かけるFacebookのログイン認証画面が表示される。
認証がうまくいけば、新たなページに移動し、自分のユーザ名プロファイルの写真が表示される。