2017-11-22 28 views
1

React.jsテンプレートオプションを使用して、VS 2017 Asp.Net Core 2.0 Webアプリケーションテンプレートを使用しています。Asp.Netコア2.0のMVCアプリケーション(Cookie)とREST API(JWT)の同時認証

これが私の基本的なMVC +とセットアップに反応できます: 1.アプリケーションの会談に反応するように反応するアプリケーション 3. A休憩API反応アプリケーション 2. A ClientAppフォルダをホストする単一MVCページを。

デフォルトでは、いずれも認証されていません。 MVCページとREST APIの両方を保護する必要があります。

MVCページのCookie認証とREST APIのJWTベアラ認証を使用するようにコードを変更しました。

MVC Cookie認証については、私はMVCログインログインフォームを持っています。これは正常に動作します。

REST API認証では、ユーザー名とログインを受け取り、REST APIへのリクエストに使用するJWTトークンを生成するTokensControllerを追加しました。これは、Postmanからテストしたときにもうまくいきます。if userユーザーが有効なJWTトークンなしでREST APIにアクセスしようとすると、ユーザーは401応答を取得します。ユーザーがTokensControllerからトークンを取得し、それを使用してREST APIにアクセスすると、ユーザーは200応答を取得します。

私の問題は、これらの2つを組み合わせていることです。私が望むのは、認証されていないユーザーがMVCページに来ると、ユーザーはログインフォームにリダイレクトされるということです。そのフォームを送信すると、ユーザーはMVCアプリケーション(クッキーの取得)とREST API(JWTトークンの取得)の両方に認証されます。

これを達成しようとしましたが、MVCログインページを使用する代わりに、Reactログインコンポーネントがあり、認証されていないユーザーがそれにリダイレクトされるようにしました。 React onSubmitイベントでReactログインフォームを送信すると、まずTokensControllerを呼び出してJWTトークンを取得し、そのトークンをブラウザのlocalStorageに保存してから、フォームをMVCコントローラに送信してCookieログインを行います。

私はReactログインコンポーネントにMVCリダイレクトを行うことはできません。おそらくクライアント側とサーバー側のルーティングの問題のいくつかはわかっていないでしょう。 routes.tsxで

、私はこのルートにログインコンポーネントに反応設定しています:Startup.csで

<Route path='/login' component={Login} /> 

、私はこの持っている:上記

public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme) 
     // Cookie auth for MVC page that hosts React app 
     .AddCookie(options => 
      { 
       options.LoginPath = new PathString("/Account/Login"); 
       options.LogoutPath = new PathString("/Account/Logout"); 

       options.Cookie = new CookieBuilder 
       { 
        HttpOnly = true, 
        Name = "OurCookieAuthentication", 
        Path = "/", 
        SameSite = SameSiteMode.Lax, 
        SecurePolicy = CookieSecurePolicy.SameAsRequest 
       }; 
       options.ExpireTimeSpan = TimeSpan.FromMinutes(30); 
       options.SlidingExpiration = true; 

      } 
     ) 
     // JWT authenticaton for REST API called by React app 
     .AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, options => { 
      options.TokenValidationParameters = new TokenValidationParameters 
      { 
       ValidateAudience = false, 
       ValidateIssuer = false, 
       ValidateIssuerSigningKey = true, 
       IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("thesecret")), 
       ValidateLifetime = true, 
       ClockSkew = TimeSpan.FromMinutes(5) 
      }; 
     }); 
    ; 

    services.AddMvc() 
} 

を、これは現在、私を指し私はtにそれを変更した場合

options.LoginPath = new PathString("/Account/Login"); 

:JWTをクッキーのログインのために正常に動作しますが、処理されませんMVCのログインページ、私のReactログインコンポーネントにリダイレクトしようとすると、クライアントコンポーネントの代わりにサーバーコンポーネントの「MVCコントローラ」の「/ login」パスにアクセスしたため、Reactコンポーネントが読み込まれません。

options.LoginPath = new PathString("/login"); 

どのように私が後に何を達成できるかについてのアイデアはありますか?ログインルートを変更

public IActionResult Login() 
{ 
    return View("../Home/Index"); //this should be the cshtml view that serves up the spa 
} 

その後、あなたの中にルートを反応させる:

+0

をあなたにバンドルページを反応させるのですASPコアプロジェクトまたは別途実行されますか?私。プロジェクトはlocalhost:8080で実行され、プロジェクトはlocalhost:8088 – Aeseir

+0

で実行されます。私はVS 2017 Asp.Net Core Reactテンプレートを使用しているので、REST API、MVCホストページ、Reactアプリケーションはすべて同じVSプロジェクトにあり、 httpポート。 ReactアプリケーションとそのMVCホストページはルートhttp:// localhost:32264にあり、REST APIはhttp:// localhost:32264/apiの同じポートにあります。基本的な作業が完了したら、REST APIをVSプロジェクトと分離してメンテナンスしやすくします。 – hhtech1

答えて

0

あなたはそうは以下のようにMVC AccountControllerに反応するビューを追加しようとしている

<Route path='/Account/Login' component={Login} /> 
関連する問題