More Related Content Similar to Windows PhoneアプリをSNSとつなげよう Similar to Windows PhoneアプリをSNSとつなげよう (20) More from junichi anno (20) 3. Agenda
1. はじめに
2. Facebook との連携
3. AppFabric ACS との連携（Google を例に）
4. まとめ
3
5. 認証と認可を実装する目的
でも個人情報を
管理したくない
認証により
アプリケーションの利用者を特定したい
開 認可により
発
者 ユーザー情報（氏名やメアド等）を再利用したい
情報を発信したい
他の利用者にアプリケーションの存在を知らしめたい
利 ちまちまと個人情報を入力したくない
用
者 アプリの仲間を増やしたい
5
6. 登場人物と相関図
サービスの利用者
アプリを使いたい人
サービス
（Facebook, Google 等）
使
い
た
い
サービスに保存されて
いる個人情報
個人情報にアクセス
したいアプリ
6
8. Facebook C# SDK
http://facebooksdk.codeplex.com/
（2011年10月26日現在） V5.2.1 stable, V5.3 beta
V5.3.1 beta
こちらをダウンロー
ド
8
9. Facebook.dll の準備
• FacebookCSharpSDKSourceFacebook-WP7.sln を開く
• OSのバージョンを「Windows Phone 7.1」に変更してビルド
サンプルコードもバージョンに注意！
9
10. サンプルプロジェクト ~ CS-WP7
やることはこれだけ！
1. Facebook にアプリ登録をし、AppID と AppSecret を取得する
2. FacebookCSharpSDKSamplesCS-WP7.sln を開く
3. 事前に作成した Facebook.dll を参照に追加
4. OSのバージョンを「Windows Phone 7.1」に変更
5. AppID と AppSecret をソースにセットして実行
MainPage.xaml FacebookLogin.xaml FacebookInfo.xaml
10
11. Facebook ログイン画面の違い
m.facebook.com
通常（www.facebook.com） または
www.facebook.com?Display=Touch
11
16. Facebook ～ OAuth 2.0 Desktop Apps フロー
http://www.facebook.com/
browse
control
response_type=code
r
type=user_agent
scope=～
client_id=～
アプリ利用開始 redirect_uri=～
display=touch
LOGIN /dialog/oauth/?～
認証画面表示 /login.php
/login.php
認可画面表示 /dialog/
permissions.request?
/dialog/
permissions.request
16
17. SELECT uid,pic_square FROM user WHERE uid
IN (SELECT uid2 FROM friend WHERE
アクセストークン
uid1=me()) 認可コード /connect/
login_success.html#
有効期限 Access_Token=～
&expires_in=～
&Code=～
graph.facebook.com
JSONデータ解析 JSONデータ
17
18. サンプルコードの概要～ FacebookLoginPage.xaml.cs
リダイレクト先のURLに「認可コードとアクセストークン」が入ってくるまでルー
プ リダイレクトによって
webBrowser1.Navigate(_loginUrl); ナビゲートされるたびに呼び出される
private void webBrowser1_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
FacebookOAuthResult oauthResult; ナビゲート先の URL をパースし
て、”access_token” と
if (FacebookOAuthResult.TryParse(e.Uri, out oauthResult)) “Code” が含まれていたら True
{
if (oauthResult.IsSuccess)
{
・
・
・
}
}
}
18
20. user_about_me で得られる情報
{"id":"721589565","name":"Junichi
Anno","first_name":"Junichi","last_name":"Anno","link":"http://www.facebook.com/profile.php?id=721589565","ho
metown":{"id":"112749468740724","name":"Utsunomiya-
shi, Tochigi, Japan"},"location":{"id":"108279402527734","name":"Oyama-
shi, Tochigi, Japan"},"bio":"u65e5u672cu30deu30a4u30afu30edu30bdu30d5u30c8u3067u30a8u30d0u30f
3u30b8u30a7u30eau30b9u30c8u3092u3084u3063u3066u307eu3059u3002u3069u3046u305eu3088u
308du3057u304fu304au9858u3044u3044u305fu3057u307eu3059u3002","work":[{"employer":{"id":"205284
38720","name":"Microsoft"},"position":{"id":"170883902926313","name":"u30a8u30d0u30f3u30b8u30a7u30ea
u30b9u30c8"},"start_date":"2007-04","end_date":"0000-
00"},{"employer":{"id":"141176979227741","name":"u5bccu58ebu901a"},"start_date":"1991-
04","end_date":"2007-
04"},{"employer":{"id":"184905041529652","name":"u65e5u672cu30deu30a4u30afu30edu30bdu30d5u30c8"
}}],"favorite_athletes":[{"id":"175405739162732","name":"u3044u307eu305bu3093"}],"education":[{"school":{"id":
"111803675504357","name":"u5b87u90fdu5baeu9ad8u7b49u5b66u6821"},"year":{"id":"136666673036069","n
ame":"1987"},"type":"High School"},{"school":{"id":"113467718663306","name":"Universitu00e4t
Utsunomiya"},"year":{"id":"145037408840681","name":"1991"},"concentration":[{"id":"159430837444492","name":"
u4e2du5b66u6821u6559u54e1u990au6210u8ab2u7a0bu7406u79d1"}],"type":"College"}],"gender":"male","t
imezone":9,"locale":"ja_JP","languages":[{"id":"109549852396760","name":"Japanese"}],"verified":true,"updated_ti
me":"2011-10-27T11:20:06+0000"}
20
22. （TIPS）プロファイル写真を使いたい
ユーザーの ID（基本情報に含まれる） がわかれば写真へのアクセスは簡
単
（例）https://graph.facebook.com/721589565/picture
picProfile.Source =
PicProfil
new BitmapImage(new
e Uri(string.Format("https://graph.facebook.com/{0
}/picture", _me["id"])));
22
25. ACS の用途と目的
サーバーアプリを複数の Idp に対応させる
サーバーアプリは ACS だけを意識すればよい IdP
Windows Live
Google
AccessToken
Yahoo!
（SWT）
Facebook
Request OpenID
Token AD FS 2.0
変換
RESTful Web Service
（例） 信頼
得点ボード Windows Azure AppFabric ACS
25
26. 今回は IdP セレクターとしてのみ活用
IdP
Windows Live
Google
AccessToken
Yahoo!
（SWT）
Facebook
Request OpenID
Token AD FS 2.0
変換
Windows Azure AppFabric ACS
26
27. 準備
• Silverlight 用フェデレーションライブラリ
• SL.Phone.Federation.dll
• AppFabric ACS を設定
• 使用する Identity プロバイダー
• アプリケーション（証明書利用者）
• 変換ルール
• Facebook にアプリ登録（Facebook を使用する場合）
27
30. AppFabric ACS 側の定義
• 名前空間の作成
• アプリケーションが信頼する ID プロバイダーの登録
• アプリケーションの登録
• ACS は Windows Phone を意識しない
• 今回は架空のアプリを登録
• 規則グループの登録
30
39. コーディング～App.xaml
<Application
x:Class="WP_Login.App"
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:fed="clr-
namespace:SL.Phone.Federation.Utilities;assembly=SL.Phone.Federation"
xmlns:system="clr-namespace:System;assembly=mscorlib"
>
<!--アプリケーション リソース-->
<Application.Resources>
<fed:RequestSecurityTokenResponseStore x:Key="rstrStore" />
<system:String x:Key="acsNamespace">tfwpseminar</system:String>
<!-- system:String x:Key="realm">uri:wpcloudapp_sample</system:String -->
<system:String x:Key="realm">https://tf.com/</system:String>
</Application.Resources>
39
40. コーディング～Mainpage.xaml
<phone:PhoneApplicationPage
x:Class="WP_Login.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="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
xmlns:fed="clr-
namespace:SL.Phone.Federation.Controls;assembly=SL.Phone.Federation"
>
40
41. コーディング～Mainpage.xaml
<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource
PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 追加コンテンツをここに入力します-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<fed:AccessControlServiceSignIn Height="480"
x:Name="SignInControl"
Realm="{StaticResource realm}"
ServiceNamespace="{StaticResource acsNamespace}"
RequestSecurityTokenResponseStore="{StaticResource rstrStore}" />
</Grid>
</Grid>
41
42. コーディング～Mainpage.xaml.cs ①
public MainPage()
{
InitializeComponent();
SignInControl.RequestSecurityTokenResponseCompleted += new
EventHandler<SL.Phone.Federation.Controls.RequestSecurityTokenResponseComp
letedEventArgs>(SignInControl_RequestSecurityTokenResponseCompleted);
SignInControl.GetSecurityToken();
}
42
43. コーディング～Mainpage.xaml.cs ②
void SignInControl_RequestSecurityTokenResponseCompleted(object sender,
SL.Phone.Federation.Controls.RequestSecurityTokenResponseCompletedEventArg
s e)
{
MessageBox.Show(e.RequestSecurityTokenResponse.securityToken.ToString());
if (e.Error == null)
{
if (NavigationService.CanGoBack)
{ 通常はWEBアプリケーションからリダイレ
クトされてくるので戻り先がある
NavigationService.GoBack();
}
} else {
MessageBox.Show(e.Error.Message.ToString());
}
}
43
45. SWT の中身
• ACS から返された SWT は
SL.Phone.Federation.Controls.RequestSecurityTokenResponseCompletedEventArgs
から取得できる
• ACS から発行された SWT は、HTTP Authorization ヘッダーに格納して REST Service に POST する
http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fcla
ims%2femailaddress=junichianno%40gmail.com&http%3a%2f%2fschemas.x
mlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fname=Junichi+Ann
o&http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2f
claims%2fnameidentifier=https%3a%2f%2fwww.google.com%2faccounts%2f
o8%2fid%3fid%3d■■■■■■■■■■■■■■■■■&http%3a%2f%2fschemas.microsof
t.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=
Google&Audience=https%3a%2f%2ftf.com%2f&ExpiresOn=1319738718&Iss
uer=https%3a%2f%2ftfwpseminar.accesscontrol.windows.net%2f&HMACSH
A256=14hISLpXM8G2aOejqLx4Uvy0cfb7ULtPmtObqLumeJQ%3d
45
48. まとめ
• Form 認証から脱却しましょう
• ユーザーの個人情報は確実に廃棄しましょう
• OAuth への注目度は高まります（っていうか「高い」です）
• SNS が企業インフラの一部となる可能性があります
• SNS と 社内 IdP との連携が求められます
48
