Appsmith와 APISIX를 사용하여 커스텀 인증 시스템 구축하기

인증 흐름은 웹 애플리케이션의 기본적인 부분입니다. 이는 사용자가 앱을 사용하는 동안 사용자 데이터의 보안과 개인 정보를 보장합니다. 시중에는 다양한 인증 솔루션이 있지만, 로우코드 UI 개발 플랫폼과 API 관리 솔루션을 사용하여 인증 시스템을 구축하면 보안 웹 애플리케이션을 쉽게 만들 수 있습니다. 프론트엔드와 백엔드 기술 및 도구에 대한 지식 없이도 애플리케이션을 만들 수 있습니다. Python, Java, HTML, CSS 또는 다른 JavaScript 프레임워크를 알 필요가 없습니다. 이 글에서는 Appsmith, Apache APISIX, 그리고 JWT를 사용하여 애플리케이션을 보호하기 위한 사용자 정의 간단한 로그인 흐름과 페이지를 UI에 구축하는 방법을 배우게 됩니다.

Appsmith는 강력한 로우코드 개발 플랫폼으로, 사용자가 쉽게 웹 애플리케이션과 대시보드를 만들 수 있게 해줍니다. 시각적 인터페이스와 다양한 사전 구축된 컴포넌트를 제공하여 개발자와 비개발자 모두가 접근할 수 있습니다.

학습 목표

이 글을 통해 다음을 배우게 됩니다:

• 로우코드 환경에서 인증 프로세스를 설계합니다.
• APISIX를 사용하여 백엔드 인증 API를 설정합니다.
• Appsmith의 위젯을 사용하여 UI 페이지를 만듭니다.
• 토큰 기반 인증을 활성화합니다.

인증 아키텍처 설계

구현에 들어가기 전에, 애플리케이션을 위한 인증 시스템의 아키텍처를 먼저 설계하는 것이 중요합니다. 사용자 등록, 로그인, 비밀번호, 세션 관리, JWT 토큰 기반 인증과 같은 주요 구성 요소를 고려하세요. Appsmith와 APISIX 간의 정보 흐름을 정의하여 명확하고 효율적인 인증 워크플로우를 확보하세요.

우리는 간단한 모바일 앱을 구축할 것입니다. 이 앱은 각각 등록, 로그인, 메인 페이지로 구성됩니다. 작업은 두 부분으로 나뉩니다. 첫 번째 부분에서는 Apache APISIX API 게이트웨이를 사용하여 인증 요청을 처리할 백엔드 API를 설정합니다. 기존 API 게이트웨이 엔드포인트를 사용하여 사용자 등록, 로그인, 토큰 생성 흐름을 구현합니다. 두 번째 부분에서는 Appsmith의 드래그 앤 드롭 인터페이스와 사전 구축된 UI 컴포넌트를 사용하여 등록, 로그인, 메인 페이지를 구축하고, 마지막으로 이를 API에 연결하여 폼 제출을 처리합니다. 다음 섹션에서 이러한 컴포넌트를 구축해 보겠습니다.

파트 1: 백엔드 인증 API 설정

모바일 앱에서 인증 요청을 처리할 백엔드 API를 설정하는 것으로 시작합니다. APISIX는 API 엔드포인트를 보호하기 위해 인증을 적용하는 데 사용할 수 있습니다. APISIX를 사용하면 사용자 자격 증명을 검증하고, 인증 토큰을 발급하며, API에 대한 접근을 제어할 수 있습니다. APISIX를 모바일 인증 시스템에 통합하면 추가적인 보안 계층을 추가하고, 인증된 사용자만 보호된 리소스에 접근할 수 있도록 할 수 있습니다.

사전 요구 사항

• Docker는 컨테이너화된 etcd와 APISIX를 설치하는 데 사용됩니다.
• curl은 APISIX Admin API에 요청을 보내는 데 사용됩니다. Postman과 같은 도구를 사용하여 API와 상호 작용할 수도 있습니다.

단계 1: Apache APISIX 설치

APISIX는 다음의 빠른 시작 스크립트로 쉽게 설치하고 시작할 수 있습니다:

curl -sL https://run.api7.ai/apisix/quickstart | sh

단계 2: 백엔드 서비스(업스트림) 구성

다음으로, 백엔드 서비스를 구성합니다. 데모 목적으로, 백엔드 로직을 제공하는 API 서비스라면 무엇이든 사용할 수 있습니다. 이를 자신의 서비스로 대체할 수도 있습니다. 저는 무작위 응답을 생성하는 모의 공개 서버 http://httpbin.org/를 사용합니다. 간단히 하기 위해, 이 엔드포인트 http://httpbin.org/ip에서 우리 기계의 공개 IP 주소를 반환하는 단일 엔드포인트를 사용할 것입니다.

모의 API에 대한 백엔드 서비스로 요청을 라우팅하려면, Admin API를 통해 Apache APISIX에 업스트림 서버를 추가하여 구성해야 합니다.

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'

단계 3: 새로운 플러그인 구성 생성

이 단계에서는 다음 단계에서 생성할 라우트에 대한 플러그인(플러그인 구성 객체 사용)을 구성합니다. 따라서 APISIX는 JWT 플러그인을 활성화하여 엔드포인트를 보호합니다. 매번 엔드포인트에 요청할 때, 요청 헤더에서 JWT 자격 증명을 확인합니다.

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
   "plugins":{
      "jwt-auth": {}
   }
}'

단계 4: 백엔드 API에 대한 라우트 생성

APISIX에서 새로운 라우트 객체를 생성합니다. 이 라우트는 /ip URI에 대한 모든 GET 요청을 가로채고, 기존의 업스트림 및 플러그인 구성을 사용하여 라우팅 메커니즘과 인증 정책을 활성화합니다. 헤더에 JWT 플러그인이 있는지 확인하고, 유효한 경우 요청을 모의 서버로 전달합니다. 그렇지 않으면 즉시 권한 없음 오류를 반환하고 요청은 실제 서비스에 도달하지 않습니다.

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'

단계 5: JWT 토큰 서명을 위한 라우트 생성

우리는 API에 대한 토큰 기반 인증을 구현했습니다. APISIX는 토큰을 생성하고 검증하는 ID 제공자 역할도 할 수 있습니다. 이를 위해, public-api 플러그인을 사용하여 토큰을 서명하는 새로운 API 엔드포인트에 대한 라우트를 설정해야 합니다:

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'

위의 curl 명령을 실행함으로써, login이라는 새로운 라우트를 등록했습니다. 이 라우트는 /login URI 경로를 가지며, 모바일 앱의 로그인 페이지에서 기존 사용자가 이메일을 사용하여 로그인을 시도할 때마다 새로운 토큰을 서명합니다.

파트 2: Appsmith에서 사용자 등록 및 로그인 폼 생성

Appsmith의 로우코드 인터페이스를 사용하여 사용자 등록 및 로그인 폼을 만들 수 있습니다. Appsmith는 다양한 사전 구축된 위젯을 제공하며, 이를 쉽게 사용자 정의할 수 있습니다. 대시보드에서 사용자 이름, 비밀번호 및 필요한 추가 정보를 입력할 수 있는 입력 필드로 폼을 설계하세요.

시작하기 전에

Appsmith를 머신에 설치하는 부분은 생략하겠습니다. Appsmith 웹사이트에서 Docker를 사용하여 Appsmith 설치하는 방법을 배울 수 있습니다. Appsmith가 설치되어 있고 http://localhost에서 접근할 수 있는지 확인하세요. Appsmith를 배포하고 실행하면 기본적으로 My first application이라는 애플리케이션이 추가됩니다. 이 애플리케이션을 사용하여 첫 번째 앱을 구축할 수 있습니다.

단계 1: 등록 페이지 생성

우리의 경우, 새로운 사용자는 먼저 등록 페이지에서 모바일 앱에 등록합니다. 애플리케이션에서 RegistrationPage라는 새 페이지를 생성하세요. 이메일(EmailInput), 사용자 이름(UsernameInput), 비밀번호(PasswordInput)를 위한 입력 위젯을 추가하세요. 또한, 등록(RegisterButton) 및 로그인(LoginButton) 버튼 위젯을 드로잉 보드에 추가하세요. 최종 결과는 아래와 같습니다:

사용자가 제공된 입력 세부 정보와 함께 등록 버튼을 누르면, APISIX Admin API 엔드포인트와 통신하여 API 게이트웨이에 새로운 API 소비자를 등록하는 쿼리가 필요합니다. APISIX 소비자 엔드포인트 URI /apisix/admin/consumers를 사용하여 API 쿼리를 생성하세요(APISIX_Admin_Add_Consumer_API). 입력 위젯의 텍스트를 쿼리 본문에 배치하세요. 입력 위젯에 접근하는 것은 다음과 같이 보일 것입니다:

APISIX는 Appsmith와 다른 Docker 네트워크에서 자체 컨테이너 내에서 실행되므로 localhost 대신 host.docker.internal 주소를 사용합니다.

쿼리가 APISIX로 전송되면, 새로운 소비자가 등록되고, 소비자 객체는 jwt-auth 플러그인과 키 및 비밀을 사용합니다. 사용자 이름 appsmithuser로 지정된 소비자가 시스템에 성공적으로 등록되었는지 테스트할 수 있습니다. 다음 curl 명령을 실행하세요:

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser

기존 사용자는 로그인 페이지로 바로 이동할 수 있습니다. 다음 섹션에서 확인하세요.

단계 2: 로그인 페이지 생성

애플리케이션 캔버스로 돌아가서, Login page라는 새 페이지를 추가하고, 사용자의 이메일을 입력하기 위한 입력 위젯과 로그인을 위한 버튼 위젯으로 로그인 폼을 설정하세요.

그런 다음, APISIX 로그인 라우트 URI 경로 /login에 대한 API 쿼리를 생성하세요(login_api). key 매개변수를 {{EmailInput.text}}로 설정하세요. 쿼리를 테스트하고 실행 버튼을 누르면, 성공적인 응답 시, 인증 API 게이트웨이 엔드포인트는 유효한 액세스 토큰을 반환해야 합니다. 아래 예제에서 jwt 키는 사용자가 APISIX 측에서 인증되었음을 나타내는 토큰입니다.

로그인 버튼을 통해 login_api 쿼리를 실행하려면, 쿼리의 onClick 속성을 설정해야 합니다.

JWT 토큰을 Appsmith 저장소에 저장한 다음, 사용자를 MainPage로 이동시킬 수도 있습니다. 이를 위해, Login page의 onClick 속성에 아래 코드를 삽입하세요:

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login failed!', 'error');
  }
})}}

사용자가 APISIX로 인증에 실패하면, 알림 메시지를 표시하여 사용자에게 오류가 발생했음을 알릴 수 있습니다.

단계 3: 메인 페이지 생성

마지막으로, 이제 로그인한 사용자에게 액세스를 허용하고 일부 데이터를 표시할 수 있도록 모바일 앱의 MainPage를 구성할 시간입니다. 위젯을 사용하여 UI를 구축할 수 있습니다. 사용자가 성공적으로 로그인하면, 우리의 로직은 MainPage로 이동하고, 첫 페이지 로드 시, APISIX의 라우트 http://127.0.0.1:9080/ip에 자동으로 API 호출을 수행하여 추가한 쿼리(main_page_data_api)를 사용하고, 업스트림 서버(파트 1의 단계 2에서 생성)에서 IP 주소를 검색합니다.

Authorization 헤더의 값 {{appsmith.store.jwt}}는 이전 단계에서 Appsmith 저장소에 저장한 jwt 값으로, 애플리케이션에 사용자가 인식되었음을 증명하는 데 사용됩니다. Appsmith 저장소에 jwt 값이 없으면, 사용자에게 권한 없음 오류를 표시합니다.

저의 경우, MainPage에 두 개의 텍스트 위젯을 추가하고, 두 번째 위젯의 텍스트 필드 값을 {{main_page_data_api.data}}로 설정했습니다. 이는 단순히 main_page_data_api 호출의 출력 데이터입니다. 결과를 확인하세요.

다음 단계

권한 없는 사용자를 해당 페이지로 리디렉션하고, 오류를 표시하고, 로그인하거나 새 계정을 등록하도록 제안할 수 있는 권한 없음 페이지를 추가할 수도 있습니다. 사용자가 작업을 마치면 앱에서 로그아웃할 수 있는 버튼 위젯을 제공하여 데이터의 보안을 강화할 수 있습니다.

결론

위의 단계를 따라 Appsmith와 APISIX를 사용하여 개인화된 인증 시스템을 만들었습니다. Appsmith는 내부 도구 및 관리 대시보드 구축부터 프로토타이핑 및 완전한 애플리케이션 개발까지 다양한 사용 사례에 적합합니다. APISIX를 사용하면 사용자에 대한 인증을 적용할 뿐만 아니라, 속도 제한, IP 차단, 소비자 제한과 같은 추가 보안 조치를 도입하여 사용자 정의 인증 솔루션의 보안을 유지할 수 있습니다.

관련 자료

• API Gateway Authentication.
• Apache APISIX Authorization Policy: Protect Your APIs.
• Deep Dive into Authentication in Microservices.