컨텐츠로 건너뛰기
@aws/nx-plugin
Blog

클라우드스케이프 웹사이트 인증

CloudScape 웹사이트 인증 생성기는 Amazon Cognito를 사용해 CloudScape 웹사이트에 인증 기능을 추가합니다.

이 생성기는 Cognito 사용자 풀과 연관된 Identity Pool, 사용자 로그인 흐름을 처리하는 호스팅 UI, 그리고 CloudScape 웹사이트와의 통합을 위한 CDK 인프라스트럭처를 구성합니다.

사용 방법

CloudScape 웹사이트에 인증 추가하기

다음 두 가지 방법으로 CloudScape 웹사이트에 인증을 추가할 수 있습니다:

  1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
  2. VSCode에서 Nx 콘솔 열기
  3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
  4. 검색 @aws/nx-plugin - ts#cloudscape-website#auth
  5. 필수 매개변수 입력
    • 클릭 Generate

    옵션

    매개변수 타입 기본값 설명
    project 필수 string - The root directory of the Cloudscape application.
    cognitoDomain 필수 string - The cognito domain prefix to use
    allowSignup boolean Whether to allow self-signup

    생성기 출력 결과

    React 웹사이트에 다음과 같은 변경 사항이 적용됩니다:

    • 디렉터리src
      • 디렉터리components
        • 디렉터리CognitoAuth
          • index.tsx 주요 인증 컴포넌트
      • main.tsx CognitoAuth 컴포넌트를 적용하도록 업데이트됨

    또한 packages/common/constructs 경로에 다음 인프라 코드가 생성됩니다:

    • 디렉터리src
      • 디렉터리core
        • user-identity.ts 사용자 풀과 Identity Pool을 정의하는 Construct

    인프라 사용 방법

    스택에 UserIdentity 구성을 추가해야 하며, 웹사이트 Construct 이전에 선언해야 합니다:

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        new UserIdentity(this, 'Identity');
    

        new MyWebsite(this, 'MyWebsite');
      }
    }

    UserIdentity Construct는 웹사이트가 인증을 위해 올바른 Cognito 사용자 풀을 가리킬 수 있도록 필요한 런타임 구성을 자동으로 추가합니다.

    인증된 사용자 접근 권한 부여

    API 호출 권한과 같은 특정 작업 수행을 위해 인증된 사용자에게 접근 권한을 부여하려면 Identity Pool 인증 역할에 IAM 정책 문장을 추가할 수 있습니다:

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity, MyApi } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        const identity = new UserIdentity(this, 'Identity');
        const api = new MyApi(this, 'MyApi');
    

        api.grantInvokeAccess(identity.identityPool.authenticatedRole);
    

        new MyWebsite(this, 'MyWebsite');
      }
    }