クイック スタート: オンライン ID プロバイダーへの接続 (HTML)

このトピックでは、OpenID や OAuth などのインターネット認証と認証プロトコルを使うオンライン ID プロバイダーに Windows ストア アプリを接続する方法について説明します。

Windows ストア アプリでは、Web 認証ブローカーを使って、オンライン ID プロバイダーに接続します。アプリでは、AuthenticateAsync メソッドを呼び出します。それによって、要求をオンライン ID プロバイダーに送信し、アプリがアクセスできるプロバイダー リソースを表すアクセス トークンを受け取ります。詳しい例については、Web 認証ブローカーのサンプルに関するページをご覧ください。Web 認証ブローカーについて詳しくは、「Web 認証ブローカー」をご覧ください。リファレンス ドキュメントについては、「Windows.Security.Authentication.Web」をご覧ください。

このトピックの後は、次のトピックをご覧ください。

• Web 認証ブローカーに関する考慮事項 (オンライン プロバイダー向け)
• Web 認証ブローカーのワークフローの理解とデバッグ

必要条件

• JavaScript について理解している必要があります。
• オンライン ID プロバイダーの認証要件について理解している必要があります。

アプリのオンライン プロバイダーへの登録

アプリを接続先のオンライン ID プロバイダーに登録する必要があります。アプリを登録する方法については、ID プロバイダーに確認してください。通常、登録すると、オンライン プロバイダーからアプリの ID が提供されます。

認証要求の URI の作成

要求の URI は、オンライン プロバイダーに対する認証要求の送信先のアドレスと、必要なその他の情報 (アプリ ID またはシークレット、認証後にユーザーが転送されるリダイレクト URI、必要な応答の型など) で構成されます。必要なパラメーターについては、プロバイダーに確認してください。

要求の URI は、authenticateAsync メソッドの requestUri パラメーターとして送信されます。また、セキュリティで保護されたアドレスである (https:// で始まる) 必要があります。

次の例では、要求の URI を作成する方法を示します。

        var startURL = "https://<providerendpoint>?client_id=<clientid>&scope=<scopes>&response_type=token"; 

        var startURI = new Windows.Foundation.Uri(startURL);

オンライン プロバイダーへの接続

authenticateAsync メソッドを呼び出してオンライン ID プロバイダーに接続し、アクセス トークンを取得します。このメソッドは、前の手順で作成した URI を requestUri パラメーターとして受け取り、ユーザーのリダイレクト先の URI を callbackUri パラメーターとして受け取ります。

次の例では、オンライン ID プロバイダーに接続する方法を示します。

authzInProgress = true; 
        Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync( 
            Windows.Security.Authentication.Web.WebAuthenticationOptions.none, startURI,endURI) 
            .done(function (result) { 
                document.getElementById("AnyServiceReturnedToken").value = result.responseData; 
                document.getElementById("AnyServiceDebugArea").value += "Status returned by WebAuth broker: " + result.responseStatus + "\r\n"; 
                if (result.responseStatus === Windows.Security.Authentication.Web.WebAuthenticationStatus.errorHttp) { 
                    document.getElementById("AnyServiceDebugArea").value += "Error returned: " + result.responseErrorDetail + "\r\n"; 
                } 
                authzInProgress = false; 
            }, function (err) { 
                WinJS.log("Error returned by WebAuth broker: " + err, "Web Authentication SDK Sample", "error");         
                document.getElementById("AnyServiceDebugArea").value += " Error Message: " + err.message + "\r\n"; 
                authzInProgress = false; 
            }); 

シングル サインオン (SSO) を使った接続

既定では、Web 認証ブローカーは Cookie の保存を許可していません。そのため、アプリ ユーザーは (たとえば、プロバイダーのログイン ダイアログのチェック ボックスをオンにして) ログオン状態を維持することを示した場合でも、そのプロバイダーのリソースにアクセスするたびにログインする必要があります。SSO を使ってログインするには、オンライン ID プロバイダーが Web 認証ブローカーに対して SSO を有効にしており、callbackUri パラメーターを受け取らない authenticateAsync のオーバーロードをアプリで呼び出す必要があります。

SSO をサポートするには、オンライン プロバイダーが ms-app://appSID という形式のリダイレクト URI の登録を許可している必要があります。appSID は、アプリの SID です。アプリの SID は、アプリの Windows ストア開発者ページか、getCurrentApplicationCallbackUri メソッドを呼び出すことで確認できます。

次の例では、SSO を使ってオンライン ID プロバイダーに接続する方法を示します。

var redirectURL = Windows.Security.Authentication.Web.WebAuthenticationBroker.getCurrentApplicationCallbackUri().absoluteUri;
        var startURL = "https://<providerendpoint>?client_id=<clientid>&redirect_uri=" + encodeURIComponent(redirectURL) + "&scope=<scopes>&response_type=token"; 

        var startURI = new Windows.Foundation.Uri(startURL); 

        Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync( 
            Windows.Security.Authentication.Web.WebAuthenticationOptions.none, startURI) 
            .done(function (result) { 
                if (result.responseStatus === Windows.Security.Authentication.Web.WebAuthenticationStatus.errorHttp) { 
                    document.getElementById("FacebookDebugArea").value += "Error returned: " + result.responseErrorDetail + "\r\n"; 
                } 

                // Parse out the OAuth token from result.responseData 

            }, function (err) { 
                WinJS.log("Error returned by WebAuth broker: " + err, "Web Authentication SDK Sample", "error"); 
            });

Blend による認証されたアプリの状態のプレビュー

authenitcateUserAsync を使って実行時にアプリを認証している場合は、同じ資格情報を使って、Blend for Microsoft Visual Studio 2013 で認証された状態のアプリにアクセスできます。つまり、認証されたバージョンのアプリを開き、外観を変更し、その変更をプレビューするという一連の操作を、Blend から離れずに行うことができます。

1. Blend の [デバイス] パネルで、[デザイン時] カテゴリの [認証] をオンにします。
2. F5 キーを押して、アプリをビルドして実行します。
3. 自分の資格情報を使ってアプリにサインインします。
4. Blend に戻り、アプリを再読み込みします。
5. 展開されているアプリに戻り、Alt + F4 キーを押してアプリを終了します。 注  同じアプリ パッケージ ID のインスタンスは、一度に 1 つしか実行できません。Blend による認証されたアプリのビューでは、展開されているバージョンのアプリと同じパッケージ ID が使われるため、アプリを Blend で実行しながらバックグラウンドでも実行することはできません。  
6. Blend に戻って作業を続けます。

要約

このトピックでは、SSO が有効な場合と無効な場合にオンライン ID プロバイダーに接続する方法について説明しました。

関連トピック

Windows ストア アプリの開発

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

Web 認証ブローカー

Windows.Security.Authentication.Web