ASP.NET Core에서 JWT 인증 구현하기

ASP.NET Core에서 JWT 인증을 구현하려면 다음과 같은 단계를 거칩니다.

1. NuGet 패키지 설치하기

ASP.NET Core에서 JWT 인증을 구현하려면 Microsoft.AspNetCore.Authentication.JwtBearer NuGet 패키지를 설치해야 합니다. 이 패키지는 JWT 인증을 구현하는 데 필요한 클래스와 미들웨어를 제공합니다.

2. JWT 인증 설정하기

다음으로, Startup.cs 파일의 ConfigureServices 메서드에서 JWT 인증을 설정합니다. 아래는 예시 코드입니다.

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;

public void ConfigureServices(IServiceCollection services)
{
    // ...

    // JWT 인증을 사용하도록 설정합니다.
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidateAudience = true,
                ValidateLifetime = true,
                ValidateIssuerSigningKey = true,
                ValidIssuer = "your-issuer",
                ValidAudience = "your-audience",
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("your-secret-key"))
            };
        });

    // ...
}

위 코드에서 AddAuthentication 메서드를 호출하여 JWT 인증을 사용하도록 설정하고, AddJwtBearer 메서드를 호출하여 JWT 인증 구성을 설정합니다. TokenValidationParameters 객체를 사용하여 토큰 유효성 검사를 설정합니다. 위 코드에서는 다음과 같은 설정이 포함되어 있습니다.

  • ValidateIssuer: 발급자(issuer)를 유효성 검사할지 여부를 설정합니다.
  • ValidateAudience: 수신자(audience)를 유효성 검사할지 여부를 설정합니다.
  • ValidateLifetime: 토큰의 만료 시간을 유효성 검사할지 여부를 설정합니다.
  • ValidateIssuerSigningKey: 발행자가 사용한 키가 올바른지 여부를 검증할지 여부를 설정합니다.
  • ValidIssuer: 발급자(issuer)의 이름을 설정합니다.
  • ValidAudience: 수신자(audience)의 이름을 설정합니다.
  • IssuerSigningKey: 토큰 서명에 사용할 비밀 키를 설정합니다.
  • ValidIssuer: 발급자(issuer)의 이름을 설정합니다.
  • IssuerSigningKey: 토큰 서명에 사용할 비밀 키를 설정합니다.

3. JWT 토큰 발급하기

다음으로, JWT 토큰을 발급하는 로직을 작성합니다. 토큰 발급은 로그인이나 회원가입과 같은 인증 과정을 통해 이루어지며, System.IdentityModel.Tokens.Jwt 패키지를 사용하여 JWT 토큰을 생성합니다. 아래는 예시 코드입니다.

using System.IdentityModel.Tokens.Jwt;
using Microsoft.IdentityModel.Tokens;

public IActionResult Login(LoginViewModel model)
{
    // ...

    var claims = new[]
    {
        new Claim(ClaimTypes.Name, model.Username),
        new Claim(ClaimTypes.Role, "admin")
    };

    var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("your-secret-key"));
    var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

    var token = new JwtSecurityToken(
        issuer: "your-issuer",
        audience: "your-audience",
        claims: claims,
        expires: DateTime.Now.AddMinutes(30),
        signingCredentials: creds);

    return Ok(new { token = new JwtSecurityTokenHandler().WriteToken(token) });
}

위 코드에서 claims 배열에는 토큰에 담길 클레임(claim)을 설정합니다. 여기서는 사용자 이름과 역할을 설정하였습니다. 이후 SymmetricSecurityKey 클래스를 사용하여 비밀 키를 생성하고, SigningCredentials 클래스를 사용하여 서명 정보를 생성합니다. 마지막으로 JwtSecurityToken 클래스를 사용하여 JWT 토큰을 생성합니다.

4. JWT 인증 적용하기

마지막으로, JWT 인증을 적용하여 인증이 필요한 요청에 대해 JWT 토큰을 검증합니다. 이는 Startup.cs 파일의 Configure 메서드에서 UseAuthentication 미들웨어를 추가하여 수행할 수 있습니다. 아래는 예시 코드입니다.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...

    app.UseRouting();

    app.UseAuthentication();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    // ...
}

위 코드에서 UseAuthentication 메서드를 호출하여 JWT 인증을 적용하고, UseAuthorization 메서드를 호출하여 권한 검사를 수행합니다.

React에서 JWT 인증 구현하기

React에서 JWT 인증을 구현하려면, 먼저 JWT 토큰을 저장하고 사용하는 방법을 이해해야 합니다.

1. JWT 토큰 저장하기

React에서 JWT 토큰을 저장하는 방법은 여러 가지 있지만, 일반적으로는 localStorage를 사용하여 JWT 토큰을 저장합니다. localStorage는 브라우저에 데이터를 저장할 수 있는 객체입니다. 아래는 예시 코드입니다.

// 로그인 성공 시 JWT 토큰을 저장하는 함수
function setToken(token) {
  localStorage.setItem('token', token);
}

// JWT 토큰을 가져오는 함수
function getToken() {
  return localStorage.getItem('token');
}

// JWT 토큰을 삭제하는 함수
function removeToken() {
  localStorage.removeItem('token');
}

위 코드에서 setToken 함수는 로그인 성공 시 JWT 토큰을 localStorage에 저장합니다. getToken 함수는 localStorage에서 JWT 토큰을 가져옵니다. removeToken 함수는 localStorage에서 JWT 토큰을 삭제합니다.

2. JWT 토큰 인증 구현하기

React에서 JWT 인증을 구현하기 위해서는, 서버로부터 받아온 JWT 토큰을 저장하고, 이를 서버에 전송하여 인증하는 로직을 작성해야 합니다. 아래는 예시 코드입니다.

import axios from 'axios';

// JWT 토큰을 포함한 HTTP 요청을 보내는 함수
function sendAuthenticatedRequest(url, method, data) {
  const token = getToken();

  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  }

  return axios({
    method: method,
    url: url,
    data: data
  }).catch((error) => {
    if (error.response.status === 401) {
      // 인증 실패 시 JWT 토큰 삭제
      removeToken();
    }

    throw error;
  });
}

위 코드에서 sendAuthenticatedRequest 함수는 JWT 토큰을 포함한 HTTP 요청을 보냅니다. getToken 함수를 사용하여 localStorage에서 JWT 토큰을 가져온 후, axios.defaults.headers.common['Authorization'] 속성을 설정하여 JWT 토큰을 HTTP 요청 헤더에 포함시킵니다. 이후 axios를 사용하여 HTTP 요청을 보내고, 인증 실패 시에는 removeToken 함수를 호출하여 JWT 토큰을 삭제합니다.

마무리

이상으로 ASP.NET Core와 React에서 JWT 인증을 구현하는 방법에 대해 알아보았습니다. JWT 인증은 간편하면서도 강력한 보안 기술이므로, 앞으로 개발할 프로젝트에서도 적극적으로 활용해보시기 바랍니다.

날짜:

카테고리:

태그:

,