Skip to content
@aws/nx-plugin
Blog

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

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

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

使い方

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

CloudScapeウェブサイトに認証を追加する方法は2通りあります:

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

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

    インフラストラクチャコードは packages/common/constructs に生成されます:

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

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

    UserIdentity コンストラクトをウェブサイトコンストラクトの前に宣言する必要があります:

    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 コンストラクトは自動的に必要なランタイム設定を追加し、ウェブサイトが正しいCognitoユーザープールを参照できるようにします。

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

    認証済みユーザーにAPI呼び出しなどの特定のアクションを許可するには、IDプールの認証済みロールに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');
      }
    }