既存の ASP.MET MVC5 アプリに Web API 2.2 のコントローラを追加してみました。その方法を備忘録として書いておきます。需要はないかもしれませんが。（笑）

既存の MVC5 アプリは VS2015 のテンプレートで生成した .NET Framework v4.6.1 ベースの単独 MVC プロジェクトで、ASP.NET Identity を利用してクッキーベースの認証を行っています。

その既存の MVC5 アプリに Web API の機能を追加するのですが、Web API の認証は既存のクッキーベースとするのではなく、Web API で推奨されているトークンベースとします。その際、既存の MVC5 アプリが持つ ASP.NET Identity からユーザー情報を得てトークン認証を行うようにします。

基本的には、下の画像のように VS2015 の Web API テンプレートを使ってプロジェクトを新規に作り、それから必要な部分を既存の MVC プロジェクトに追加していくという感じです。

Web API プロジェクトを作った後、以下の手順で、既存の MVC プロジェクトに必要なパッケージ、コードを追加します。

(1) SSL 有効化

開発環境でも SSL 通信下で検証ができるように、先の記事「IIS Express で SSL 通信」に従って IIS Express で SSL 通信を利用できるように設定します。

(2) NuGet パッケージのインストール

既存の MVC プロジェクトに Web API 関係の NuGet パッケージをインストールします。必要なパッケージは、Web API テンプレートで自動生成されたプロジェクトの NuGet パッケージの管理画面で「インストール済み」の WebApi 関係のパッケージを表示すると分かります。自分の環境では以下の 6 つでした。

• Microsoft.AspNet.WebApi
• Microsoft.AspNet.WebApi.Client
• Microsoft.AspNet.WebApi.Core
• Microsoft.AspNet.WebApi.WebHost
• Microsoft.AspNet.WebApi.Owin
• Microsoft.AspNet.WebApi.HelpPage

Microsoft.AspNet.WebApi を選んでインストールすると自動的に Client, Core, WebHost もインストールされます。Owin, HelpPage はその後で追加インストールしました。

(3) RequireHttpsAttribute の追加

SSL 通信を強制するためのフィルター RequireHttpsAttribute を追加します。（基本的な動作には影響ないのですが、実装しておいた方がよさそうですので）

まず、MVC 側ですが、MVC 5.2 以降であれば System.Web.Mvc 名前空間に RequireHttpsAttribute Class が用意されていますので、それを FilterConfig.cs で以下のように追加します。

public static void RegisterGlobalFilters(
                GlobalFilterCollection filters)
{
    filters.Add(new HandleErrorAttribute());

    // これを追加
    filters.Add(new RequireHttpsAttribute());
}

Web API 側では上記のフィルターは使えないので、カスタムフィルターを作ってそれを使うことになります。（MVC 用と Web API 用とではフィルターは違うので注意）

カスタムフィルターは、Microsoft の文書 Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API 2.2 からリンクが張ってある GitHub のページ からダウンロードできるプロジェクトの Filters フォルダにサンプルがありましたので、それを借用しました。

そのカスタムフィルター RequireHttpsAttribute.cs のコードをそのまま載せておきます。（名前空間は自分のプロジェクトに合わせて変更しました）

using System;
using System.Net;
using System.Net.Http;
using System.Web.Http.Controllers;
using System.Web.Http.Filters;

namespace Mvc5.Filters
{
  public class RequireHttpsAttribute : 
                            AuthorizationFilterAttribute
  {
    public int Port { get; set; }

    public RequireHttpsAttribute()
    {
      Port = 443;
    }

    public override void OnAuthorization(
                           HttpActionContext actionContext)
    {
      var request = actionContext.Request;

      if (request.RequestUri.Scheme != Uri.UriSchemeHttps)
      {
        var response = new HttpResponseMessage();

        if (request.Method == HttpMethod.Get || 
            request.Method == HttpMethod.Head)
        {
          var uri = new UriBuilder(request.RequestUri);
          uri.Scheme = Uri.UriSchemeHttps;
          uri.Port = this.Port;

          response.StatusCode = HttpStatusCode.Found;
          response.Headers.Location = uri.Uri;
        }
        else
        {
          response.StatusCode = HttpStatusCode.Forbidden;
        }

        actionContext.Response = response;
      }
      else
      {
        base.OnAuthorization(actionContext);
      }
    }
  }
}

このカスタムフィルターを有効にする方法は下の「(4) WebApiConfig.cs の追加」のセクションを見てください。

(4) WebApiConfig.cs の追加

Web API プロジェクトから WebApiConfig.cs をコピーして MVC プロジェクトの App_Start フォルダにコピーします。名前空間は自分のプロジェクトに合わせて変更してください。

Register メソッドに、上の「(3) RequireHttpsAttribute の追加」のセクションで用意した Web API 用のカスタムフィルターを有効化するため、以下のコードを追加します。

public static void Register(HttpConfiguration config)
{
  // ・・・中略・・・

  // カスタム RequireHttpsAttribute フィルターを追加
  config.Filters.Add(new Mvc5.Filters.RequireHttpsAttribute());
}

その後、WebApiConfig.Register を Global.asax の Application_Start メソッドに登録します。

protected void Application_Start()
{
    // ・・・中略・・・

    // これを追加
    GlobalConfiguration.Configure(WebApiConfig.Register);
}

(5) UseOAuthBearerTokens 追加

トークン認証を有効にするため、Startup.Auth.cs の ConfigureAuth メソッドに以下のコードを追加します。コードは Web API テンプレートで作成したプロジェクトにありますので、それをコピーして修正すればいいです。

public partial class Startup
{
  // 追加
  public static OAuthAuthorizationServerOptions 
                          OAuthOptions { get; private set; }

  // 追加
  public static string PublicClientId { get; private set; }

  public void ConfigureAuth(IAppBuilder app)
  {

    // ・・・中略・・・

    // 追加
    PublicClientId = "self";
    OAuthOptions = new OAuthAuthorizationServerOptions
    {
      TokenEndpointPath = new PathString("/Token"),
      Provider = new ApplicationOAuthProvider(PublicClientId),

      // 不要と思われるのでコメントアウト（説明下記）
      //AuthorizeEndpointPath = 
      //        new PathString("/api/Account/ExternalLogin"),

      // デフォルトで 20 分。MVC 側に合わせて 14 日に設定
      AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),

      // SSL 強制のため false に設定
      AllowInsecureHttp = false
    };
    app.UseOAuthBearerTokens(OAuthOptions);

    // ・・・後略・・・

AllowInsecureHttp プロパティは SSL 通信強制のため false に設定してください。

ApplicationOAuthProvider は Web API テンプレートで作成したプロジェクトの Providers フォルダにあるものをコピーして使います。詳しくは下の「(6) ApplicationOAuthProvider 追加」セクションを見てください。

AuthorizeEndpointPath プロパティについては、stackoverflow の記事 What is AuthorizeEndpointPath? に説明があります。

ユーザーがクレデンシャルを入力してトークンを得るという条件に限定すれば、AuthorizeEndpointPath プロパティの設定はコメントアウトしても問題なさそうです。（それで 100% 問題ないと言い切れる自信はないですが）

(6) ApplicationOAuthProvider 追加

Web API テンプレートで作成したプロジェクトの Providers フォルダにある ApplicationOAuthProvider.cs をフォルダごと MVC プロジェクトにコピーします。名前空間は自分のプロジェクトに合わせて変更してください。

GrantResourceOwnerCredentials メソッドの中で使用されている第 2 引数に string を持つ GenerateUserIdentityAsync メソッドは、Web API プロジェクトの IdentityModel.cs に定義されているものをコピーして、MVC プロジェクトの IdentityModel.cs にペーストしてください。

このプロバイダは、OWIN ミドルウェアのプラグインとして、OWIN ミドルウェアで発生するイベントを処理するためのものだそうです。詳しくは Microsoft の文書 Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API 2.2 の Configuring the Authorization Server のセクションを見てください。

(7) トークン取得・削除のスクリプト

トークン取得・削除のスクリプトは以下のコードのようにします。

var tokenKey = 'accessToken';

function getToken() {
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;

    var loginData = {
        grant_type: 'password',
        username: email,
        password: password
    };

    $.ajax({
        type: "POST",
        url: "/Token",
        data: loginData,
        success: function (data) {
            sessionStorage.setItem(tokenKey, data.access_token);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            //・・・中略・・・
        }
    });
}

function removeToken() {
    sessionStorage.removeItem(tokenKey);
}

以上で MVC 側はクッキーベースで、Web API 側はトークンベースで独立して認証が働きます。それを可能にしているのは WebApiConfig.cs に含まれている以下の 2 行です。

config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(
                    OAuthDefaults.AuthenticationType));

この 2 行をコメントアウトすると Web API 側もクッキーベースの認証となります。なお、その際 Web API に匿名アクセスすると 401 応答ではなく、以下のように 200 応答となりますので注意してください。

Visual Studio 2013 / 2015 の Web API テンプレートで、認証を「個別のユーザーアカウントカウント」として自動生成させた Web API アプリの認証は、デフォルトで、トークンを要求ヘッダに含めてサーバーに送信するトークンベースになります。（MVC テンプレートで作った場合は未確認です。Core 3.1 版の Web API については別の記事「ASP.NET Core Web API と JWT」に書きました）

上の画像は Web API に要求をかけたときの要求ヘッダを Fiddler で表示したものです。赤枠で示した部分が認証に使われるトークンです。（画像には認証クッキーも含まれていますが、その理由等については後述します）

（注：クッキーではなくトークンを使う理由はセキュリティ (CSRF) 対策だそうです。MVC アプリではビューに Html ヘルパーの AntiForgeryToken メソッドを、アクションメソッドに [ValidateAntiForgeryToken] 属性を付与して CSRF 対策ができますが、Web API ではそういう手段が使えませんから）

テンプレートで自動生成されたそのままの状態でアプリを実行してトークンが送られるわけではないです。トークンを送って認証が通るようにする手順と注意事項を以下に書いておきます。

トークンによる認証の仕組みについては Microsoft の文書 Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API 2.2 に詳しく書いてありますので、それを読むことをお勧めします。

その記事からリンクが張ってある GitHub のサイトから完全なサンプルが入手できます。それを試してもらってもいいのですが、そのサンプルには SSL 関係や knockout.js など Web API の認証とは直接関係のない部分もあって分かり難いところがあるかもしれません。（注：運用上は SSL の実装は必須です。knockout.js は必須ではありませんが）

なので、以下に Visual Studio 2015 の Web API テンプレート作成したアプリに、追加で何を実装すればトークンを入手でき、そしてトークンをどのように送信すれば認証が通るかだけを書いておきます。

事前に、ASP.NET Identity がユーザー情報を取得する LocalDB に email と password を登録し有効なユーザーアカウントを作成しておく必要があります。（その手順は本題とは直接関係ないので割愛します。手抜きでスミマセン）

トークンの入手は、ビューに以下のようなスクリプトを追加し、jQuery ajax を使って登録済みの email と password をトークンエンドポイント /Token に POST してやります。email と password が有効であれば、応答の JSON 文字列にトークンが含まれて戻ってきます。そのトークンを sessionStorage に保存します。

var tokenKey = 'accessToken';

function getToken() {
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;

    var loginData = {
        grant_type: 'password',
        username: email,
        password: password
    };

    $.ajax({
        type: "POST",
        url: "/Token",
        data: loginData,
        success: function (data) {
          sessionStorage.setItem(tokenKey, data.access_token);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // ・・・中略・・・
        }
    });
}

トークンの送信は、上の getToken メソッドで sessionStorage に保存したトークンを取得し、以下のように要求ヘッダの Authorization に設定して送信してやります。それで認証が通って期待した応答が返ってきます。

function apiHeroesGet() {
    var token = sessionStorage.getItem(tokenKey);
    var headers = {};
    if (token) {
        headers.Authorization = 'Bearer ' + token;
    }

    $.ajax({
        type: "GET",
        url: "/api/values",
        headers: headers,
        success: function (data, textStatus, jqXHR) {
            // ・・・中略・・・
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // ・・・中略・・・
        }
    });
}

主な話は以上ですが、追加で 2, 3 気になったことを書いておきます。

(1) トークンエンドポイント /Token

上のスクリプトの getToken メソッドの email と password の送信先 /Token は、Startup.Auth.cs の ConfigureAuth メソッドで OAuthAuthorizationServerOptions クラスを初期化するときに TokenEndpointPath プロパティに設定されます。

自動生成されたコードの中のアクションメソッドだと思って探したけれど、見つからないので焦ったというのは内緒です。（笑）

(2) 認証クッキーの発行

上の画像で認証クッキーも発行されていますが、それは上のスクリプトの getToken メソッドでトークンを発行する際に同時に発行されます。

デフォルトで、Startup.Auth.cs の ConfigureAuth メソッドには app.UseCookieAuthentication(...) メソッドが含まれていることに注意してください。

MVC 側のアクションメソッドの認証には、この認証クッキーが使用されます。例えば MVC 側のアクションメソッドに [Authorize] を付与してやると、認証クッキーなしでは 401 応答が返ってきます。

401 応答ではなく、302 応答を返してログインページにリダイレクトするには、引数の CookieAuthenticationOptions オブジェクトの LoginPath プロパティにログインページの URL を new PathString("/Account/Login") というように指定してやります。

(3) AuthenticationType の設定

UseCookieAuthentication メソッドの引数 CookieAuthenticationOptions オブジェクトの AuthenticationType を設定すると、トークンエンドポイント /Token に email と password を送信しても認証クッキーは発行されなくなります。（なお、トークンは発行されます）

認証クッキーは MVC 側でのログインだけで発行したい場合は、AuthenticationType を設定すればよさそうです。そのことが書いてあるドキュメントは見つけられなかったのですが、そのような目的のためにそうなっているような気がします。

AuthenticationType に設定されるのは単なる文字列で、何かの識別用に使っているらしいです。これをきちんと指定しないとログアウトできないなどの問題が出るという stackoverflow の記事を見かけました。（自分が Web API テンプレートのアプリで試した限りではそういう問題は出なかったですが・・・）

(4) トークンによる認証の強制

デフォルトでは Web API 側の認証はトークンになるのは、WebApiConfig.cs にある以下のコードによります。

config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(
                OAuthDefaults.AuthenticationType));

前者のメソッドでホスト（IIS と MVC） による認証は無視され、Web API には匿名アクセスとなるらしいです。後者のメソッドで HostAuthenticationFilter によりベアラトークンによる認証が行われるようになるそうです。

ちなみに、上の 2 行をコメントアウトすると認証クッキーだけで認証が通ってしまうようになります。

詳しくは、Microsoft の文書 Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API 2.2 の Configuring Web API to use Bearer Tokens のセクションに詳しく書いてありますので、そちらを見てください。

ASP.NET Web API でもクライアントから送信されてきたデータはアクションメソッドの引数にバインドされますが、その仕組みは ASP.NET MVC とは異なるということを書きます。

詳しくは MSDN Blog の記事「How WebAPI does Parameter Binding」に書いてありますのでそちらを読んでもらうとして、要点だけ書きますと以下の通りです。

1. Model Binding または Formatters を利用するという 2 つの方法があって、Web API の場合は、クエリ文字列からパラメータを取得する場合は Model Binding を、ボディから取得する場合は Formatter を使う。
2. string などのプリミティブ型をアクションメソッドの引数にした場合、引数���属性が付与されてなければクエリ文字列からパラメータを探してモデルバインディングする。
3. コンプレックス型（例：記事の Customer クラス、下のコードの Hero クラス）の場合、デフォルトでは Formatter を使ってボディからパラメータを取得する。

上記の点を踏まえたサンプルコードを以下にアップしておきます。

Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;

namespace WebAPI.Models
{
    public class Hero
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Api Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web;
using WebAPI.Models;
 
namespace WebAPI.Controllers
{
    public class ValuesController : ApiController
    {
        private List<Hero> heroes = new List<Hero> {
              new Hero {Id = 1, Name = "スーパーマン"},
              new Hero {Id = 2, Name = "バットマン"},
              new Hero {Id = 3, Name = "ウェブマトリクスマン"},
              new Hero {Id = 4, Name = "チャッカマン"},
              new Hero {Id = 5, Name = "スライムマン"}
          };

        // GET api/values (Read...すべてのレコードを取得)
        public List<Hero> Get()
        {
            return heroes;
        }

        // GET api/values/5 (Read...id 指定のレコード取得)
        public Hero Get(int id)
        {
            return heroes[id - 1];
        }

        // POST api/values  (Create...レコード追加)
        public List<Hero> Post(Hero postedHero)
        {
            heroes.Add(postedHero);
            return heroes;
        }

        // PUT api/values/5 (Update...id 指定のレコード更新)
        public List<Hero> Put(int id, [FromBody] string name)
        {
            heroes[id - 1].Name = name;
            return heroes;
        }

        // DELETE api/values/5 (Delete...id 指定のレコード削除)
        public List<Hero> Delete(int id)
        {
            heroes.RemoveAt(id - 1);
            return heroes;
        }
    }
}

上の Api を呼び出すスクリプト

<input type="button" value="READ ALL"
       onclick="apiHeroesGet();" />
<input type="button" value="READ 5"
       onclick="apiHeroesGet5();" />
<input type="button" value="UPDATE 5"
       onclick="apiHeroesPut5();" />
<input type="button" value="DELETE 5"
       onclick="apiHeroesDelete5();" />
<input type="button" value="CREATE 6"
       onclick="apiHeroesPost();" />

<ul id="heroes"></ul>

@section Scripts {
  <script type="text/javascript">
  //<![CDATA[

    function apiHeroesGet() {
      $.ajax({
        type: "GET",
        url: "api/values",
        success: function (data, textStatus, jqXHR) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesGet5() {
      $.ajax({
        type: "GET",
        url: "api/values/5",
        success: function (data, textStatus, jqXHR) {
          $('#heroes').empty();
          var str = data.Id + ': ' + data.Name;
          $('<li/>', { html: str }).appendTo($('#heroes'));
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesPut5() {
      $.ajax({
        type: "PUT",
        url: "api/values/5",
        data: encodeURI("=ガッチャマン"),

        // 以下のコードがあるとバインドできず null が渡される
        //contentType: "application/json; charset=utf-8",

        success: function (data) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
             ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesDelete5() {
      $.ajax({
        type: "DELETE",
        url: "api/values/5",
        success: function (data) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesPost() {
      var j = { Id: 6, Name: "ガッチャマンの息子" };
      var jsonString = JSON.stringify(j);
      $.ajax({
        type: "POST",
        url: "api/values",
        data: jsonString,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

  //]]>
  </script>
}

特に注意すべき点は Put(int id, [FromBody] string name) メソッドとそれを呼び出すスクリプトです。

アクションメソッドの引数が string 型でボディからパラメータを得たい場合は [FromBody] 属性が必要です。

さらに、 name にバインドするのに Formatter がどういう動きをしているのか調べ切れてませんが、自分が試した限りでは送信するデータをスクリプトの data に "name=value" と設定してはダメで、上のサンプルコードのように "=value" というように設定しないと引数 name にはバインドされませんでした。

もう一つ、Content-Type に application/json を設定するとバインドできず null が渡されてしまいます。理由は、Web API は要求ヘッダの Content-Type を見て適切な Formatter を選択するそうですが、"=value" は JSON ではないからだと思われます。

jQuery ajax で contentType を設定しないと application/x-www-form-urlencoded (デフォルト) となりますが、その場合は期待通り引数 name に "value" がバインドされます。

上記のようなトラブルを避けるために、アクションメソッドの引数は Post(Hero postedHero) と同様にコンプレックス型（Hero クラス）とし、スクリプトのapiHeroesPost() のように JSON 文字列を送信するようにした方が良いかもしれません。