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

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

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

사용 방법

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

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

VSCode

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

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth

yarn

yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth

npm

npx nx g @aws/nx-plugin:ts#cloudscape-website#auth

bun

bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

npm

npx nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

bun

bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

옵션

매개변수	타입	기본값	설명
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');
  }
}