Windows Phoneアプリケーション開発入門

第40回Facebook C# SDKを使ってみよう!(1)

はじめに

Windows Phoneは、ソーシャルネットワーキングサービス(以後、SNS)方面を強化したOSです。しかし複数のサービスにシンプルに対応するために、各サービス単位でみるとサポートされていない機能が多々あります。

Windows Phone OS 7.1で標準APIとして提供されている機能は、ShareLinkTaskクラスとShareStatusTaskクラスを使ったステータスの共有とウェブサイトへのリンクの共有のみです。

今回はSNSの代表格でもあるFacebookの機能を利用するためのライブラリ「Facebook C# SDK」の導入と認証についてご紹介します。今回はサンプルコードを用意していますので、どうぞご参照ください。

Facebookのアプリケーション登録

FacebookのAPIを使用するには、まずFacebook側でアプリケーションの登録が必要です。

Facebook開発者サイトを開くと、ログインを求められる場合がありますのでログインしてください。既にログインした状態であれば、下図のようなダイアログが表示されます。⁠許可する]をクリックしてください。

画像

右上に表示されている[新しいアプリケーションを作成]をクリックします。

画像

新しいアプリケーションの登録ダイアログが表示されるので、⁠App Display Name」の欄に使用したいアプリケーションの名前を登録してください。利用規約を読んだうえで、⁠I agree to the Facebook Platform Policies」にチェックをつけて[続行]をクリックします。ここでは⁠ch3cooh_test⁠というアプリ名を付けたこととします。

画像

次に基本設定画面が表示されるので、App ID(アプリケーションキー)とApp Secret(シークレットキー)のキーを控えておいてください。FacebookのAPIを使用する際に、このアプリケーションキーとシークレットキーの二つが必要となります。

画像

Windows PhoneアプリケーションとFacebookの連携を行うために、左側に表示されているメニューから詳細設定を選択します。

画像

アプリケーションキーとシークレットキーを使ってユーザー認証を行うと、アクセストークンがサーバーから返されます。このアクセストークンがFacebook APIを使用するのに必要になります。

認証自体はWindows Phoneアプリケーションで行うのですが、サーバーからアプリケーションに対してアクセストークンを返すようにあらかじめ設定しておく必要があります。App Typeの設定を「Navite/Desktop」に変更します。

その他項目に関しても下図を参照して頂いて、必要に応じて変更しておいてください。

画像

以上でFacebookへのアプリケーション登録準備は完了です。

Facebook C# SDKの導入

さて、ここからがWindows Phoneアプリケーション側のお話になります。

「Facebook C# SDK」は、Facebookとクライアント間でのOAuth認証やウォールへのステータスやリンクの投稿、友達リストの取得など、さまざまな機能を簡単に扱えるようにしたSDKです。

ここでは別段取り上げませんが、同じマネージコードを利用しているASP.NET MVCやデスクトップWindowsのWPFでも同じ使い勝手でこのSDKが利用できるようです。

右にダウンロードページへのリンクがありますので、ビルド済みのアセンブリファイル一式をダウンロードします。執筆時点の最新ビルドはv5.3.2でしたので、使用方法についてはこのバージョン基準にて合わせています。

画像

アセンブリファイルはzip形式で提供されていますので、任意のフォルダに解凍しておきます。解凍するとWindows Phone向けのビルドが「sl3-wp」フォルダに格納されています。使用するのは下記の3ファイルです。

  • Facebook.dll
  • Facebook.pdb
  • Facebook.xml

後ほど、これらのファイルを自分のプロジェクトのフォルダに移動して、参照の追加をおこなっておいてください。

ユーザー認証は、ユーザー自身のFacebookへのログインと、今から作成するWindows Phoneアプリケーションを使ってFacebook APIを利用することに関しての許可をもらって、初めてアクセストークンが発行されます。

この認証の一連のやりとりはWebBrowserコントロールで実施する必要があるので、画面(MainPage.xaml)にはWebBrowserコントロールを用意しています。また、認証の最後にJavaScriptでアクセストークンを含んだURLへ遷移します。必ずWebBrowserコントロールのIsScriptEnabledプロパティを有効にしておくのを忘れないでください。

プロジェクトを新規に作成しましょう。プロジェクト名は「FacebookTest」とします。

XAML

Facebookのログインに必要なのはウェブブラウザだけですので、Navigatedイベントハンドラの定義と、IsScriptEnabledプロパティをTrueに設定します。

  <phone:WebBrowser Name="webBrowser" Navigated="webBrowser_Navigated" Grid.ColumnSpan="2" IsScriptEnabled="True" />

取得したアクセストークンやログインしたユーザー名を表示させるTextBlockも準備しておきます。ユーザー名を表示するためのTextBlockやApplicationBarIconButtonに関しては次回使用します。

<phone:PhoneApplicationPage 
    x:Class="FacebookTest.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="Portrait" Orientation="Portrait" 
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="SOFTBUILD" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="FacebookTest" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.329*"/>
                <ColumnDefinition Width="0.671*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.8*"/>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="0.1*"/>
            </Grid.RowDefinitions>
            <phone:WebBrowser Name="webBrowser" Navigated="webBrowser_Navigated" Grid.ColumnSpan="2" IsScriptEnabled="True" />
            <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="AccessToken" d:LayoutOverrides="Width" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <TextBlock Grid.Row="2" TextWrapping="Wrap" Text="Name" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <TextBlock x:Name="textAccessToken" HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" Margin="8,0,0,0" Grid.Column="1"/>
            <TextBlock x:Name="textName" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" VerticalAlignment="Center" Margin="8,0,0,0" Grid.Column="1"/>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.share.rest.png" Text="Update Statues"/>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.upload.rest.png" Text="Upload"/> 
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

以上で、XAML側の定義は完了です。

C#

引き続き、プログラム側の紹介をしていきます。

画面への突入時に呼ばれるOnNavigatedToメソッドにて、Facebook C# SDKの認証用のFacebookOAuthClientクラスのインスタンスの生成と、WebBrowserコントロールに渡すログイン用のURLを作成しています。

下記のコード内にstring型の変数ApplicationIDとApplicationSecretを用意していますので、Facebook のアプリケーション登録にて取得したアプリケーションキー(App ID)とシークレットキー(App Secret)をそれぞれ設定してください。

using System.Collections.Generic;
using System.Diagnostics;
using System.Windows.Navigation;
using Facebook;
using Microsoft.Phone.Controls;

namespace FacebookTest {
    public partial class MainPage : PhoneApplicationPage {
        public MainPage() {
            InitializeComponent();
        }

        // アプリケーション キー
        private readonly string ApplicationID = "取得したアプリキー";
        private readonly string ApplicationSecret = "取得したシークレットキー";
        // アクセストークンを保持する
        string accessToken = "";

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) {
            var oauthClient = new FacebookOAuthClient { AppId = ApplicationID };
            var prams = new Dictionary<string, object>();
            prams["response_type"] = "code";
            prams["scope"] = "user_about_me,user_photos,offline_access";

            // 認証用のページURLを取得
            var url = oauthClient.GetLoginUrl(prams);

            // 認証ページへ遷移
            webBrowser.Navigate(url);
        }

先ほどの2つの正しいキーを設定し、アプリケーションを起動させるとログイン画面が表示されます。

画像

通常時にFacebookにアクセスする時のメールアドレスとパスワードを入力して、ログインボタンをクリックします。

画像

ユーザーのログインが完了後、このアプリケーションからFacebookへアクセスしてもよいか?の画面に切り替わります。アクセスの許可をクリックすると、セキュリティコード付きのURLの画面へ遷移します。

FacebookOAuthResult.TryParseメソッドにe.Uriを渡して、現在WebBrowserコントロールで表示されているページのURLにOAuthのレスポンスコードを含んでいるか確認を行います。FacebookOAuthResult.ExchangeCodeForAccessTokenAsyncメソッドのパラメータにレスポンスコードを指定して、アクセストークンの取得を要求します。

        private void webBrowser_Navigated(object sender, NavigationEventArgs e) {
            Debug.WriteLine("webBrowser_Navigated: {0}", e.Uri);

            FacebookOAuthResult oauthResult;
            if (!FacebookOAuthResult.TryParse(e.Uri, out oauthResult) || !oauthResult.IsSuccess) {
                return;
            }

            var oauthClient = new FacebookOAuthClient { AppId = ApplicationID };
            oauthClient.AppSecret = ApplicationSecret;
            var code = oauthResult.Code;

            // アクセストークンを要求(非同期実行)
            oauthClient.ExchangeCodeForAccessTokenCompleted += oauthClient_ExchangeCodeForAccessTokenCompleted;
            oauthClient.ExchangeCodeForAccessTokenAsync(code);
        }

アクセストークンの取得処理が、非同期にて実行されます。サーバーから返ってきたデータをe.GetResultDataメソッドで取得して、IDictionary<string, object>にキャストします。

"access_token"のキーでアクセストークンが取得できるので、下記コードではそのままアクセストークンを表示させるようにしています。

        // アクセストークンを取得
        void oauthClient_ExchangeCodeForAccessTokenCompleted(object sender, FacebookApiEventArgs e) {
            var result = e.GetResultData() as IDictionary<string, object>;
            if (result == null) return;

            accessToken = (string)result["access_token"];

            Dispatcher.BeginInvoke(() => {
                textAccessToken.Text = accessToken;
            });
        }
    }
}

おわりに

今回はFacebookでのアプリケーション登録から、ユーザー認証とアクセストークンを取得するまでをご紹介させて頂きました。

次回はアクセストークンを使ってFacebookのAPIを利用したいと思います。

今回は以上で終わりです。ありがとうございました。

おすすめ記事

記事・ニュース一覧