zukucode
主にWEB関連の情報を技術メモとして発信しています。
ASP.NET

ASP.NET jwtの認証トークンをcookieで保持する方法

ASP.NETのjwt認証を設定したとき、認証トークンをlocalstorageではなくhttponlyのcookieで保持する方法を紹介します。

ASP.NET jwtのログイン認証を実装するで紹介した方法で認証方法を設定しているとします。

レスポンス方法の変更

httponlyのcookieをセットするため、認証トークンをデータとしてレスポンスするのではなく、以下のようにcookieとしてレスポンスします。

SameSiteやSecureの項目は適宜変更してください。

return Ok(GenerateToken(login_id)); // 認証トークンをレスポンスする
Response.Cookies.Append("X-Access-Token", token, new CookieOptions() { HttpOnly = true, SameSite = SameSiteMode.Lax, Secure = true });
return Ok();

cookieにセットされた認証トークンはリクエスト時に自動的にリクエスト情報に含まれるので、以下の処理は不要になります。

axios.interceptors.request.use((request) => {
    request.headers['Authorization'] = `Bearer ${token}`;
    return request;
});

Startup.csの修正

X-Access-Tokenという名前のcookieを認証トークンとして読み込むようにStartup.csを修正します。

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddJwtBearer(options =>
{
    var jwtConfig = new JwtConfig();
    Configuration.Bind("Jwt", jwtConfig);
    options.TokenValidationParameters = new TokenValidationParameters()
    {
        ValidateIssuer = true,
        ValidateAudience = true,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        ValidIssuer = "https://zukucode.com",
        ValidAudience = "https://zukucode.com",
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("1234567890abcdefg")),
        ClockSkew = TimeSpan.Zero
    };
    options.Events = new JwtBearerEvents()
    {
        OnMessageReceived = context =>
        {
            if (context.Request.Cookies.ContainsKey("X-Access-Token"))
            {
                // "X-Access-Tokenのcookieが存在する場合はこの値を認証トークンとして扱う
                context.Token = context.Request.Cookies["X-Access-Token"];
            }
            return Task.CompletedTask;
        }
    };
});

以上で設定は完了です。

ASP.NET

関連記事