Express.js API 를 JWT 와 Logto 로 보호하기

소개#

웹 애플리케이션을 개발할 때 API 엔드포인트를 무단 액세스로부터 보호하는 것이 매우 중요합니다. 온라인 쇼핑 웹사이트를 구축하는 상황을 가정해보세요; 사이버 도둑들이 API 를 악용하는 것을 원하지 않을 것입니다.

이미 사용자가 로그인해야 특정 작업을 수행할 수 있는 Express.js 애플리케이션을 구축했다고 가정합니다. 그렇지 않다면 Logto 를 사용하여 몇 줄의 코드만으로 사용자 인증 흐름을 설정할 수 있습니다.

그러나 사용자 인증 후에도 API 엔드포인트를 보호하기 위한 다양한 선택지가 있습니다. 불행히도, 대부분의 옵션에는 단점이 있습니다:

• 세션 기반 인증: API 를 세션 저장소에 연결하는 것은 확장성이 떨어지며, 마이크로서비스에 적합하지 않습니다.
• 인증 서비스를 호출하기: 이는 추가 네트워크 호출을 포함하며, 지연 시간과 비용을 증가시킵니다. 일부 인증 서비스는 API 호출 볼륨에 따라 비용을 부과하기도 하여, 높은 비용이 발생할 수 있습니다.

이 튜토리얼에서는 JSON Web Tokens (JWT) 와 Logto 를 사용하여 API 엔드포인트를 강화하는 방법을 시연합니다. 이 방법은 확장성이 뛰어나고 추가 비용이 최소화됩니다.

사전 준비 사항#

시작하기 전에 다음이 필요합니다:

• Logto 계정. 계정이 없다면 무료로 가입할 수 있습니다.
• API 보호가 필요한 Express.js 프로젝트 및 API 를 사용하는 클라이언트 애플리케이션.
• JSON Web Token (JWT) 기본 지식.

Logto 에서 API 리소스 정의하기#

Logto 는 RFC 8707: OAuth 2.0 을 위한 리소스 인디케이터의 모든 이점을 활용하여 API 엔드포인트를 보호합니다. 즉, 실제 URL 을 사용하여 API 리소스를 정의할 수 있습니다.

Logto 콘솔의 "API 리소스" 탭으로 이동하여 "API 리소스 생성"을 클릭하여 새 항목을 만드세요. 예를 들어, /api/products 엔드포인트를 보호하려면 https://yourdomain.com/api/products 를 식별자로 사용할 수 있습니다.

클라이언트 애플리케이션에서 액세스 토큰 얻기#

다음 단계로 진행하려면 클라이언트 애플리케이션에 Logto SDK 를 통합해야 합니다. 이 애플리케이션은 Express.js 백엔드와 다를 수 있습니다; 예를 들어, React 앱이 Express.js 를 백엔드 API 서버로 사용할 수 있습니다.

이 보조금에서 API 에 대한 액세스 토큰을 요청하려면 Logto SDK 설정을 변경해야 합니다. React 를 사용하는 예는 다음과 같습니다:

사용자가 Logto 를 통해 로그인하면, Logto SDK 내의 isAuthenticated 가 true 로 변경됩니다:

이제 getAccessToken 메서드를 사용하여 API 에 대한 액세스 토큰을 가져올 수 있습니다:

마지막으로, API 에 요청할 때 이 액세스 토큰을 Authorization 헤더에 포함하세요:

API 에서 액세스 토큰 검증하기#

Express.js 애플리케이션에서 JWT 검증을 위해 jose 라이브러리를 설치하세요:

Bearer 인증을 사용하고 있으므로, Authorization 헤더에서 액세스 토큰을 추출하세요:

그 후, 액세스 토큰을 검증하는 미들웨어를 생성하세요:

이제 이 미들웨어를 사용하여 API 엔드포인트를 보호할 수 있습니다:

이 방법으로, 요청이 도착할 때마다 Logto 서버에 연락할 필요가 없습니다. 대신, Logto 서버에서 한 번 JSON Web Key Set (JWKS) 를 가져와 로컬에서 액세스 토큰을 검증합니다.

역할 기반 액세스 제어#

지금까지 우리는 Logto 를 통해 사용자가 로그인했는지 여부만 확인했습니다. 사용자가 API 엔드포인트에 액세스할 적절한 권한이 있는지는 아직 알 수 없습니다. 이는 Logto 가 모든 사람에게 기존 API 리소스에 대한 액세스 토큰을 얻도록 허용하기 때문입니다.

이를 해결하기 위해 역할 기반 액세스 제어 (RBAC)를 사용할 수 있습니다. Logto 에서 역할을 정의하고 권한을 할당할 수 있습니다. Logto 에서 역할과 권한을 정의하는 방법에 대한 이 튜토리얼을 참조하세요.

역할과 권한을 정의한 후, LogtoProvider 구성 요소에 scopes 옵션을 추가할 수 있습니다:

그런 다음 Logto 는 적절한 범위로서만 사용자가 액세스 토큰을 발급하도록 합니다. 예를 들어, 사용자가 read:products 범위만 가지고 있다면, 액세스 토큰은 해당 범위만 포함합니다:

만약 사용자가 read:products 와 write:products 범위를 모두 가지고 있다면, 액세스 토큰은 공백을 구분자로 사용하여 두 가지 범위를 모두 포함합니다:

Express.js 애플리케이션에서 API 엔드포인트에 액세스하기 전에 액세스 토큰에 올바른 범위가 포함되어 있는지 확인할 수 있습니다:

결론#

API 엔드포인트를 보호하면서 확장성을 보장하는 것은 작은 일이 아닙니다. Logto 에서는 개발자가 비즈니스 로직에 더 집중할 수 있도록 요청 인증을 간소화하려고 노력합니다.

궁금한 점이 있으면 언제든지 우리의 Discord 서버에서 질문하세요. 우리의 커뮤니티는 항상 여러분을 도울 준비가 되어 있습니다.