Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携

Windows 8 アプリ開発者ブログ

Windows 8 エンジニアリング チームが語る Windows 8 向け Metro スタイル アプリの開発

Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携

  • Comments 0

Windows 8 なら、クラウドを利用して、仕事でもプライベートでも、複数のデバイスからシームレスに作業できます。Microsoft アカウントを使って PC やデバイスにサインインし、SkyDrive のパーソナル ストレージを利用することで (詳細については、アプリ、ファイル、PC、デバイスをクラウドとつなぐ SkyDrive と Windows 8 を参照してください)、アプリ、設定、および個人ファイルにいつでもアクセスできます。開発するアプリでこのようなクラウド機能を利用するには、Metro スタイル アプリに Live SDK を統合します。

Live SDK には、Microsoft アカウントを使ったシングル サインオン (SSO) 機能をアプリに統合し、SkyDrive、Hotmail、および Consumer Preview 版の Messenger の情報にアプリからアクセスするためのコントロールと API のセットが含まれています。また、対応する Windows Phone 用の SDK (英語) もあり、同様の機能セットを提供しています。

Live SDK の作業の開始

まず、まだインストールが済んでいない場合は、Windows 8 Consumer PreviewVisual Studio 11 Beta、および Live SDK Developer Preview (英語) を PC にインストールする必要があります。次に、Live Connect のアプリ管理 (英語) サイトで、Metro スタイル アプリをマイクロソフトのクラウド サービスにアクセスするように構成します。

アプリを構成したら、Live SDK への参照を追加してください。Live SDK は、C#、JavaScript、および Visual Basic での開発に対応しています。Live SDK は、現時点では C++ をサポートしていませんが、C++ アプリから SkyDrive にアクセスする方法がわかる完全なコード サンプル "SkypadCpp" (英語) をダウンロードできます。

Live SDK をプロジェクトに追加するには、プロジェクトを右クリックして [Add Reference] (参照の追加)、[Extension SDKs] (拡張 SDK) の順にクリックし、Live SDK のエントリをクリックします。

JavaScript アプリでは、default.html に次のスクリプト参照を追加するだけです。

<script type="text/javascript" src="ms-appx:///LiveSDKHTML//js/wl.js"></script>

C# では、次の参照を追加します。

using Microsoft.Live;

Visual Basic では、次のインポート ステートメントを追加するだけです。

Imports Microsoft.Live

シングル サインオンと容易なサインインのパラドックス

アプリを Live SDK と統合して得られる主なメリットは、Microsoft アカウントによるシングル サインオン (SSO) を利用できることです。アプリの主な課題の 1 つとして、新しいアカウントへの登録や、アプリや Web サイトへのサインインを繰り返し求められることに、ユーザーがわずらわしさを感じることが挙げられます。しかし、アプリや Web サイトにサインインすることでユーザーが特定されて、ユーザー固有のニーズや動作に合わせてアプリをパーソナル化できるため、ユーザー エクスペリエンスは格段に向上します。この、ユーザー エクスペリエンスが大幅に向上するタスクが、ユーザーが難色を示すタスクでもあるという根本的な矛盾は、"容易なサインインのパラドックス" と呼ばれます。

Windows 8 では、マイクロソフトの Metro スタイル アプリと Web サイトの場合、ユーザーが Windows 8 PC に Microsoft アカウントを使用してサインインすることで、この矛盾が回避されます。People、メール、メッセージング (英語) など、マイクロソフトのアプリと、Hotmail など、マイクロソフトの Web サイトでは、Microsoft アカウントを利用して、ユーザーが PC にサインインした後は、これらのアプリや Web サイトでサインインを実行しなくても済むようにしています。その結果、クリックなしのサインイン エクスペリエンスが実現されます。

皆さんが開発するアプリや Web サイトにも、Live SDK を使用することで、同様に Microsoft アカウントを使用したクリックなしのサインイン エクスペリエンス機能を実装できます。ただし、1 度だけ確認として、アプリがユーザーの ID にアクセスすることについて、ユーザーから承認を受ける必要があります。

既に任意のユーザー アカウント システムを実装している場合でも、実装した ID システムと Microsoft アカウントとを連携して、シームレスなサインイン エクスペリエンスをユーザーに提供できます。Metro スタイル アプリと Web サイトを提供するなら、ユーザーが Microsoft アカウントを使用して PC にサインインしている限り、アプリまたは Web サイトのどちらかにユーザーが既にアクセスしていれば、もう一方に再度サインインする必要がないので、エクスペリエンスはさらに向上します。

開発するのが Web アプリであれ、Windows 8 アプリであれ、コードを同じにすることが、Live SDK の原則の 1 つです。つまり、ユーザーのサインインとそのユーザーのプロファイル情報へのアクセスを処理する JavaScript コードは、JavaScript を使用して作成した Metro スタイル アプリと Web サイト用の Live SDK を使用した Web サイトで同じです。以下のコード スニペットは、最小限の変更で、Web でも Metro スタイル アプリでも機能します。Web の場合は WL.init の呼び出しにクライアント ID を指定する必要があることが、Web のコードと Metro スタイル アプリのコードで異なりますが、Windows 8 の場合、この値は、オペレーティング システムが提供する現在のアプリの識別子から自動的に取得されます。

WL.init();
WL.getLoginStatus().then(function (response) {
onSessionChange(response);
});

function onSessionChange(response) {
var session = WL.getSession();
if (!session) {
WL.Event.subscribe("auth.login", onLoginComplete);
WL.ui({
name: "signin",
element: "signinbutton",
scope: ["wl.signin", "wl.skydrive"],
});
}
else {
greetUser();
}
}

function onLoginComplete() {
var session = WL.getSession();
if (!session.error) {
greetUser();
}
};

function greetUser() {
WL.api({
path: "/me",
method: "get"
}
).then(
function (result) {
document.getElementById("meName").innerText = "Welcome, " + result.name;
getUserPicture ();
});;
};

function getUserPicture() {
var session = WL.getSession();
var LiveConnectAPIUrl = "https://apis.live.net/v5.0";
document.getElementById("meImg").src = LiveConnectAPIUrl +
"/me/picture?return_ssl_resources=true&access_token=" + session.access_token;
document.getElementById("meImg").style.visibility = "visible";
};
;

このコード サンプルでは、現在、ユーザーが Microsoft アカウントを使用してサインインしているかどうかを確認し、Microsoft アカウントが使用されている場合は、ユーザーを受け入れます。Windows 8 アプリの場合は、ユーザーが PC にサインインしているかどうかが確認され、Web アプリの場合は、Hotmail や SkyDrive など、Microsoft アカウントをサポートする Web サイトにサインインしているかどうかが確認されます。ユーザーがサインインしていない場合は、サインイン ボタンを生成して、アプリによる自動的なサインイン (WL.signin) と、ユーザーの SkyDrive への読み取りアクセス (WL.skydrive) を許可するようにユーザーに求めます。ユーザーがこのボタンをクリックすると、PC に Microosft アカウントを使ってサインインしていない場合はサインインが求められます。その後、ユーザーは、アプリによるユーザーの個人情報へのアクセスを承認する必要があります。ユーザー情報が確認されたら、greetUser() メソッドと getUserPicture() メソッドによって、アプリがユーザーの名前にアクセスし、画像を表示します。

このように、Live SDK と統合することで、簡単に、ユーザー アカウント システムを持たないアプリも、シームレスに Microsoft アカウントに統合できます。また、独自の ID システムがあるアプリでは、ユーザーの Microsft アカウントの情報を使用して、簡単にサインアップ プロセスのブートストラップ処理を実行できます。

パーソナル クラウドと連携してアプリから SkyDrive と Hotmail を利用可能に

Windows 8 では、SkyDrive および People Metro スタイル アプリを使用して、SkyDrive 内のファイルや Hotmail の連絡先を操作できます。どちらのアプリも、データ プロバイダーとして機能することで、簡単に他の Metro スタイル アプリと緩やかに統合できます。

SkyDrive Metro スタイル アプリは、ファイルの選択機能 (英語) のプロバイダーの役割を果たします。つまり、ファイルの選択機能を使用するアプリでは、SkyDrive Metro スタイル アプリがインストールされている限り、ファイルの保存先に SkyDrive を使用し、SkyDrive からファイルを開きます。同様に、People アプリは、知り合いの選択 (英語) 機能のプロバイダーとなり、ユーザーの連絡先を 1 人以上選択する必要があるアプリのデータ ソースとして機能できます。

アプリにクラウドのデータを緊密に統合する必要がない場合に、クラウド内のユーザー データにシングル サインオンでアクセスする場合は、このような選択機能からデータを取得する方法が有効です。ユーザーの SkyDrive 内の特定の種類のファイルすべてに対して、カスタム エクスペリエンスを提供する場合など、その他のケースでは、アプリを Live SDK と統合する必要があります。

Web サイトにも、JavaScript を使用して作成された Windows Metro スタイル アプリにも、同じ Live SDK JavaScript コードを使用できるのと同様に、XAML で作成された Windows Phone 用アプリと Windows 8 用アプリでも同じコードを使用できます。次のコード スニペットは、ほぼ変更なしでどちらのプラットフォームでも機能します。ただし、重要な違いが 2 つあり、1 つは、先ほどの JavaScript のサンプルと同様に、Windows Phone バージョンのコードではクライアント ID を指定する必要があることです。このクライアント ID は、Windows 8 では、自動的に特定されます。2 つ目は、Windows Phone の非同期メソッドを作成する場合、Windows Phone で Visual Studio Async CTP (英語) を使用する必要があることです。

XAML のサインイン ボタン

<Controls:SignInButton x:Name="btnSignIn" Content="SignInButton" HorizontalAlignment="Right"
Height="46" Margin="-1,0,6,0" Width="157" Scopes="wl.signin wl.skydrive"
SessionChanged="btnSignIn_SessionChanged" Visibility="Collapsed" />

C# の分離コード

private void btnSignIn_SessionChanged(object sender, 
Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
{
if (e.Status == LiveConnectSessionStatus.Connected)
{
App.Session = e.Session;
LoadPhotos();
}else
{
btnSignIn.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

}

internal async void LoadPhotos ()
{
LiveConnectClient client = new LiveConnectClient(App.Session);
LiveOperationResult albumOperationResult = await client.Get("me/albums");
dynamic albumResult = albumOperationResult.Result;
foreach (dynamic album in albumResult.data)
{
var group = new SkyDriveAlbum(album.id, album.name, album.name, @"ms-
appx:///Assets/DarkGray.png"
, album.description);
LiveOperationResult pictureOperationResult = await client.Get(album.id + "/files");
dynamic pictureResult = pictureOperationResult.Result;
foreach (dynamic picture in pictureResult.data)
{
var pictureItem = new SkyDriveFileItem(picture.id, picture.name,
picture.name, picture.source, picture.description, picture.description, group);
group.Items.Add(pictureItem);
}
this.ItemGroups.Add(group);
}

}

このコード スニペットは、サインイン ボタンを生成し、ユーザーによってアプリからのユーザー データへのアクセスが承認されると、SkyDrive に保存されているユーザーのフォト アルバムについてのメタデータを取得します。同様に、ユーザーの Hotmail の連絡先とカレンダーにアクセスするコードを作成できます。

コード サンプル

このブログ記事でご紹介したサンプルの完全なコードは、GitHub の Live SDK サンプル リポジトリ (英語) からダウンロードできます。このコード サンプル リポジトリには、他の各種プラットフォームの Live SDK を操作するためのコード サンプルも含まれています。

次のステップ

この記事では、アプリに Live SDK を使用することで、マイクロソフト自体の Metro スタイル アプリと同じテクノロジを使用して、クラウドとのシームレスな統合を実現する方法をご紹介しました。アプリに Live SDK を統合すると、さまざまな可能性が開かれます。アプリの登録およびサインイン エクスペリエンスを向上する以外に、次のことが可能です。

  • アプリを使って作成されたユーザーのデータの保存やアクセスに、SkyDrive の無料のファイル保存サービスを利用するアプリを開発する
  • ユーザーのカレンダーにイベントを追加することで、ユーザーがアプリや Web サイトを再び使用するようにして、ユーザーをアプリにつなぎ止める
  • ユーザーの Hotmail の連絡先の中で、同じくアプリを使用している他のユーザーを見つける
  • Windows Live Messenger ネットワークによる、リアルタイムの共有エクスペリエンスを実現する

Live SDK の詳細については、マイクロソフトのドキュメントを参照 (英語) してください。また、Live SDK (英語) のダウンロード、およびフォーラム (英語) の利用もお勧めします。

--Dare Obasanjo
   Live Connect プラットフォーム担当シニア リード プログラム マネージャー

  • Loading...
Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post