ASPNETcoreAngularJWT

ASPNETcoreAngularJWT

これは、フロントエンドとして angular を使用し、バックエンドとして ASP.NET Core を使用した、jwt ベアラー トークン認証の非常に基本的なショー ケースです。 ASP.NET Core3.1 angular7.2.1 と systemjs。 (dotnet core 3.1 + と Angular7.2.1 がインストールされていることを確認してください)

---

(systemjs が webpack ではないのはなぜですか? 個人的な意見: webpack は、小さなサイズの単純なアプリケーションに使用するには複雑すぎます。ほとんどのプログラマーが私のサンプル コードを読み取れるようにするのは効率的ではないと思います。)

---

これで、Google を止めて、Bear JWT トークン認証を行う方法を見つけることができます。それは簡単です。

バックエンド: MS$ はベア JWT トークン認証用のミドルウェア AddAuthentication().AddJwtBearer() を提供するため、Startup.cs にミドルウェアを追加するだけで済みます。

フロントエンド (この場合は angular) で: sessionStorage にトークンを保存し、バックエンドと通信するときに、http (運用環境では https) リクエストのヘッダーを次のように設定します。

 let headers = new HttpHeaders()
                    .set('Content-Type','application/json')
                    .set("Authorization", "Bearer " + token);

---

JWT ソリューションを使用した ASP.NET Core 3.1 (VS2019 または csproj バージョン) の Angular およびマテリアル 7.2.1。

確認する：

ASP.NET CORE 3.1 がインストールされています。インストールされていない場合は、ここから入手してください: https://www.microsoft.com/net/download/core

nodejs がインストールされています。インストールされていない場合は、https://nodejs.org/en/download/ から入手してください。

このリポジトリをダウンロードした後、ファイル ASPNETCoreAngularJWT.csproj のあるフォルダーに移動し、次のコマンドを実行します。

 >dotnet restore

>npm install

>npm start

最後に dotnet を起動し、ブラウザ http://localhost:5000 を実行します。

 >dotnet run

また、typescript ファイルを変更した後は、「npm start」を実行することを忘れないでください。

これを実行して、Angular コンパイルと dotnet を実行できます。

 >npm run runall

また、Visual Studio 2017 または Visual Studio Code の両方で開くこともできます。 VS2017 で開いた後、デバッグとして実行する前に、プロジェクト -> プロパティ -> デバッグとアプリ URL ="http://localhost:5000" であることを確認し、デバッグを開始する前に再度リビルドします。