Windows Phone ではじめるゲーム開発入門Part IIIアプリケーションをソーシャルネットワークとつなげる日本マイクロソフト株式会社エバンジェリスト安納 順一(あんのう じゅんいち)http://blogs.technet.com/...
セッションの内容 自作アプリケーションに以下の機能を実装する方法について解説します 1. ソーシャルネットワークへのログイン機能 2. ソーシャルネットワークへの投稿機能 3. Identity Provider のセレクター機能       ...
Agenda    1. はじめに    2. Facebook との連携    3. AppFabric ACS との連携(Google を例に)    4. まとめ                                      ...
はじめに
認証と認可を実装する目的                            でも個人情報を                            管理したくない    認証により     アプリケーションの利用者を特定したい開   認可に...
登場人物と相関図                             サービスの利用者                             アプリを使いたい人       サービス (Facebook, Google 等)       ...
Facebook との連携
Facebook C# SDK  http://facebooksdk.codeplex.com/    (2011年10月26日現在) V5.2.1 stable, V5.3 beta                             ...
Facebook.dll の準備 • FacebookCSharpSDKSourceFacebook-WP7.sln を開く • OSのバージョンを「Windows Phone 7.1」に変更してビルド    サンプルコードもバージョンに注意!...
サンプルプロジェクト ~ CS-WP7やることはこれだけ!1. Facebook にアプリ登録をし、AppID と AppSecret を取得する2. FacebookCSharpSDKSamplesCS-WP7.sln を開く3. 事前に作成...
Facebook ログイン画面の違い                                   m.facebook.com    通常(www.facebook.com)               または             ...
Facebook へのアプリ登録 ① https://developers.facebook.com/apps/                                         12
Facebook へのアプリ登録 ②                     13
Facebook へのアプリ登録 ③                     14
Facebook へのアプリ登録 ④                     15
Facebook ~ OAuth 2.0 Desktop Apps フロー                                                       http://www.facebook.com/      ...
SELECT uid,pic_square FROM user WHERE uidIN (SELECT uid2 FROM friend WHERE                                             アクセ...
サンプルコードの概要~ FacebookLoginPage.xaml.cs リダイレクト先のURLに「認可コードとアクセストークン」が入ってくるまでルー プ               リダイレクトによってwebBrowser1.Navigat...
Permission について https://developers.facebook.com/docs/reference/api/permissions/  • アプリケーションが「取得可能な情報」や「使用可能な操作」  • 利用者が「認可...
user_about_me で得られる情報{"id":"721589565","name":"JunichiAnno","first_name":"Junichi","last_name":"Anno","link":"http://www.f...
FQL(Facebook Query Language)  https://developers.facebook.com/docs/reference/fql/  サンプル  http://blogs.technet.com/b/junich...
(TIPS)プロファイル写真を使いたい ユーザーの ID(基本情報に含まれる) がわかれば写真へのアクセスは簡 単(例)https://graph.facebook.com/721589565/picture                  ...
(参考)許可したPermissionを解除するには                            23
Windows Azure AppFabric ACSと連携する                      ACS:Access Control Service
ACS の用途と目的サーバーアプリを複数の Idp に対応させるサーバーアプリは ACS だけを意識すればよい                                     IdP                           ...
今回は IdP セレクターとしてのみ活用                                              IdP                                         Windows Live...
準備 • Silverlight 用フェデレーションライブラリ    • SL.Phone.Federation.dll • AppFabric ACS を設定    • 使用する Identity プロバイダー    • アプリケーション(証...
SL.Phone.Federation.dll Windows Azure Toolkit for Windows Phone 7 v1.3.1 http://watwp.codeplex.com/  WindowsAzure   WATWin...
Facebook にアプリ登録する                    Facebookから見れば                      ACSはWEBアプリ          ACSに登録        ACSの名前空間        ...
AppFabric ACS 側の定義 • 名前空間の作成 • アプリケーションが信頼する ID プロバイダーの登録 • アプリケーションの登録    • ACS は Windows Phone を意識しない    • 今回は架空のアプリを登録 ...
ACS~名前空間の作成http://windows.azure.com/                            31
ACS~IDプロバイダーの追加(Google)                          32
ACS~IDプロバイダーの追加(Facebook)                        user_about_me は                             規定値                          ...
アプリケーションの登録①               適当な識別名               適当な URI               架空のURLだがトークンの               検証に使用する                 ...
アプリケーションの登録②    このアプリで使用するIdP         後述                    後述                         35
規則グループの作成②             36
規則グループの作成②             規定では、全てパスス                 ルー                          37
トークン署名キーの作成              作成した名前空間を選択                 生成ボタンをクリック                              38
コーディング~App.xaml <Application  x:Class="WP_Login.App"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  x...
コーディング~Mainpage.xaml<phone:PhoneApplicationPage  x:Class="WP_Login.MainPage"  xmlns="http://schemas.microsoft.com/winfx/20...
コーディング~Mainpage.xaml<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->  <Grid x:Name="LayoutRoot" Background="Transparent">...
コーディング~Mainpage.xaml.cs ① public MainPage()      {         InitializeComponent();        SignInControl.RequestSecurityToke...
コーディング~Mainpage.xaml.cs ② void SignInControl_RequestSecurityTokenResponseCompleted(object sender, SL.Phone.Federation.Cont...
実行例      44
SWT の中身•   ACS から返された SWT は    SL.Phone.Federation.Controls.RequestSecurityTokenResponseCompletedEventArgs    から取得できる•   A...
ACSで定義したクレームhttp://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress=junichianno@gmail.com ACSで定義したクレームhttp://sc...
まとめ
まとめ • Form 認証から脱却しましょう • ユーザーの個人情報は確実に廃棄しましょう • OAuth への注目度は高まります(っていうか「高い」です) • SNS が企業インフラの一部となる可能性があります • SNS と 社内 IdP ...
49
Upcoming SlideShare
Loading in …5
×

Windows PhoneアプリをSNSとつなげよう

3,166 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,166
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows PhoneアプリをSNSとつなげよう

  1. 1. Windows Phone ではじめるゲーム開発入門Part IIIアプリケーションをソーシャルネットワークとつなげる日本マイクロソフト株式会社エバンジェリスト安納 順一(あんのう じゅんいち)http://blogs.technet.com/junichia/
  2. 2. セッションの内容 自作アプリケーションに以下の機能を実装する方法について解説します 1. ソーシャルネットワークへのログイン機能 2. ソーシャルネットワークへの投稿機能 3. Identity Provider のセレクター機能 ログイン 投稿 IdP セレク ター 2
  3. 3. Agenda 1. はじめに 2. Facebook との連携 3. AppFabric ACS との連携(Google を例に) 4. まとめ 3
  4. 4. はじめに
  5. 5. 認証と認可を実装する目的 でも個人情報を 管理したくない 認証により  アプリケーションの利用者を特定したい開 認可により発者  ユーザー情報(氏名やメアド等)を再利用したい  情報を発信したい  他の利用者にアプリケーションの存在を知らしめたい利  ちまちまと個人情報を入力したくない用者  アプリの仲間を増やしたい 5
  6. 6. 登場人物と相関図 サービスの利用者 アプリを使いたい人 サービス (Facebook, Google 等) 使 い た い サービスに保存されて いる個人情報 個人情報にアクセス したいアプリ 6
  7. 7. Facebook との連携
  8. 8. Facebook C# SDK http://facebooksdk.codeplex.com/ (2011年10月26日現在) V5.2.1 stable, V5.3 beta V5.3.1 beta こちらをダウンロー ド 8
  9. 9. Facebook.dll の準備 • FacebookCSharpSDKSourceFacebook-WP7.sln を開く • OSのバージョンを「Windows Phone 7.1」に変更してビルド サンプルコードもバージョンに注意! 9
  10. 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. 11. Facebook ログイン画面の違い m.facebook.com 通常(www.facebook.com) または www.facebook.com?Display=Touch 11
  12. 12. Facebook へのアプリ登録 ① https://developers.facebook.com/apps/ 12
  13. 13. Facebook へのアプリ登録 ② 13
  14. 14. Facebook へのアプリ登録 ③ 14
  15. 15. Facebook へのアプリ登録 ④ 15
  16. 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. 17. SELECT uid,pic_square FROM user WHERE uidIN (SELECT uid2 FROM friend WHERE アクセストークンuid1=me()) 認可コード /connect/ login_success.html# 有効期限 Access_Token=~ &expires_in=~ &Code=~ graph.facebook.com JSONデータ解析 JSONデータ 17
  18. 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
  19. 19. Permission について https://developers.facebook.com/docs/reference/api/permissions/ • アプリケーションが「取得可能な情報」や「使用可能な操作」 • 利用者が「認可」しなければアクセスすることはできない user_about_me :ユーザーの基本情報 friend_about_me :他の人が私と共有した情報 mail :メールを送信 ・ ・ ・ 19
  20. 20. user_about_me で得られる情報{"id":"721589565","name":"JunichiAnno","first_name":"Junichi","last_name":"Anno","link":"http://www.facebook.com/profile.php?id=721589565","hometown":{"id":"112749468740724","name":"Utsunomiya-shi, Tochigi, Japan"},"location":{"id":"108279402527734","name":"Oyama-shi, Tochigi, Japan"},"bio":"u65e5u672cu30deu30a4u30afu30edu30bdu30d5u30c8u3067u30a8u30d0u30f3u30b8u30a7u30eau30b9u30c8u3092u3084u3063u3066u307eu3059u3002u3069u3046u305eu3088u308du3057u304fu304au9858u3044u3044u305fu3057u307eu3059u3002","work":[{"employer":{"id":"20528438720","name":"Microsoft"},"position":{"id":"170883902926313","name":"u30a8u30d0u30f3u30b8u30a7u30eau30b9u30c8"},"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","name":"1987"},"type":"High School"},{"school":{"id":"113467718663306","name":"Universitu00e4tUtsunomiya"},"year":{"id":"145037408840681","name":"1991"},"concentration":[{"id":"159430837444492","name":"u4e2du5b66u6821u6559u54e1u990au6210u8ab2u7a0bu7406u79d1"}],"type":"College"}],"gender":"male","timezone":9,"locale":"ja_JP","languages":[{"id":"109549852396760","name":"Japanese"}],"verified":true,"updated_time":"2011-10-27T11:20:06+0000"} 20
  21. 21. FQL(Facebook Query Language) https://developers.facebook.com/docs/reference/fql/ サンプル http://blogs.technet.com/b/junichia/ 21
  22. 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
  23. 23. (参考)許可したPermissionを解除するには 23
  24. 24. Windows Azure AppFabric ACSと連携する ACS:Access Control Service
  25. 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. 26. 今回は IdP セレクターとしてのみ活用 IdP Windows Live Google AccessToken Yahoo! (SWT) Facebook Request OpenID Token AD FS 2.0 変換 Windows Azure AppFabric ACS 26
  27. 27. 準備 • Silverlight 用フェデレーションライブラリ • SL.Phone.Federation.dll • AppFabric ACS を設定 • 使用する Identity プロバイダー • アプリケーション(証明書利用者) • 変換ルール • Facebook にアプリ登録(Facebook を使用する場合) 27
  28. 28. SL.Phone.Federation.dll Windows Azure Toolkit for Windows Phone 7 v1.3.1 http://watwp.codeplex.com/ WindowsAzure WATWindowsPhone.C# Binaries SL.Phone.Federation.dll 28
  29. 29. Facebook にアプリ登録する Facebookから見れば ACSはWEBアプリ ACSに登録 ACSの名前空間 29
  30. 30. AppFabric ACS 側の定義 • 名前空間の作成 • アプリケーションが信頼する ID プロバイダーの登録 • アプリケーションの登録 • ACS は Windows Phone を意識しない • 今回は架空のアプリを登録 • 規則グループの登録 30
  31. 31. ACS~名前空間の作成http://windows.azure.com/ 31
  32. 32. ACS~IDプロバイダーの追加(Google) 32
  33. 33. ACS~IDプロバイダーの追加(Facebook) user_about_me は 規定値 33
  34. 34. アプリケーションの登録① 適当な識別名 適当な URI 架空のURLだがトークンの 検証に使用する 34
  35. 35. アプリケーションの登録② このアプリで使用するIdP 後述 後述 35
  36. 36. 規則グループの作成② 36
  37. 37. 規則グループの作成② 規定では、全てパスス ルー 37
  38. 38. トークン署名キーの作成 作成した名前空間を選択 生成ボタンをクリック 38
  39. 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. 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. 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="{StaticResourcePhoneTextNormalStyle}"/> <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. 42. コーディング~Mainpage.xaml.cs ① public MainPage() { InitializeComponent(); SignInControl.RequestSecurityTokenResponseCompleted += new EventHandler<SL.Phone.Federation.Controls.RequestSecurityTokenResponseComp letedEventArgs>(SignInControl_RequestSecurityTokenResponseCompleted); SignInControl.GetSecurityToken(); } 42
  43. 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
  44. 44. 実行例 44
  45. 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
  46. 46. ACSで定義したクレームhttp://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress=junichianno@gmail.com ACSで定義したクレームhttp://schemas.xmlsoap.org/ws/2005/05/identity/claims/name=Junichi+Anno ACSで定義したクレームhttp://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier=https://www.google.com/accounts/o8/id:id:■■■■■■■■■■■■■■■■■ IDプロバイダーhttp://schemas.microsoft.com/accesscontrolservice/2010/07/claims/identityprovider=Google SWTの発行先Audience=https://tf.com/ SWTの有効期限ExpiresOn=1319738718 SWTの発行者Issuer=https://tfwpseminar.accesscontrol.windows.net/ 署名HMACSHA256=14hISLpXM8G2aOejqLx4Uvy0cfb7ULtPmtObqLumeJQ%3d 送付されたトークンが改ざんされていな いことを確認するため使用する 46
  47. 47. まとめ
  48. 48. まとめ • Form 認証から脱却しましょう • ユーザーの個人情報は確実に廃棄しましょう • OAuth への注目度は高まります(っていうか「高い」です) • SNS が企業インフラの一部となる可能性があります • SNS と 社内 IdP との連携が求められます 48
  49. 49. 49

×