はじめに
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" ;
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を利用したいと思います。
今回は以上で終わりです。ありがとうございました。