Live SDK を使ってアプリにシングル サインオンを実装する際のベスト プラクティス


私は数か月前、Live SDK を使って Windows 8 アプリにシングル サインオン機能を実装し、SkyDrive と連携させる方法に関する記事を執筆しました。その後、Windows 8 Release Preview の一般提供が開始されましたが、ユーザーによるサインイン、アカウントの連携、エクスペリエンスからのサインアウトを可能にするアプリのエントリ ポイントの公開方法について規定するデザイン パターンの一貫性が失われている例をいくつか目にするようになりました。

これらのデザイン パターンについてわかりやすく説明するために、ユーザーの Microsoft アカウントを使用するアプリ向けのガイドラインをいくつかのまとめました。この記事ではそれらのガイドラインについてお知らせすると共に、作業を始めるために役立つコードを紹介します。

開発者が Microsoft アカウントを使った認証をアプリに組み込む場合は、主に以下の 3 つのシナリオが考えられます。

  1. ユーザーがサインインしないとアプリを操作できない
  2. ユーザーはサインインしなくてもアプリを操作できるが、パーソナル化されたエクスペリエンスを利用するにはサインインが必要
  3. SkyDrive や Hotmail との統合など特定タスクの実行に、Microsoft アカウントによるサインインが必要

では、これらについて詳しく説明していきましょう。

ユーザーのサインインが必要なアプリのガイドライン

Microsoft アカウントを ID プロバイダーとして使い、ユーザーがサインインしないと操作できないアプリの場合は、Microsoft アカウントのサインイン ダイアログをアプリの起動と同時に表示します。このカテゴリに含まれるのは、特定ユーザーに固有の情報を作成または管理するアプリで、代表例として People アプリが挙げられます。

Microsoft アカウントで PC にサインインしていないユーザーには、標準のサインイン ダイアログが表示されます。

サインイン ダイアログサインイン ダイアログ。

Windows 8 はシングル サインオンをサポートするため、Microsoft アカウントで PC にサインイン済みのユーザーにはこのダイアログは表示されません。

いずれの場合でも、アプリがユーザーの ID にアクセスするためには、ユーザー データへのアクセス許可をアプリに与える必要があります。この処理を 1 回実行すれば、別のデバイスや Web サイトでアプリを再度実行する場合には Windows がこの処理を記憶してくれます。

[アクセス許可] ダイアログ
[アクセス許可] ダイアログ。

これらのダイアログを表示するには、WL.login メソッド (JavaScript 用) または Microsoft.Live.LiveAuthClient.Login メソッド (C# などのマネージ言語用) をアプリの起動時に呼び出します。

JavaScript

WL.Event.subscribe("auth.login", onLoginComplete);

WL.init();

WL.login({

scope: ["wl.signin", "wl.skydrive"],

});

C#

public LiveConnectSession Session
{
get
{
return _session;
}
set
{
_session = value;
}
}

private async void InitAuth()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive" });

if (authResult.Status == LiveConnectSessionStatus.Connected)
{
this.Session = authResult.Session;
}

}
}

Live SDK を使ったユーザーのサインインの詳細については、「ユーザーのサインイン」を参照してください。

ユーザーはサインインしなくてもアプリを操作できるが、パーソナル化されたエクスペリエンスを利用するにはサインインが必要なアプリのガイドライン

ユーザーがサインインしなくても問題なく使えるものの、サインインによってエクスペリエンスをさらにパーソナル化できるアプリがあります。この代表例としてニュースや天気情報のアプリが挙げられます。このセクションでは、こうしたシナリオの場合にお勧めのパターンを説明します。このようなアプリに求められるのは、設定チャームをサポートすることと、サインイン オプションを持つ [アカウント] セクションを組み込むことです。以下のスクリーンショットは、このパターンが使われている People アプリの例です。

People アプリの [設定] に表示された [アカウント] セクション

People アプリの [設定] に表示された [アカウント] セクション

設定チャーム、アカウントの順にユーザーにクリックしてもらい、その後 Microsoft アカウントのサインイン オプションが表示されるようなユーザー操作の実装をお勧めします。

これを実行するには、SettingsCommand (英語) クラスの Label (英語) プロパティを使ってこのオプションを表示し、ユーザーによりクリックされたら、Invoked (英語) プロパティを使って Microsoft アカウントのサインイン オプションを提供する SettingsFlyout (英語) コントロールを表示します。SettingsFlyout コントロールの詳細については、アプリ設定のガイドラインの「設定ポップアップの作成」セクションを参照してください。

Microsoft アカウントによるログインだけをサポートするアプリの場合、複数のアカウントをサポートしないため [アカウント] セクションは必要なく、設定に表示するのはサインイン オプションだけで問題ありません。以下のスクリーンショットは、[設定] ペインに直接サインイン オプションが表示される PhotoBucket アプリの例です。

PhotoBucket

PhotoBucket アプリでは、[設定] にサインイン オプションが表示される

特定タスクの実行に Microsoft アカウントによるサインインが必要なアプリのガイドライン

Microsoft アカウントがなくても操作できるものの、Microsoft アカウントを使うことで Hotmail、SkyDrive、Messenger などの Microsoft サービスと連携できるアプリがあります。この代表例として、[SkyDrive に保存] のようなタスクを備えるカスタムの写真編集アプリが挙げられます。

このようなアプリを開発する場合は、Canvas またはアプリ バーを使ってアプリにタスクを公開し、このタスクが起動されたら Microsoft アカウントのサインイン ダイアログが表示されるようにすることをお勧めします。Click イベント ハンドラーでユーザーにログインしてもらい、ユーザーのログイン後にタスクを実行します。

Microsoft アカウントによるサインインの連携方法と、アプリ バーのボタンのクリックから、ユーザーの SkyDrive アカウントにアクセスするためのアクセス許可を要求する例を以下に示します。

JavaScript

function onAppBarSaveButtonClick()
{
WL.Event.subscribe("auth.login", onLoginComplete);
WL.init();

WL.login({
scope: ["wl.signin", "wl.skydrive_update"],
});
}

C#

private void AppBarSaveButton_Click(object sender, RoutedEventArgs e)
{
InitAuth();
}

private async void InitAuth()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive_update" });

if (authResult.Status == LiveConnectSessionStatus.Connected)
{
// An APP level property for the session
App.Session = authResult.Session;
}

}
}

アプリ バー ボタンの外観は、Live Connect のブランドに関するガイドラインで提供されるアセットを使ってカスタマイズできます。

ユーザーのサインアウトのガイドライン

Windows 8 では、ユーザーは Microsoft アカウントを使って PC にログインするか、Microsoft アカウントを自身のローカル/ドメイン アカウントに連携させることができます。こうした場合は、アプリがサインアウト オプションを提供する必要はありません。しかし、Microsoft アカウントを使った PC へのログインも、Microsoft アカウントとローカル/ドメイン アカウントの連携もユーザーが行わない場合は、Microsoft アカウントを使ってアプリにサインインするユーザーのためにサインアウトのオプションを提供する必要があります。これを実行するには、OnlineIdAuthenticator クラスの CanSignOut プロパティをチェックして、対象のアカウントがサインアウト可能かどうかを確認します。

複数のアカウントをサポートするアプリの場合、設定チャームを起動した後の [アカウント] セクション ポップアップにサインアウトのオプションを配置します。Microsoft アカウントだけをサポートするアプリの場合、設定チャームに直接サインアウトのオプションを配置します。

PhotoBucket2

サインアウトが許可されない場合はログインしているユーザーの名前を表示します。SettingsFlyout コントロールの詳細については、アプリ設定のガイドラインの「設定ポップアップの作成」セクションを参照してください。

以下のコード サンプルに、今回のガイドラインに基づくユーザーのサインアウトの方法を示します。

JavaScript

function init()
{
var onlineId = Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator();

If(onlineId.canSignOut)
{
// the sign out button is disabled by default
document.getElementById("btnSignOut").style.visibility = "visible";

}
}

function onLogoutButtonClick()
{
WL.logout();
}

 
C#
LiveAuthClient liveAuthClient;
public SimpleSettingsNarrow()
{
this.InitializeComponent();
liveAuthClient = new LiveAuthClient();

Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator auth = new Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator();

if(auth.CanSignOut)
{
this.btnSignOut.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}

private void LogoutButton_Click(object sender, RoutedEventArgs e)
{
liveAuthClient.Logout();
}

ユーザーをサインアウトさせるには、WL.logout メソッドまたは Microsoft.Live.LiveAuthClient.Logout メソッドを呼び出します。

経験則の紹介

今回のブログ記事で紹介した Microsoft アカウントによるシングル サインオンをアプリで活用する方法を使うことで、マイクロソフトの Metro スタイル アプリに対する Windows 8 ユーザーの期待に応えることができます。

アプリのサインアウトのオプションを提供するために推奨される方法についても紹介しました。最後は、こうしたガイドラインに追加したい 2 つのシンプルな経験則を紹介したいと思います。これらを活用することで、皆さんのアプリを通して提供されるエクスペリエンスと、マイクロソフト独自のアプリが提供するエクスペリエンスとの不一致を避けることができます。

  • ユーザーのサインイン/サインアウトのためのコントロールやダイアログに、今回紹介した以外のものを使わない。Live SDK が提供するサインイン ダイアログを使うことで、ユーザーの Microsoft アカウント資格情報にアプリが直接アクセスしないことをユーザーに確実に伝えることができます。
  • Microsoft アカウントのサインイン/サインアウト オプションを SettingsFlyout コントロールまたはタスクの一部以外の場所に表示しない。Metro スタイル アプリのユーザーには、アカウント管理オプションは設定チャームに配置されているという認識が定着しつつあります。これを別の場所に配置することによって、エクスペリエンスの一貫性が失われ、エクスペリエンスに対するユーザーの期待が裏切られることになります。

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

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

Skip to main content