Netlify 에서 Logto 를 통한 풀스택 인증 솔루션: 웹 앱과 서버리스 함수 보호
Logto 인증을 사용하여 Netlify 웹 앱과 서버리스 함수를 보호하는 방법을 소스 코드 예제와 라이브 데모 미리보기를 통해 보여줍니다.
Developer
Netlify 는 깃 통합, 자동화된 빌드, 서버리스 기능을 제공하며 현대 웹 프로젝트를 배포하고 호스팅하기 위한 강력한 플랫폼으로 빠르고 확장 가능한 개발 워크플로우를 제공합니다.
이 포괄적인 가이드에서는 다음을 배우게 됩니다:
- Vite + React 예제를 사용하여 Netlify 에서 Logto 를 적용한 단일 페이지 애플리케이션(SPA)의 인증 구현
- Logto 인증을 통해 Netlify 서버리스 함수 보호
- 참고 구현을 사용하여 프로덕션 준비가 완료된 애플리케이션 배포: example-vite-react-logto
온라인 데모 미리보기를 확인하세요.
필수 조건
이 튜토리얼을 시작하기 전에 설정해야 할 것들:
Vite 로 React 앱 생성
Vite 의 시작 가이드를 따라 React 앱을 생성하세요.
생성 가이드에 따라 원하는 기술 스택을 선택하세요. 이 기사에서는 React + TypeScript 를 선택할 것입니다.
그런 다음 프로젝트 루트 디렉터리로 이동하여 가이드에 따라 종속성을 설치하고 애플리케이션을 실행하세요.
Netlify 를 사용하여 앱 배포
Netlify 시작하기 가이드를 따라 애플리케이션을 배포하세요.
앱을 배포하면 https://<your-site-name>.netlify.app에서 라이브 사이트를 볼 수 있습니다.
이 URL 을 기록해 둡니다. 나중에 Logto 를 구성할 때 필요합니다.
앱에 Logto 통합
Logto 인증을 시작하려면:
- Logto 콘솔에서 "Applications" 페이지로 이동
- 새 애플리케이션 생성
- 프론트엔드 프레임워크 선택 (예제에서는 React)
- 참고: 필요에 따라 단일 페이지 애플리케이션(SPA) 또는 네이티브 앱을 생성할 수 있습니다
- 다음 제공된 통합 가이드 중 하나 따르기:
- Logto 콘솔의 내장 가이드, 또는
- 공식 React 인증 통합 가이드
- 애플리케이션 세부 정보 페이지에서 다음을 메모하세요:
- 애플리케이션 ID
- Logto 엔드포인트 ("Endpoints & Credentials" 섹션에서 찾을 수 있으며, 보통
https://<your-instance>.logto.app/형식) 이러한 자격 증명은 후속 단계에서 필요합니다.
데모에서 우리는 Logto 의 로그인 리디렉션을 처리하기 위해 /callback 경로를 사용합니다. Logto 의 리디렉션 URI 는 https://<your-site-name>.netlify.app/callback으로 구성되어야 합니다. 사용자가 로그아웃하면 홈페이지로 돌아가므로 로그인 후 리디렉션 URI 를 https://<your-site-name>.netlify.app로 설정합니다.
그런 다음 우리가 생성한 Logto 애플리케이션의 정보를 Netlify 의 환경 변수에 설정합니다 (당신의 웹사이트 -> 사이트 구성 -> 환경 변수):
그런 다음 이 구성들을 우리의 프론트엔드 프로젝트에서 사용합니다:
최종 통합 코드는 여기에서 볼 수 있습니다: example-vite-react-logto.
Netlify 에 배포하고 Logto 를 통해 로그인할 때 URL 이 자동으로 우리의 Callback 페이지로 리디렉션되지 않는다는 점에 유의하세요. 이는 Netlify 가 기본적으로 단일 페이지 애플리케이션(SPA)에 대한 클라이언트 측 라우팅을 지원하지 않기 때문입니다.
/callback 과 같은 경로를 방문하면 Netlify 는 요청을 React 애플리케이션으로 전달하는 대신 서버에서 해당 파일을 찾으려고 할 것입니다.
이 시점에서는 Netlify 프로젝트의 public 디렉터리에 _redirects 파일을 생성하여 모든 요청을 index.html 로 리디렉션하도록 Netlify 에게 알려야 합니다:
또는 프로젝트 루트에 netlify.toml 파일을 생성할 수 있습니다:
이제 우리의 라우팅이 제대로 작동해야 합니다.
Netlify functions 를 사용하여 백엔드 API 생성
Netlify Functions 는 백엔드 API 를 구축하는 간단하지만 강력한 방법을 제공합니다. Netlify Functions 를 사용하면 전통적인 서버 구성 및 유지 관리에 대해 걱정할 필요 없이 서버 측 로직을 작성할 수 있습니다.
이 함수들은 웹사이트와 함께 버전 관리되고, 구축되고 배포됩니다. 이를 통해 프론트엔드와 백엔드 간의 개발 및 배포 프로세스가 원활합니다.
이제 Netlify Functions 를 사용하여 백엔드 API 를 구축하기 시작하겠습니다.
먼저 프로젝트의 netlify 디렉터리 아래에 functions 디렉터리를 만들고 hello.ts 파일을 만듭니다:
https://<your-site-name>.netlify.app/.netlify/functions/hello로 방문하면 이 함수가 호출되고 "Hello world!" 를 반환합니다.
/.netlify/functions/hello 경로가 다소 이상해 보인다고 생각된다면 public/_redirects 파일에 리디렉션 규칙을 추가하여 함수를 호출하도록 리디렉션을 설정할 수 있습니다:
이렇게 하면 https://<your-site-name>.netlify.app/api/hello 로 방문할 때 우리의 함수가 호출되고 "Hello world!" 를 반환할 것입니다. 이것이 실질적으로 Netlify functions 를 사용하여 API 를 구축하는 일반적인 방법입니다.
그리고 우리의 프론트엔드 프로젝트에서 fetch 를 사용하여 이 API 에 액세스할 수 있습니다:
Logto 로 Netlify 함수 보호
이제 백엔드 API 가 있으므로 인증된 사용자만 액세스할 수 있도록 해야 합니다. Logto 의 인증 메커니즘을 사용하여 Netlify 함수를 보호할 것입니다.
API 엔드포인트 보호:
- 백엔드 API 를 나타내기 위해 Logto Console 에서 API 리소스를 생성:
- Logto Console 에서 "API Resources"로 이동하여 새 API 생성
- 이름과 API 식별자 (예:
https://api.backend.com) 설정 - 나중에 필요하므로 API 리소스 세부 정보 페이지에 식별자를 기록합니다
- 이 API 리소스를 사용하도록 애플리케이션을 구성하여 Netlify 환경 변수에 식별자를 추가:
- 이 API 리소스를 포함하도록 Logto 구성을 업데이트:
- 보호된 엔드포인트에 요청할 때, 프론트엔드는 유효한 엑세스 토큰을 포함해야 합니다. 이를 요청하고 사용하는 방법은 다음과 같습니다:
이제 요청 중 유효한 엑세스 토큰만 처리되도록 백엔드에서 토큰 유효성을 구현하겠습니다.
먼저 JWT 토큰을 검증하는 데 사용할 jose 종속성을 설치해야 합니다:
그런 다음 백엔드에서 토큰 유효성을 구현합니다:
이제 verifyLogtoToken 함수를 사용하도록 Netlify 함수를 업데이트합니다:
이제 모든 준비가 끝났습니다! 이제 우리의 Netlify 함수는 Logto 로 보호되며 유효한 액세스 토큰이 있는 요청만 처리됩니다.
데모 테스트
이제 앱을 Netlify 에 배포하고 테스트하세요! 온라인 데모 미리보기는 여기에서 참조할 수 있습니다.
https://<your-site-name>.netlify.app에서 라이브 사이트를 방문- 내비게이션 바에서 "로그인" 버튼 클릭
- Logto 사용자 계정으로 로그인하면 로그인됨을 볼 수 있습니다.
- 내비게이션 바에서 "보호된 리소스" 탭을 클릭하면 보호된 페이지로 리디렉션됩니다.
- "보호된 리소스 보기" 버튼을 클릭하면
api/hello엔드포인트의 응답 데이터를 볼 수 있습니다. - 내비게이션 바에서 "로그아웃" 버튼을 클릭하면 홈 페이지로 리디렉션됩니다.
결론
이 가이드는 Netlify 에 배포된 웹 애플리케이션에 Logto 인증을 통합하는 방법을 보여줍니다.
Logto 애플리케이션과 API 리소스를 구성함으로써 프론트엔드 인증을 구현하고 Netlify Functions 엔드포인트를 보호할 수 있었습니다.
보다 세부적인 액세스 제어를 위해 Logto Console 에서 역할과 권한을 정의하고 Netlify Functions 내에서 사용자 역할을 검증하여 Logto 의 RBAC (역할 기반 접근 제어) 기능을 활용할 수 있습니다.