## 소개 웹 애플리케이션을 개발할 때 API 엔드포인트를 무단 액세스로부터 보호하는 것이 매우 중요합니다. 온라인 쇼핑 웹사이트를 구축하는 상황을 가정해보세요; 사이버 도둑들이 API 를 악용하는 것을 원하지 않을 것입니다. 이미 사용자가 로그인해야 특정 작업을 수행할 수 있는 Express.js 애플리케이션을 구축했다고 가정합니다. 그렇지 않다면 [Logto](https://logto.io/) 를 사용하여 몇 줄의 코드만으로 사용자 인증 흐름을 설정할 수 있습니다. 그러나 사용자 인증 후에도 API 엔드포인트를 보호하기 위한 다양한 선택지가 있습니다. 불행히도, 대부분의 옵션에는 단점이 있습니다: - **세션 기반 인증**: API 를 세션 저장소에 연결하는 것은 확장성이 떨어지며, 마이크로서비스에 적합하지 않습니다. - **인증 서비스를 호출하기**: 이는 추가 네트워크 호출을 포함하며, 지연 시간과 비용을 증가시킵니다. 일부 인증 서비스는 API 호출 볼륨에 따라 비용을 부과하기도 하여, 높은 비용이 발생할 수 있습니다. 이 튜토리얼에서는 JSON Web Tokens (JWT) 와 Logto 를 사용하여 API 엔드포인트를 강화하는 방법을 시연합니다. 이 방법은 확장성이 뛰어나고 추가 비용이 최소화됩니다. ## 사전 준비 사항 시작하기 전에 다음이 필요합니다: - Logto 계정. 계정이 없다면 [무료로 가입](https://cloud.logto.io/)할 수 있습니다. - API 보호가 필요한 Express.js 프로젝트 및 API 를 사용하는 클라이언트 애플리케이션. - [JSON Web Token (JWT)](https://datatracker.ietf.org/doc/html/rfc7519) 기본 지식. RFC 가 길어질 수 있다는 것을 이해합니다. 요컨대, JWT 는 헤더, 페이로드, 서명 세 부분으로 구성된 base64로 인코딩된 문자열입니다. 페이로드에는 원하는 정보를 저장하고, 서명은 토큰 무결성을 보장합니다. ## Logto 에서 API 리소스 정의하기 Logto 는 [RFC 8707: OAuth 2.0 을 위한 리소스 인디케이터](https://datatracker.ietf.org/doc/html/rfc8707)의 모든 이점을 활용하여 API 엔드포인트를 보호합니다. 즉, 실제 URL 을 사용하여 API 리소스를 정의할 수 있습니다. Logto 콘솔의 "API 리소스" 탭으로 이동하여 "API 리소스 생성"을 클릭하여 새 항목을 만드세요. 예를 들어, `/api/products` 엔드포인트를 보호하려면 `https://yourdomain.com/api/products` 를 식별자로 사용할 수 있습니다. ![API 리소스 생성](https://uploads.strapi.logto.io/1/create_api_resource_13a2c8e660.png) ## 클라이언트 애플리케이션에서 액세스 토큰 얻기 다음 단계로 진행하려면 클라이언트 애플리케이션에 Logto SDK 를 통합해야 합니다. 이 애플리케이션은 Express.js 백엔드와 다를 수 있습니다; 예를 들어, React 앱이 Express.js 를 백엔드 API 서버로 사용할 수 있습니다. 이 보조금에서 API 에 대한 액세스 토큰을 요청하려면 Logto SDK 설정을 변경해야 합니다. React 를 사용하는 예는 다음과 같습니다: ```tsx import { LogtoProvider } from '@logto/react'; const App = () => { return ( ); }; ``` 사용자가 Logto 를 통해 로그인하면, Logto SDK 내의 `isAuthenticated` 가 `true` 로 변경됩니다: ```tsx import { useLogto } from '@logto/react'; const Content = () => { const { isAuthenticated } = useLogto(); console.log(isAuthenticated); // true }; ``` 이제 `getAccessToken` 메서드를 사용하여 API 에 대한 액세스 토큰을 가져올 수 있습니다: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); console.log(accessToken); // eyJhbG... } }, [isAuthenticated, getAccessToken]); }; ``` 마지막으로, API 에 요청할 때 이 액세스 토큰을 `Authorization` 헤더에 포함하세요: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); const response = await fetch('https://yourdomain.com/api/products', { headers: { Authorization: `Bearer ${accessToken}`, }, }); } }, [isAuthenticated, getAccessToken]); }; ``` ## API 에서 액세스 토큰 검증하기 Express.js 애플리케이션에서 JWT 검증을 위해 `jose` 라이브러리를 설치하세요: ```bash npm install jose ``` Bearer 인증을 사용하고 있으므로, `Authorization` 헤더에서 액세스 토큰을 추출하세요: ```ts import { IncomingHttpHeaders } from 'http'; const extractBearerTokenFromHeaders = ({ authorization }: IncomingHttpHeaders) => { if (!authorization) { throw new Error('Authorization header is missing'); } if (!authorization.startsWith('Bearer')) { throw new Error('Authorization header is not in the Bearer scheme'); } return authorization.slice(7); // 'Bearer ' 의 길이는 7입니다 }; ``` 그 후, 액세스 토큰을 검증하는 미들웨어를 생성하세요: ```ts import { createRemoteJWKSet, jwtVerify } from 'jose'; // Logto 서버에서 얻은 jwks_uri 를 사용하여 JWKS 생성 // `` 를 실제 Logto 엔드포인트로 대체하세요, 예를 들어 `abc123.logto.app` const jwks = createRemoteJWKSet(new URL('https:///oidc/jwks')); export const authMiddleware = async (req, res, next) => { // 위에서 정의한 도움 함수로 토큰 추출 const token = extractBearerTokenFromHeaders(req.headers); const { payload } = await jwtVerify( // 요청 헤더에서 추출한 원시 Bearer 토큰 token, jwks, { // Logto 서버에 의해 발행된 토큰의 예상 발행자 issuer: 'https:///oidc', // 현재 API 의 리소스 인디케이터, 예상 청중 토큰 audience: 'https://yourdomain.com/api/products', } ); // sub 는 사용자 ID 이며, 사용자 식별에 사용됩니다. const { scope, sub } = payload; // 역할 기반 액세스 제어는 나중에 논의할 것입니다. assert(scope.split(' ').includes('read:products')); return next(); }; ``` 이제 이 미들웨어를 사용하여 API 엔드포인트를 보호할 수 있습니다: ```ts app.get('/api/products', authMiddleware, (req, res) => { // ... }); ``` 이 방법으로, 요청이 도착할 때마다 Logto 서버에 연락할 필요가 없습니다. 대신, Logto 서버에서 한 번 JSON Web Key Set (JWKS) 를 가져와 로컬에서 액세스 토큰을 검증합니다. ## 역할 기반 액세스 제어 지금까지 우리는 Logto 를 통해 사용자가 로그인했는지 여부만 확인했습니다. 사용자가 API 엔드포인트에 액세스할 적절한 권한이 있는지는 아직 알 수 없습니다. 이는 Logto 가 모든 사람에게 기존 API 리소스에 대한 액세스 토큰을 얻도록 허용하기 때문입니다. 이를 해결하기 위해 역할 기반 액세스 제어 (RBAC)를 사용할 수 있습니다. Logto 에서 역할을 정의하고 권한을 할당할 수 있습니다. Logto 에서 역할과 권한을 정의하는 방법에 대한 [이 튜토리얼](https://docs.logto.io/docs/recipes/rbac/)을 참조하세요. 역할과 권한을 정의한 후, `LogtoProvider` 구성 요소에 `scopes` 옵션을 추가할 수 있습니다: ```tsx ``` 그런 다음 Logto 는 적절한 범위로서만 사용자가 액세스 토큰을 발급하도록 합니다. 예를 들어, 사용자가 `read:products` 범위만 가지고 있다면, 액세스 토큰은 해당 범위만 포함합니다: ```json { "scope": "read:products", "sub": "1234567890" } ``` 만약 사용자가 `read:products` 와 `write:products` 범위를 모두 가지고 있다면, 액세스 토큰은 공백을 구분자로 사용하여 두 가지 범위를 모두 포함합니다: ```json { "scope": "read:products write:products", "sub": "1234567890" } ``` Express.js 애플리케이션에서 API 엔드포인트에 액세스하기 전에 액세스 토큰에 올바른 범위가 포함되어 있는지 확인할 수 있습니다: ```ts assert(scope.split(' ').includes('read:products')); ``` ## 결론 API 엔드포인트를 보호하면서 확장성을 보장하는 것은 작은 일이 아닙니다. Logto 에서는 개발자가 비즈니스 로직에 더 집중할 수 있도록 요청 인증을 간소화하려고 노력합니다. 궁금한 점이 있으면 언제든지 우리의 [Discord 서버](https://discord.gg/UEPaF3j5e6)에서 질문하세요. 우리의 커뮤니티는 항상 여러분을 도울 준비가 되어 있습니다. 오늘 Logto 를 사용해보세요