## 소개 새 프로젝트를 시작할 때, 보통 몇 가지를 건너뛰지 않습니다: API, 인증 + 인가, 아이덴티티, 그리고 최종 사용자 로그인 흐름. 이러한 것들을 시작하는 것은 어려웠습니다. 왜냐하면 많은 개념과 기술이 널리 퍼져 있기 때문입니다: RESTful/GraphQL, 웹 프론트엔드, 네이티브 클라이언트, 클라이언트를 API와 연결하기, 보안과 사용자 경험의 균형을 맞추는 인증 모범 사례 등. 또한, 대부분의 작업은 "반복적"입니다. 즉, 거의 모든 프로젝트에서 필요하고 유사하지만 약간의 조정이 필요합니다. 겁나고 지루한가요? 당황하지 마세요. 오늘날 우리는 오픈 소스가 있습니다. 아래 두 개의 오픈 소스 프로젝트를 통해 상황이 어렵지 않습니다.: - [Logto](https://github.com/logto-io/logto): 몇 분 안에 로그인, 인증 및 사용자 아이덴티티를 구축할 수 있도록 도와줍니다. - [Hasura](https://github.com/hasura/graphql-engine): 체계적인 접근 제어로 blazing fast, 즉시 실시간 GraphQL API를 데이터베이스에 제공합니다. 이 기사에서는 Logto와 Hasura를 연결하는 데 초점을 맞출 것이며, 이로 인해 마찰 없이 인증, 인가 및 GraphQL API를 구현할 수 있습니다. 따라서 과학적인 학습 없이 빠르게 비즈니스에 뛰어들 수 있습니다. ## 시작하기 ### 사전 준비 [Logto](https://docs.logto.io/docs/tutorials/get-started/)와 [Hasura](https://hasura.io/docs/latest/getting-started/index/)는 모두 괜찮은 시작 가이드를 제공하므로, 이를 읽고 기본적인 감을 가졌다고 가정합니다. 이 둘의 실행 인스턴스에 대한 액세스가 필요합니다. 접근 가능한 엔드포인트는 다음과 같은 것으로 가정합니다: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` Docker/Docker Compose를 사용 중인 경우, 머신(호스트)의 `localhost`에 접근하기 위해 Docker 마법 문자열 `host.docker.internal`을 사용할 수 있습니다. 이 경우 Logto 엔드포인트는 `http://host.docker.internal:3001`이 됩니다. 또한, 클라이언트 앱을 구축하기 위해 선호하는 플랫폼과 프레임워크(예: React 또는 Next.js)가 있다고 가정합니다. ### Logto에서 API 설정 Logto 관리 콘솔의 왼쪽 탐색 사이드바에서 “API 리소스”을 클릭하면 API 리소스 관리 페이지가 표시됩니다. 그런 후 오른쪽 상단 모서리의 커다란 “+ API 리소스 생성” 버튼을 클릭합니다. 열리는 모달에서 API 이름에 `Hasura`를 입력하고 API 식별자에 `https://hasura.api`를 입력합니다. Create API modal

우리는 이 API 식별자를 기사 나머지 부분에서 사용할 것입니다. 하지만 당신의 선호에 따라 값을 변경해도 됩니다. “API 리소스 생성”을 클릭하면 리소스가 성공적으로 생성되었다는 메시지가 표시됩니다. 지금은 Logto에 필요한 모든 것입니다. ### Hasura에 대한 역할 생성 Hasura의 권한 관리를 활용하기 위해, Logto에서 역할을 만들려고 합니다. 이러한 역할은 Hasura의 역할에 매핑됩니다. Create Role

역할 이름은 Hasura의 "Permissions" 페이지에서의 역할 이름과 동일해야 합니다. 사용자에게 역할 할당하는 것을 잊지 마세요. ### Hasura에서 웹훅 인증 활성화하기 [Hasura는 역할 기반 접근 관리를 사용합니다](https://hasura.io/docs/latest/auth/index/) 이로 인해 인가를 처리합니다. 따라서 우리는 인증만 해결하면 됩니다. 웹훅과 JWT 두 가지 방법을 지원합니다. 더 유연한 [웹훅](https://hasura.io/docs/latest/auth/authentication/webhook/)을 선택했습니다. 웹훅 인증을 활성화하려면 관리자 비밀과 인증 훅 엔드포인트를 설정해야 합니다. - 관리자 비밀은 요청을 보낼 때 Hasura 관리자 접근을 가지기 위한 키입니다. 웹훅 인증을 활성화하기 전에 필요합니다. 안전한 장소에 보관하고, 실제 환경에서 사용하지 마세요. - 인증 훅 엔드포인트는 인증 요청을 보내는 URL입니다. 이를 [환경 변수](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode)를 통해 설정할 수 있습니다.: ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # 본인의 비밀로 대체하세요 HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` Logto에서 입력한 API 식별자를 사용하여 인증 훅 엔드포인트를 생성하는 것을 알 수 있습니다. 이는 사용자가 무작위일 수 있는 악의적인 것이 아니라 올바른 bearer 토큰을 전달하는 것을 보장합니다. 다른 Logto 엔드포인트 또는 API 식별자를 사용하는 경우 인증 훅 엔드포인트를 업데이트해야 합니다. 예를 들어, `https://logto.domain.com`을 Logto 엔드포인트로, `https://graphql.domain.com`을 API 식별자로 사용할 경우 다음과 같이 될 것입니다.: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 이제부터 모든 GraphQL 요청에 대해, Hasura는 모든 요청 헤더를 Logto 인증 훅 엔드포인트로 보내고, Logto는 적절히 응답할 것입니다. ## 보안된 GraphQL 요청 보내기 ### 요약 우리는 실제 환경에서 Hasura 관리자 비밀을 사용하지 않기 때문에, 모든 GraphQL 요청은 다음 헤더에 의해 보안됩니다.: - `Authorization` Logto가 생성하는 표준 bearer 토큰 - `Expected-Role` Logto가 인증 훅 응답에서 보여주기를 원하는 역할 `Authorization` 헤더가 나타내는 사용자가 `Expected-Role`을 가지고 있지 않은 경우, Logto는 `401 Unauthorized`로 응답합니다. `Authorization` 헤더는 관객에 대해 Hasura API 식별자를 가진 JWT 형식의 유효한 액세스 토큰이 필요합니다. 잠깐 - 모든 이러한 것들을 기억하고 구성하는 것은 꽤 어렵습니다. 다행히도 geeky 부분을 단순화하는 Logto SDK가 있습니다. ### Logto SDK 통합 [통합 가이드](https://docs.logto.io/docs/recipes/integrate-logto/)를 따라 클라이언트 앱에 Logto SDK를 통합하세요. 이것은 GraphQL 요청에 유효한 액세스 토큰을 생성할 수 있는 능력뿐만 아니라, 최종 사용자에게 원활한 로그인 경험을 제공할 수 있게 합니다. 가이드를 완료한 후, `LogtoConfig`에 작은 수정을 해야 합니다: Logto 관리 콘솔에서 생성한 API 식별자를 `resources`에 추가하세요. React SDK를 예로 들어보겠습니다.: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // 이 줄 추가 }; ``` ### 요청 보내기 드디어! 사용자가 로그인한 후, Logto SDK의 `getAccessToken()`을 사용하여 Hasura GraphQL 요청을 위한 액세스 토큰을 가져오세요.: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // 요청을 보내기 전에 request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 요약 위의 노력으로, 우리는 소개에서 건너뛸 수 없는 모든 것을 성공적으로 구현했습니다.: - 데이터베이스 스키마 기반 GraphQL API 엔드포인트 - OIDC 프로토콜을 활용한 인증 및 아이덴티티 서비스 - 완전한 최종 사용자 로그인 흐름 및 인증 상태 관리 - 사용자 아이덴티티와 역할에 기반한 보안 API 접근 어렵지 않죠? 문제가 발생하면 [Logto](https://discord.gg/vRvwuwgpVX) 또는 [Hasura](https://discord.gg/hasura) 디스코드 서버에 가입하여 팀과 실시간 채팅을 해보세요.