Auth0으로 개츠비 보안

Gatsby 정적 사이트에서 ID 관리를 위해 Auth0을 설정하는 방법을 알아보세요.

요약: 이 기사에서는 Auth0을 사용하여 기본 Gatsby 정적 사이트를 보호하는 방법을 배웁니다. 이 자습서의 완성된 코드는 gatsby-auth0-sample-app repository 에 있습니다.

Gatsby는 GraphQL 및 MDX과 같은 기술을 progressive web apps 및 server-side rendering과 같은 개념과 아름답게 병합합니다. 사용하기 쉬운 명령줄 인터페이스(Gatsby CLI)도 있어 정적 사이트를 거의 힘들이지 않고 개발, 구축 및 배포할 수 있습니다. 저에게는 가장 직관적인JAM stack(JavaScript + APIs + Markup) 솔루션입니다.

이것만큼 멋진 일이지만 많은 정적 사이트는 여전히 인증이 필요합니다. 상점, 구성원 영역 또는 관리 대시보드는 모두 정적 사이트로 구축할 수 있으며 모두 보호된 경로 또는 지속된 사용자 프로필이 필요합니다. 다행히도 Auth0이 도와드리겠습니다.

이 문서는 일반적인 인증 자습서와 약간 다른 경로를 사용합니다. 일반적으로 스타일과 데이터 소스가 포함된 샘플 애플리케이션을 빌드하도록 합니다. Gatsby는 GraphQL, CSS-in-JS, API 데이터 등과 같은 것들을 조율하기 때문에 튜토리얼의 잡초에서 길을 잃고 Gatsby에 특정한 것을 추적하기가 매우 쉽습니다.

그런 이유로 저는 여러분이 해당 앱에서 인증을 설정하는 방법을 배우는 데에만 집중할 수 있도록 가능한 가장 단순한(그리고 가장 못생긴) 샘플 애플리케이션을 빌드하도록 할 것입니다. 데이터 소스, GraphQL 또는 스타일링 전략은 다루지 않겠습니다. 이 튜토리얼을 매우 간단하게 유지하면 블로그, 상점 또는 마음이 원하는 다른 것을 구축하든 관계없이 이 전략이 효과가 있음을 의미합니다.

전제 조건

이 튜토리얼을 진행하려면 Node.js 16 및 NPM이 설치되어 있어야 합니다. 계속하기 전에 해야 합니다download and install them.

또한 React에 대한 기본 지식이 필요합니다. 구성 요소의 기본 스캐폴딩과 JSX만 알면 따라갈 수 있지만 완전 초보자라면 어려울 것입니다. 그것이 당신이라면 계속하기 전에 building and securing your first React app에 대한 기사를 읽을 수 있습니다.

개츠비 기초

Gatsby를 시작하려면 먼저 컴퓨터에 Gatsby CLI를 전체적으로 설치해야 합니다. 다음 명령을 실행하여 이를 수행할 수 있습니다.

npm install -g gatsby-cli

Gatsby CLI에는 개발 서버를 실행하기 위한 develop, 프로덕션 빌드를 생성하기 위한 build 및 프로덕션 빌드를 제공하기 위한 serve와 같은 몇 가지 기본 제공 명령이 있습니다. Gatsby CLI docs에서 확인할 수 있는 다른 많은 옵션과 명령이 있습니다.

CLI의 멋진 기능 중 하나는 스타터를 새 프로젝트의 템플릿으로 사용하는 기능입니다. 공식 Gatsby 스타터 또는 다른 Gatsby 저장소를 사용할 수 있습니다. 이 자습서에서는 다음 명령을 실행하여 gatsby-starter-hello-world를 사용합니다.

gatsby new gatsby-auth0 gatsbyjs/gatsby-starter-hello-world

첫 번째 인수( gatsby-auth0 )는 새 프로젝트의 이름일 뿐입니다. 원하는대로 부를 수 있습니다.

Gatsby가 자동으로 실행되므로npm install 완료되면 선호하는 편집기에서 프로젝트를 엽니다. src/pages/라는 index.js 폴더 안에 하나의 파일이 포함된 가장 간단한 Gatsby 프로젝트가 표시됩니다. 해당 파일을 열고 다음으로 바꿉니다.

// ./src/pages/index.js
import React from "react";
import { Link } from "gatsby";

export default () => (
  <div>
   <p>Hello Gatsby!</p>
   <Link to="/account">Go to your account</Link>
 </div>
);

JSX로 작성된 매우 간단한 React 구성 요소임을 알 수 있습니다. Link 경로로 이동하기 위해 Gatsbyaccount 기능을 가져옵니다. 다음 섹션에서 해당 경로를 만듭니다. 지금은 터미널에서 gatsby develop 명령을 실행하고 localhost:8000 으로 이동합니다. "Hello Gatsby!"가 표시되어야 합니다. 계정 페이지로 이동하는 링크가 있습니다.

Read more...