次の方法で共有

Web 認証ブローカーに関する考慮事項 (HTML)

  • [アーティクル]

Windows ストア アプリによって利用される認証サービスを認証プロバイダーでセットアップする場合は、いくつかの考慮事項を詳しく検討する必要があります。また、Windows ストア アプリのユーザーに表示される Web ページは、必要に応じてマークアップを使ってカスタマイズできます。

オンライン認証プロバイダー向けの考慮事項

Web 認証ブローカーは、Windows で Internet Explorer に利用されているものと同じテクノロジを基盤に構築されています。ただし、このコンポーネントの用途は非常に特殊であるため、Internet Explorer の一部の機能は、特定の構成に対して無効である場合やロックされている場合があります。 また、Web 認証ブローカーが処理するページに関する問題のトラブルシューティングを支援するために、専用のイベント ログ チャネルが用意されています。

Internet Explorer 標準ドキュメント モード

Web 認証ブローカーは、特定のリリースの Windows に合わせた IE 標準モードですべてのページを表示します。たとえば、Windows 8 では、Web 認証ブローカーはページを "IE10 標準モード"で表示します。 Internet Explorer の開発者ツールを使って、さまざまなドキュメント モードでのページの動作を確認できます。 Internet Explorer の互換性について詳しくは、MSDN の Internet Explorer 関連のトピックをご覧ください。

無効な機能とロックされた機能

Internet Explorer のいくつかの機能は、完全に無効になっているか、特定の値にロックされて、オペレーティング システムのインターネット オプションで変更できないようになっています。

機能 状態
Application Cache API ("AppCache") 無効
リンク履歴 無効
一時ファイル 有効
Cookie セッション Cookie は有効です。保存された Cookie を使うことはできますが、Web 認証ブローカーが SSO モードでない限り、自動クリーンアップが適用されます。詳しくは、「シングル サインオン」をご覧ください。
インデックス DB 無効
DOM ストレージ 無効
ActiveX 無効
ファイル ダウンロード 無効

 

HTTPS の要件

アプリケーションがオンライン プロバイダーとの通信に使用する最初の URL は HTTPS である必要があります。

さまざまなビュー状態のサイズ

Windows 8 アプリは、縦方向や横方向の表示、共有チャームなどのチャーム内での表示など、さまざまなサイズのアプリとして表示される可能性があります。Web 認証ブローカーがどのようなビューに表示されるかに応じて、Web ページが動作する領域のサイズも変わります。 詳しくは、「ウィンドウ サイズと画面に合わせたスケーリングのガイドライン」と「コンテンツの共有のガイドライン」をご覧ください。

Web ページでは CSS メディア クエリを使って、そのビューのサイズを確認し、適切にレイアウトする必要があります。ただし、ここで説明されているピクセル数に厳密に合わせてページを設計するのではなく、さまざまなサイズに合わせて拡大または縮小できるように設計してください。ここで指定されているサイズは、将来の OS バージョンでは変更される可能性があります。

割り当てられた領域の中にページのすべての情報を表示できない場合 (たとえば、アプリケーションで要求されるアクセス許可の一覧が長い場合など)、Web 認証ブローカーにはスクロール バーが表示され、ユーザーは必要に応じてページをスクロールすることができます。タッチ ベースのデバイスについてはピンチ操作によるズーム機能にも対応しています。デスクトップ PC やノート PC については、Ctrl キーを押しながらマウス ホイールを操作することでズーム機能を使うことができます。

さまざまなスケール ファクターでテストするには、Web 認証ブローカーの SDK サンプル アプリを Microsoft Visual Studio Professional 2012 に読み込みます。これにより、さまざまなビュー サイズをシミュレーションできます。

サンプル ビュー

ここでは、次のサイズの Web ページに表示された Web 認証ブローカーの UI の例を示します。

  • 幅: 260 ピクセル
  • 高さ: 画面の高さ (画面解像度によって異なります)

Web 認証ブローカーの UI が画面の右側だけに置かれていることに注意してください。

シン ビューにおける Web 認証ブローカーの UI の例

チャームのビュー

チャームのビューでは、Web ページのサイズは次のようになります。

  • 幅: 566 ピクセル
  • 高さ: 画面の高さ (画面解像度によって異なります)

次の例に、チャームのビューにおける Web 認証ブローカーの UI を示します。

チャームのビューにおける Web 認証ブローカーの UI の例

ファイル ピッカーのビュー

ファイル ピッカーのビューでは、Web ページのサイズは次のようになります。

  • 幅: 566 ピクセル
  • 高さ: 画面の高さ (画面解像度によって異なります)

次の例に、ファイル ピッカーのビューにおける Web 認証ブローカーの UI を示します。

ファイル ピッカーのビューにおける Web 認証ブローカーの UI の例

既定では新しいウィンドウが開かない

既定では、URL は新しいウィンドウで開かれず、Web 認証ブローカー ウィンドウ内に表示されます。これは JavaScript メソッドの window.open でも同じです。また、ハイパーリンクの "target" 属性を使用したり、ユーザーが Ctrl キーを押しながらクリックして強制的に新しいウィンドウを開こうとしても、同じ結果になります。この規則の例外は、そのリンクを使ってブラウザーを開いても安全であることを Web ページで宣言した場合です。詳しくは、「ハイパーリンクのターゲットのカスタマイズ」をご覧ください。

Web 認証ページのカスタマイズ

Web ページでは、Web ページで定義されるメタデータ タグを使って、ユーザー インターフェイス (UI) のタイトル、アイコン、ヘッダーの色をカスタマイズします。Web 開発者は HTML の <meta> タグを使って、Web 認証ブローカーの UI にプロバイダーの情報とブランドを表示できます。さらに、より複雑な操作をユーザーに指示することができます。たとえば、サインアップやパスワードの回復などです。この概念は、Windows Internet Explorer 9 と Windows 7 の "ピン留めされたサイト" の機能によく似ています。

Web ページでは、Web ページ領域のユーザー インターフェイスのカスタマイズに加えて、Windows 8 のコントロールのスタイルも利用し、タッチに対応するようにし、必要に応じてブラウザーでリンクが開かれるようにします。

次に、Web 認証ブローカーのカスタマイズ モデルを利用した Web ページの例を示します。Web 認証ブローカーのユーザー インターフェイス要素

アイコンのカスタマイズ

mswebdialog-logo meta タグを使って、Web ページからアイコンを指定できます。

<meta name="mswebdialog-title" content="Contoso Social"/>

このコンテンツは URL (ページの相対パスまたは絶対パス) です。URL のスキームには HTTP または HTTPS を指定できます。ファイルの形式は PNG と JPG のどちらかにする必要があります。 画像のサイズは、30 x 30 ピクセルにします。画像がこれ以外のサイズである場合、30 x 30 のサイズになるように、縮小または拡大されます。高解像度の画面に対応するために 140% または 180% まで拡大したときにも見栄えが良くなるように、画像を作成しておく必要があります。 さまざまなスケール ファクターでテストするには、Web 認証ブローカーの SDK サンプル アプリを Visual Studio 11 に読み込みます。これにより、デザイン モードのデバイス ウィンドウを使って、さまざまな解像度とスケール ファクターの組み合わせをシミュレーションできます。

タイトル テキストのカスタマイズ

mswebdialog-title meta タグを使って、Web ページからタイトルを指定できます。

<meta name="mswebdialog-title" content="Contoso Social"/>

タイトルは、プロバイダーのブランド (たとえば、Contoso) を反映する短いテキストにする必要があります。

ヘッダー色のカスタマイズ

mswebdialog-header-color meta タグを使って、ダイアログのヘッダーに使用されるブランドの独自性を表す色を Web ページから指定できます。

<meta name="mswebdialog-header-color" content="#1267DF"/>

ここで指定した色の値からいずれかを使用できます。ただし、Web 認証ブローカーはアルファ チャネルの値を無視します。 通常は、この色とこのページ上で使われる色については、プロバイダーに同様の Windows 8 アプリが存在する場合、そのアプリで使用されている配色に合わせることをお勧めします。

注  META タグが解析された後、アイコンと色はサーバー別にクライアント上にキャッシュされます。 変更を有効にするには、クライアントのキャッシュをクリアした後で UI を起動します。これを行うには、次のレジストリ設定を変更します。

 

// Registry location under HKLM used for setting various AuthHost parameters.
#define AUTH_HOST_LOCAL_MACHINE_REGPATH \
    L"SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Image File Execution Options\\authhost.exe"
// MaxAge to use for downloading logo images
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_REG_VALUE_NAME \
    L"LogoImageMaxAgeSeconds"
// 24 hours
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_DEFAULT        \
    (24 * 60 * 60)

アイコンは一度ダウンロードされると、その後 24 時間は再ダウンロードされません。 ロゴの画像をテストするときには、前のレジストリ キーの値を小さく設定します。

Web ページのカスタマイズ

Web ページ上の UI をカスタマイズするだけでなく、開発者は、全体的な Windows 8 エクスペリエンスにシームレスに統合された Web ページも作成する必要があります。これには、推奨されるスタイルの使用、タッチ対応デバイスでも快適に Web ページを利用できることの確認、Web ブラウザーで特定の Web ページが開かれることの確認が含まれます。

  • スタイル

    Web 認証ブローカーの Web ページや Windows8 の他の UI コンポーネントで一貫性の高いユーザー エクスペリエンスを作成するために、ここでスタイルを使用することを強くお勧めします。Web ページの背景色は白とし、境界線を使わないでください。[ログイン]、[キャンセル] などのボタンは右下隅に配置し、ヘッダーと同じ色を使います。Web 認証ブローカーには [戻る] ボタンがあるため、Web ページの [キャンセル] ボタンは完全に削除することを検討してください。

  • タッチの有効化

    Web ページはタッチベースのユーザー操作を想定して設計する必要があります。Windows 8 のタッチ操作用の設計について詳しくは、「タッチ操作の設計」をご覧ください。

  • ハイパーリンクのターゲットのカスタマイズ

    Web 認証ブローカーは、ログオン ページや OAuth 認証ページなどの単一のユーザーの操作が必要な Web ページを提供する場合に役立ちます。ただし、アカウントの作成、パスワードを忘れた場合のパスワードの回復、プライバシーに関する声明の表示など、ユーザーがある程度の時間をかけてフローを理解し実施することが求められるような複雑なユーザー フローの場合、すべてのナビゲーション操作と幅広い閲覧機能をサポートできるように、そのようなページはユーザーの好みのブラウザーを起動して表示することをお勧めします。 既定では、Web 認証ブローカーでは Web ページから新しいブラウザー ウィンドウを開くことができません (詳しくは、「既定では新しいウィンドウが開かない」をご覧ください)。ただし、meta タグ mswebdialog-newwindowurl を使って、URL をブラウザーで開く必要があることを Web ページで宣言することができます。

    Web ページで mswebdialog-newwindowurl を使って URL または URL の一部を指定しておくと、target 属性または window.open() メソッドを使用して URL を新しいウィンドウで開くように指定されたときに、その URL が照合されます (左側からの文字列一致)。一致していた場合、その URL がユーザーの既定のブラウザーで開きます。一致しなかった場合、Web 認証ブローカー自体がその URL に移動します (既定の動作)。例: <meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

    この meta タグの場合、ブラウザーで https://www.contoso.com/privacy/policy.html が開かれますが、Web 認証ブローカーは https://www.contoso.com/termsofuse.html に直接移動します。新しいウィンドウで開く操作が指定されていないリンク (たとえば、target 属性や window.open() メソッドが使われていないリンク) は、この meta タグの影響を受けないことに注意してください。 このコンテンツは URL (ページの相対パスまたは絶対パス) です。URL のスキームには HTTP または HTTPS を指定できます。 プライバシーに関する声明、サインアップ フォームなど、コア ユーザー フローに含まれないリンクに対応するために mswebdialog-newwindowurl meta タグを定義する必要があります。サード パーティの認証プロバイダーによるログイン (たとえば、OpenID プロバイダー) をサポートする場合は、Web 認証ブローカー内でこの対話式操作を維持するようにしてください。 ページ上のすべてのリンクを安全なリンクとして指定し、ブラウザーで開くことができるようにするには、 <meta name="mswebdialog-newwindowurl" content="*"/> のようにアスタリスクを含む構文を使います。 ただし、"*" は排他的にしか使用できず、他の URL と組み合わせることはできません。たとえば、"https://www.contoso.com/*" は有効な構文ではありません。

すべての meta タグに適用される規則

Web 認証ブローカーでは、meta タグを処理する際に次の規則が適用されます。

  • meta タグの効果は、同じ名前でコンテンツが異なる別の meta タグが存在しない限り、同じ第 2 レベル ドメイン (たとえば、contoso.com) の下にあるすべてのページに適用されます。
  • 同じ名前の meta タグが同じページに複数存在する場合、Web 認証ブローカーはいずれか 1 つの meta タグのみを選び、その他を無視します。meta タグが選ばれる方法は未定義です。注  この規則は、同じページ上に複数のインスタンスを配置できる mswebdialog-newwindowurl meta タグには適用されません。  

関連トピック

Web 認証ブローカー

Web 認証ブローカーのサンプル

Windows.Security.Authentication.Web