JavaScriptクライアントの追加

このクイックスタートでは、JavaScriptクライアントアプリケーションを構築する方法を説明します。ユーザーはIdentityServerにログインし、IdentityServerによって発行されたアクセストークンを使用してWeb APIを呼び出し、IdentityServerからログアウトします。

JavaScriptクライアント用の新しいプロジェクト

JavaScriptアプリケーション用の新しいプロジェクトを作成します。単純に空のWebプロジェクトでも、空のASP.NET Coreアプリケーションでもかまいません。このクイックスタートでは、空のASP.NETコアアプリケーションが使用されます。

新しいASP.NET Core Webアプリケーションを作成します。

../_images/7_new_project.png

「空」テンプレートを選択します。

../_images/7_empty_template.png

"OK"ボタンをクリックしてプロジェクトを作成します。

ホスティングの変更

ポート5003で実行するようにホスティングを変更します（ここで説明します）。

静的ファイルミドルウェアを追加する

このプロジェクトは主にクライアント側で動作するように設計されているため、アプリケーションを構成する静的なHTMLファイルとJavaScriptファイルを提供するためにASP.NET Coreが必要です。静的ファイルミドルウェアは、これを行うために設計されています。

メソッド内のStartup.csに静的ファイルミドルウェアを登録しますConfigure。

public void Configure(IApplicationBuilder app)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

このミドルウェアは、アプリケーションの〜/ wwwrootフォルダにある静的ファイルを提供します。ここで、HTMLファイルとJavaScriptファイルを配置します。

oidc-client リファレンス

MVCプロジェクトでは、ライブラリを使用してOpenID Connectプロトコルを処理しました。このプロジェクトでは、JavaScriptで動作し、ブラウザで動作するように設計されているものを除き、同様のライブラリが必要です。oidcクライアントライブラリは、そのようなライブラリです。これは、NPM、Bower、githubから直接ダウンロードすることができます。

NPM

NPMを使用してoidc-clientをダウンロードする場合は、次の手順を実行します。

新しいNPMパッケージファイルをプロジェクトに追加し、package.jsonという名前を付けます。

../_images/7_add_package_json.png

でpackage.jsonを追加dependencyするにはoidc-client：

"dependencies": {
  "oidc-client": "1.4.1"
}

このファイルを保存したら、Visual Studioは自動的にこれらのパッケージをnode_modulesというフォルダに復元します。

../_images/7_node_modules.png

名前のファイルを探しoidc-client.jsに〜/ node_modules / oidc-クライアント/ distののフォルダを、アプリケーションの中にそれをコピーし、〜/のwwwrootフォルダ。〜/ wwwrootに NPMパッケージをコピーするもっと洗練された方法がありますが、これらのテクニックはこのクイックスタートの対象外です。

HTMLファイルとJavaScriptファイルを追加する

次に、HTMLファイルとJavaScriptファイルを〜/ wwwrootに追加します。2つのHTMLファイルと1つのアプリケーション固有のJavaScriptファイル（oidc-client.jsライブラリに加えて）があります。では〜/ wwwrootに、名前のHTMLファイルを追加したindex.htmlとcallback.htmlを、と呼ばれるJavaScriptファイルを追加app.jsを。

index.html

これはアプリケーションのメインページになります。ユーザーがログイン、ログアウト、およびWeb APIの呼び出しを行うためのボタン用のHTMLが含まれています。また<script>、2つのJavaScriptファイルを含むタグも含まれています。また<pre>、ユーザーにメッセージを表示するために使用されます。

これは次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button id="login">Login</button>
    <button id="api">Call API</button>
    <button id="logout">Logout</button>

    <pre id="results"></pre>

    <script src="oidc-client.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

これには、アプリケーションのメインコードが含まれます。まず、ヘルパ関数を追加してメッセージをログに記録します<pre>。

function log() {
    document.getElementById('results').innerText = '';

    Array.prototype.forEach.call(arguments, function (msg) {
        if (msg instanceof Error) {
            msg = "Error: " + msg.message;
        }
        else if (typeof msg !== 'string') {
            msg = JSON.stringify(msg, null, 2);
        }
        document.getElementById('results').innerHTML += msg + '\r\n';
    });
}

次に、「クリック」イベントハンドラを3つのボタンに登録するコードを追加します。

document.getElementById("login").addEventListener("click", login, false);
document.getElementById("api").addEventListener("click", api, false);
document.getElementById("logout").addEventListener("click", logout, false);

次に、oidc-clientライブラリのUserManagerクラスを使用して、OpenID Connectプロトコルを管理できます。これには、MVCクライアントで必要とされたのと同じ設定が必要です（値は異なりますが）。構成およびインスタンス化するには、このコードを追加します：UserManager

var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "id_token token",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);

次に、ユーザーがJavaScriptアプリケーションにログインしているかどうかを知るAPIをUserManager提供しgetUserます。JavaScript Promiseを使用して結果を非同期的に返します。返されるUserオブジェクトにはprofile、ユーザーの要求を含むプロパティがあります。このコードを追加して、ユーザーがJavaScriptアプリケーションにログインしているかどうかを検出します。

mgr.getUser().then(function (user) {
    if (user) {
        log("User logged in", user.profile);
    }
    else {
        log("User not logged in");
    }
});

次に、我々は実装したいlogin、apiとlogout機能を。これUserManagerはsigninRedirect、ユーザsignoutRedirectをログインさせ、ユーザをログアウトさせるためのものです。User我々は上記のコードで得られたオブジェクトもありaccess_token、ウェブAPIの認証に使用することができますプロパティを。これaccess_tokenは、ベアラ方式のAuthorizationヘッダーを介してWeb APIに渡されます。このコードを追加して、アプリケーションでこれらの3つの機能を実装します。

function login() {
    mgr.signinRedirect();
}

function api() {
    mgr.getUser().then(function (user) {
        var url = "http://localhost:5001/identity";

        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = function () {
            log(xhr.status, JSON.parse(xhr.responseText));
        }
        xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
        xhr.send();
    });
}

function logout() {
    mgr.signoutRedirect();
}

See: Protecting an API using Client Credentials <http://docs.identityserver.io/en/release/quickstarts/1_client_credentials.html> for information on how to create the api used in the code above.

callback.html

このHTMLファイルは、redirect_uriユーザーがIdentityServerにログインすると指定されたページです。それは、IdentityServerとのOpenID Connectプロトコルサインインハンドシェイクを完了します。これのためのコードは、UserManager以前使用したクラスによってすべて提供されています。ログインが完了したら、ユーザーをメインのindex.htmlページにリダイレクトすることができます。サインインプロセスを完了するためにこのコードを追加してください：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="oidc-client.js"></script>
    <script>
        new Oidc.UserManager().signinRedirectCallback().then(function () {
            window.location = "index.html";
        }).catch(function (e) {
            console.error(e);
        });
    </script>
</body>
</html>

JavaScriptクライアント用のIdentityServerにクライアント登録を追加する

クライアントアプリケーションがすぐに使えるようになったので、この新しいJavaScriptクライアント用にIdentityServerに設定エントリを定義する必要があります。IdentityServerプロジェクトで、クライアント構成（Config.cs内）を探します。新しいJavaScriptアプリケーションのリストに新しいクライアントを追加します。次のような構成にする必要があります。

// JavaScript Client
new Client
{
    ClientId = "js",
    ClientName = "JavaScript Client",
    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,

    RedirectUris =           { "http://localhost:5003/callback.html" },
    PostLogoutRedirectUris = { "http://localhost:5003/index.html" },
    AllowedCorsOrigins =     { "http://localhost:5003" },

    AllowedScopes =
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        "api1"
    }
}

CORSでWeb APIへのAjax呼び出しを許可する

必要な設定の最後の1つは、Web APIプロジェクトでCORSを設定することです。これにより、http：// localhost：5003からhttp：// localhost：5001へのAjax呼び出しが可能になります。

Configure CORS

依存性注入システムにCORSサービスを追加ConfigureServicesでStartup.cs：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvcCore()
        .AddAuthorization()
        .AddJsonFormatters();

    services.AddAuthentication("Bearer")
        .AddIdentityServerAuthentication(options =>
        {
            options.Authority = "http://localhost:5000";
            options.RequireHttpsMetadata = false;

            options.ApiName = "api1";
        });

    services.AddCors(options =>
    {
        // this defines a CORS policy called "default"
        options.AddPolicy("default", policy =>
        {
            policy.WithOrigins("http://localhost:5003")
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
    });
}

CORSミドルウェアをパイプラインに追加しConfigureます。

public void Configure(IApplicationBuilder app)
{
    app.UseCors("default");

    app.UseAuthentication();

    app.UseMvc();
}

JavaScriptアプリケーションを実行する

これで、JavaScriptクライアントアプリケーションを実行できるはずです。

../_images/7_not_logged_in.png

ユーザーにサインインするには、[ログイン]ボタンをクリックします。ユーザーがJavaScriptアプリケーションに戻ったら、プロフィール情報が表示されます。

../_images/7_logged_in.png

"API"ボタンをクリックしてWeb APIを呼び出します：

../_images/7_api_results.png

最後に「ログアウト」をクリックしてユーザーにサインアウトします。

../_images/7_signed_out.png

サインイン、ログアウト、およびWeb APIへの呼び出しの認証にIdentityServerを使用するJavaScriptクライアントアプリケーションが開始されました。