【WP for ITPro】SignInButton Control を使用して Windows Phone アプリから Windows Live で認証するサンプル
この投稿は以下の記事を参考にしています。
|
前回は Windows Phone アプリから Windows Live で認証するサンプルをご紹介しました。
恥ずかしながら、その後 Live SDK（プレビュー版）で SignInButton Control が提供されていることに気づきました。こちらを使用したほうがはるかに実装が楽なので、今回は SignInButton Control を使用したサンプルをご紹介します。
Signin Control には OAuth 2.0 のハンドラーが実装されているため、前回の投稿のように ブラウザーコントロールを使用してリダイレクトを独自にハンドリングする必要がありません。そのため、大変シンプルにコードを実装することができます。超楽です。
コードに興味のない IT Pro の皆さんは、「こんな実装が可能なんだ」ということだけでも把握していただけると幸いです。
1. SDK のダウンロード
Microsoft Connect のサイトで、Live SDK ベータ版をダウンロードしてください。
https://connect.microsoft.com/site1226
ダウンロードしたファイルには LiveSDK.msi が含まれているので、こいつをインストールします。
2. Windows Live 開発者サイトでアプリケーションを登録
以下のサイトに移動してアプリケーション登録を行い、Client ID を取得します。
https://manage.dev.live.com/Applications/Index?wa=wsignin1.0
登録の手順を簡単に書いておきます。
My Apps サイトで画面の右側にある「Create Application」をクリックしてください。
アプリケーション名を「適当に」入力し、言語として「Japanese」を選択します。ここで入力したアプリケーション名は、ユーザーにアクセス認可を受ける際に表示されるので注意してください。入力したら「I accept」をクリックします。
登録が完了すると、以下のように Client ID が表示されます。これは、あとでアプリケーションに埋め込む必要があるので控えておいてください。Client ID を控えたら、「Appication Setting Page」をクリックます。
Settings ページが表示されるので、「API Settings」タブをクリックし、 「Mobile client app」を 「yes」 に設定してください。必ず「Save」をクリックして保存しましょう。
以上で設定は完了です。
3．サンプルコードのダウンロード
コーディングは非常にシンプルなのですが、サンプルを用意しました。いかからダウンロードしてください。
サンプルコードを展開したら、LiveConAuthWithSignInControl.sln を Visual Studio 2010 で開いてください。Visual Studio をお持ちでない ITPRO の方は、こちらから Visual Studio 2010 Express for Windows Phone をダウンロードすることができます
４．参照設定の追加
※サンプルコードには既に参照設定が追加されているので改めて設定する必要がありません
先にインストールして Live SDK に含まれている Signin Contorlを使用するには、2つのライブラリを参照に追加する必要があります。
ソリューションエクルプローラーの「参照設定」を右クリックし、「参照の追加」を選択してください。
.NET タブに「Microsoft.Live.Controls」と「Microsoft.Live」という2つのコンポーネントがあるので、これらを選択して「OK」をクリックします。
これで、Live SDK を使用することができるようになりました。
次に、Signin Control を使えるようにします。
画面右側にある「ツールボックス」を開き、「全般」を右クリックして「アイテムの選択」をクリックします。
以下のようにツールボックスアイテムの選択画面が開くので、「Windows Phone コンポーネント」タブから、「SigninButton」を選択してください。こいつが、OAuth 2.0 をハンドリングしてくれるコントロールです。使わなきゃ損です。
ソリューションエクスプローラーで、「Mainpage.xaml」をダブルクリックし、デザイン画面を開いてください。この状態で、「ツールボックス」の「全般」に以下のように「SignInButton」が表示されていれば設定は完了です。
5. ソースに Client ID を埋め込む
Client ID や RedirectUri、Scopes 等は、SignInButton のプロパティとして設定します。
ダウンロードしたサンプルソースの Mainpage.xaml をダブルクリックして開いてください。
以下のような画面が表示されるはずです。
ここで、「サインイン」と書かれたボタンがありますが、これが「SignInButton コントロール」です。こいつのプロパティを表示すると以下のように ClientID や Scope が用意されていることがわかります。2. Windows Live 開発者サイトでアプリケーションを登録 で取得した Client ID を ClientID プロパティに転記してください。
サンプルコードでは Scopes に規定値を入れていませんが、実行時に MainPage() の中で埋め込んでいます。
以上で準備は完了です。
6. 実行
F5 キーを押してサンプルソースを実行しましょう。
はじめに以下の画面が表示されるので、Sign in ボタンをタップしてください。
はじめに、Windows Live のサインイン画面にリダイレクトされます。メールアドレスとパスワードを入力してサインインしてください。
認証が正しく行われると、次に、アプリケーションに対する認可画面が表示されます。よければ「はい」をクリックして、アプリケーションに対して自分自身の情報へのアクセスを許可します。
なお、認可画面に表示されている各種権限は、SingInButton コントロールの Scopes に指定した値に依存しています。今回は、MainPage.xaml.cs ファイルの MainPage() で、以下のように指定しています。Scopes には「wl.skydrive_update」も含まれており、このアプリケーションは SkyDrive へのアクセスも想定していることがわかります（サンプルの中では何もやっていませんが）。
public MainPage() { InitializeComponent(); signInButton1.Scopes = "wl.skydrive_update,wl.signin,wl.basic,wl.emails,wl.contacts_birthday,wl.work_profile"; //,wl.offline_access"; } 認可が行われると、アプリケーションにはアクセストークンが発行され、こいつを使用してユーザーの情報にアクセスすることができます。SignInButton コントロールではこのあたりの処理が自動的に行われるため、非常に楽です。
以下の画面は Windows Live から取得してきたユーザーのプロファイルを表示したところです。
個人的に、このサンプルで一番苦労したのがリストボックスを2列表示にする部分です（お恥ずかしい）。サインインの実装は、SignInButtonコントロールのドラッグ&ドロップだけなので、1秒で完了します。
