ASP.NET Web APIの認証について

Question

「認証後のトークンはどこで保存され、どのようにリクエストに含めるのか？」
認証についてわからないことばかりなので教えてください。。

■構成
webクライアント→webサーバ→認証サーバ
※イントラに接続しないサービス

■質問内容
１．クライアントは認証サーバからトークンを受け取った後、そのトークンをどこに保存しておくのでしょうか？

２．webサーバのasp.net web api のcontrollerに[Authorization]をつけることで、認証が通ったユーザのみ、web apiを利用できるようになります。
トークンの情報はどこに含めるのでしょうか？クライアントからのリクエストヘッダに毎回含めるのでしょうか？

よろしくお願いいたします。

Comments

[退会済みユーザー]

認証方式は何ですか？

[zun-zun]

OAuth2です。回答になっていますでしょうか？？

[退会済みユーザー]

> OAuth2です ←とすると、すみませんが分かりません。Cookie 以外にないとは思うのですが定かではないです。

[zun-zun]

ありがとうございます、自分でももう少し調べてみます！

[退会済みユーザー]

Fiddler などのキャプチャツールを使って要求・応答ヘッダの中身を調べてみてはいかがでしょう。認証 Cookie がやり取りされているのではないかと思います。

[zun-zun]

ありがとうございます。2については解決しました。F12でよく見たら2については

[zun-zun]

F12でよく見たらヘッダにauthorizationが加えられていました。

Answer 1

今頃何ですが、Web API 認証 とかでググるとこの記事がヒットするので、その後調べて分かったことを書いておきます。

Visual Studio 2015 の Web API のテンプレートで作ったプロジェクトの場合はクッキーではなく、要求ヘッダに含めてサーバーに送信するトークンを使うようです。

以下の記事からリンクが張ってある GitHub のサンプルコードをダウンロードして、その中の app.js を見てもらうと参考になると思います。

Secure a Web API with Individual Accounts and Local Login in ASP.NET Web API 2.2
https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/individual-accounts-in-web-api

ASP.NET Identity でユーザー登録してあるとして、登録済みの email とパスワードを /Token に POST 送信するとトークンが返ってきます。

それを sessionStorage に保存し、Web API に要求を出す際、要求ヘッダに、

Authorization: Bearer rEIpOi...VDI_

というように含めて送信してやります（上で、rEIpOi...VDI_ がトークン）。

紹介した記事は、SSL 関係など Web API の認証とは直接関係のないことがいろいろ書いてあって分かり難いところがあるかもしれませんが、基本的には以下のスクリプトように、getToken でトークンを得て、apiGeroesGet のようにしてトークンを送って認証が通ります。

@section Scripts {
    <script type="text/javascript">
    //<![CDATA[
        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 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) {
                    // ・・・中略・・・
                }
            });
        }
    //]]>
    </script>
}