クラウドスケープウェブサイト認証

CloudScape Website Authentication ジェネレータは、Amazon Cognito を使用して CloudScape ウェブサイトに認証機能を追加します。

このジェネレータは、Cognito ユーザープールと関連する Identity Pool、ユーザーログインフローを処理するホステッド UI、および CloudScape ウェブサイトとの統合を作成するための CDK インフラストラクチャを設定します。

使用方法

CloudScape ウェブサイトに認証を追加する

以下の2つの方法で CloudScape ウェブサイトに認証を追加できます:

VSCode
CLI

インストール Nx Console VSCode Plugin まだインストールしていない場合
VSCodeでNxコンソールを開く
クリック Generate (UI) "Common Nx Commands"セクションで
検索 @aws/nx-plugin - ts#cloudscape-website#auth
必須パラメータを入力
クリック Generate

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

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

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

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

変更されるファイルを確認するためにドライランを実行することもできます

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

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

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

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 ウェブサイトに以下の変更が加えられます:

Directorysrc
- Directorycomponents
  - DirectoryCognitoAuth
    index.tsx メイン認証コンポーネント
- main.tsx CognitoAuth コンポーネントを組み込むよう更新

また、packages/common/constructs に以下のインフラストラクチャコードが生成されます:

Directorysrc
- Directorycore
  - user-identity.ts ユーザープールと Identity Pool を定義するコンストラクト

インフラストラクチャの使用方法

UserIdentity コンストラクトをスタックに追加する必要があります。ウェブサイトコンストラクトの前に宣言してください:

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 コンストラクトは、ウェブサイトが認証用に正しい Cognito ユーザープールを指すようにするためのランタイム設定を自動的に追加します。

認証済みユーザーへのアクセス権付与

API の呼び出し権限など、認証済みユーザーに特定のアクションを許可するには、Identity Pool の認証済みロールに IAM ポリシーステートメントを追加できます:

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');
  }
}

クラウドスケープ ウェブサイト認証