JavaScriptクライアント(SPA)はIdentityServer 4にアクセスします.

5635 ワード

これは、ブラウザ上で動作するJavaScriptクライアント(SPAとも呼ばれる)がIdentityServer 4にどのようにアクセスするかを示す簡単な例である.ユーザーはまずIdentityServerに登録し、IdentityServerからaccess_を授与されました.tokenは、APIを呼び出したときにこのaccess_を携帯する.tokenは、最後にIdentityServerからログアウトします.
簡単なJavaScriptクライアントアプリケーションを作成します.
つまり、まず空いているASP.NET CoreプロジェクトやNode.jsプロジェクトを作ってもいいです.ここではまず空いているASP.NET Coreプロジェクトを作成しました.
dotnet new web-n JavaScript Cient
ホスト項目のデフォルトのポート番号を変更します.
注意Propties/launchSettings.jsonのバインディングアドレスを修正し、修正前のhttp://localhost:5003/を選択しますhttp://0.0.0.0:5003また、以前Docker容器の運行中にバインディング異常が発生し、処理できなくなりました.

{ 
  "profiles": {
    "JavaScriptClient": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://0.0.0.0:5003",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

静的ファイルのミドルウェアを追加
このプロジェクトは主にブラウザの中を走るクライアントアプリケーションを構築するために使われているので、asp.net coreの主な役割は、HTMLやJSなどの静的リソースを信託管理することです.
startup.csにミドルウェアを登録します.

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

静的ファイル中間件はデフォルトでホストされています./wrootディレクトリの静的ファイルで、このフォルダはHTMLとJavaScriptを保存するために使われています.このディレクトリがなければ、このディレクトリを作成します.
odc-clientを引用する
odc-clientはOpenID Connect(OIDC)とOAuth 2プロトコルを処理するためのソフトウェア開発パッケージです.npm、bowerまたは直接ダウンロードでインストールできます.

npmでodc-clientをインストールする

を採用します.
npm i odc-client copy node_modules\odc-client\dist*wroot
このコマンドは最新のodc-client引用集をダウンロードしてjavascriptファイルをコピーして~/wrootディレクトリの下に行きます.
あなたのHTMLとJavaScriptファイルを追加します.
ここには二つのHTMLファイルと一つのプロジェクト級のJavaScriptスクリプトファイルがあります.
index.
これは簡単なユーザーのトップページで、三つのボタンが含まれています.このファイルは2つのJavaScriptスクリプトファイルを引用しています.情報を出力するためのPREラベルが含まれています.




    
    


    <button id="login">Login</button>
    <button id="api">Call API</button>
    <button id="logout">Logout</button>

    <pre/>

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


</code></pre> 
 <h3>app.js</h3> 
 <p>                  。              Log,             PRE   。</p> 
 <pre><code>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<br>';
    });
}
</code></pre> 
 <p> app.js            。</p> 
 <pre><code>document.getElementById("login").addEventListener("click", login, false);
document.getElementById("api").addEventListener("click", api, false);
document.getElementById("logout").addEventListener("click", logout, false);
</code></pre> 
 <p>      oidc-client     UserManager   OpenID Connect  ，    ，   UserManager</p> 
 <pre><code>var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);
</code></pre> 
 <p>   UserManager      getUser           。   User       profile   ，          。</p> 
 <pre><code>mgr.getUser().then(function (user) {
    if (user) {
        log("User logged in", user.profile);
    }
    else {
        log("User not logged in");
    }
});
</code></pre> 
 <p>       login、api、logout     。<br/> UserManager    signinRedirect            ，signoutRedirect     。        User       access_token ，      API   。</p> 
 <pre><code>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();
}
</code></pre> 
 <h3>callback.html</h3> 
 <p>                 redirect_uri ，         OpenID Connect       。            index.html   。</p> 
 <pre><code>


    <meta charset="utf-8"/>
    <title/>


    <script src="oidc-client.js"/>
    <script>
        new Oidc.UserManager({response_mode:"query"}).signinRedirectCallback().then(function() {
            window.location = "index.html";
        }).catch(function(e) {
            console.error(e);
        });
    </script>


</code></pre> 
 <p>  ：https://github.com/daijinming/refine-javascriptclient<br/>     ：http://114.116.96.150:5003</p> 
 <p>  ：<br/> IdentityServer4     Adding a JavaScript client</p> 
</article>
                            </div>
                        </div>

JSONノート1