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

Windows Phone ではじめるゲーム開発入門Part IIIアプリケーションをソーシャルネットワークとつなげる日本マイクロソフト株式会社エバンジェリスト安納順一（あんのうじゅんいち）http://blogs.technet.com/junichia/

セッションの内容自作アプリケーションに以下の機能を実装する方法について解説します 1. ソーシャルネットワークへのログイン機能 2. ソーシャルネットワークへの投稿機能 3. Identity Provider のセレクター機能ログイン投稿 IdP セレクター 2

Agenda 1. はじめに 2. Facebook との連携 3. AppFabric ACS との連携（Google を例に） 4. まとめ 3

はじめに

認証と認可を実装する目的でも個人情報を管理したくない認証により  アプリケーションの利用者を特定したい開認可により発者  ユーザー情報（氏名やメアド等）を再利用したい  情報を発信したい  他の利用者にアプリケーションの存在を知らしめたい利  ちまちまと個人情報を入力したくない用者  アプリの仲間を増やしたい 5

登場人物と相関図サービスの利用者アプリを使いたい人サービス（Facebook, Google 等）使いたいサービスに保存されている個人情報個人情報にアクセスしたいアプリ 6

Facebook との連携

Facebook C# SDK http://facebooksdk.codeplex.com/ （2011年10月26日現在） V5.2.1 stable, V5.3 beta V5.3.1 beta こちらをダウンロード 8

Facebook.dll の準備 • FacebookCSharpSDKSourceFacebook-WP7.sln を開く • OSのバージョンを「Windows Phone 7.1」に変更してビルドサンプルコードもバージョンに注意！ 9

サンプルプロジェクト ~ 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

Facebook ログイン画面の違い m.facebook.com 通常（www.facebook.com）または www.facebook.com?Display=Touch 11

Facebook へのアプリ登録 ① https://developers.facebook.com/apps/ 12

Facebook へのアプリ登録 ② 13

Facebook へのアプリ登録 ③ 14

Facebook へのアプリ登録 ④ 15

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

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

サンプルコードの概要～ 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

Permission について https://developers.facebook.com/docs/reference/api/permissions/ • アプリケーションが「取得可能な情報」や「使用可能な操作」 • 利用者が「認可」しなければアクセスすることはできない user_about_me ：ユーザーの基本情報 friend_about_me ：他の人が私と共有した情報 mail ：メールを送信・・・ 19

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

FQL（Facebook Query Language） https://developers.facebook.com/docs/reference/fql/ サンプル http://blogs.technet.com/b/junichia/ 21

（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

（参考）許可したPermissionを解除するには 23

Windows Azure AppFabric ACSと連携する ACS：Access Control Service

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

今回は IdP セレクターとしてのみ活用 IdP Windows Live Google AccessToken Yahoo! （SWT） Facebook Request OpenID Token AD FS 2.0 変換 Windows Azure AppFabric ACS 26

準備 • Silverlight 用フェデレーションライブラリ • SL.Phone.Federation.dll • AppFabric ACS を設定 • 使用する Identity プロバイダー • アプリケーション（証明書利用者） • 変換ルール • Facebook にアプリ登録（Facebook を使用する場合） 27

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

Facebook にアプリ登録する Facebookから見れば ACSはWEBアプリ ACSに登録 ACSの名前空間 29

AppFabric ACS 側の定義 • 名前空間の作成 • アプリケーションが信頼する ID プロバイダーの登録 • アプリケーションの登録 • ACS は Windows Phone を意識しない • 今回は架空のアプリを登録 • 規則グループの登録 30

ACS～名前空間の作成http://windows.azure.com/ 31

ACS～IDプロバイダーの追加（Google） 32

ACS～IDプロバイダーの追加（Facebook） user_about_me は規定値 33

アプリケーションの登録① 適当な識別名適当な URI 架空のURLだがトークンの検証に使用する 34

アプリケーションの登録② このアプリで使用するIdP 後述後述 35

規則グループの作成② 36

規則グループの作成② 規定では、全てパススルー 37

トークン署名キーの作成作成した名前空間を選択生成ボタンをクリック 38

コーディング～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">https://tf.com/</system:String></Application.Resources> 39

コーディング～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

コーディング～Mainpage.xaml <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>  <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>  <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

コーディング～Mainpage.xaml.cs ① public MainPage() { InitializeComponent(); SignInControl.RequestSecurityTokenResponseCompleted += new EventHandler<SL.Phone.Federation.Controls.RequestSecurityTokenResponseComp letedEventArgs>(SignInControl_RequestSecurityTokenResponseCompleted); SignInControl.GetSecurityToken(); } 42

コーディング～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

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

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

まとめ

まとめ • Form 認証から脱却しましょう • ユーザーの個人情報は確実に廃棄しましょう • OAuth への注目度は高まります（っていうか「高い」です） • SNS が企業インフラの一部となる可能性があります • SNS と社内 IdP との連携が求められます 48

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

by Junichi Anno on Oct 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

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