AWS CDK の L2 Construct で Amazon Cognito User Pool のマネージドログインが有効化可能になりました

AWS CDK の L2 Construct で Amazon Cognito User Pool のマネージドログインが有効化可能になりました

Clock Icon2025.01.26

こんにちは、製造ビジネステクノロジー部の若槻です。

AWS CDK の最新のリリース v2.177.0 で、L2 Construct で Amazon Cognito User Poolマネージドログインを有効化可能になりました。

cognito: managed login (#33097) (188f52d)

マネージドログインは昨年の re:Invent 開催直前にリリースされた機能で、ログインメニューのブランディングが可能となる機能です。今までは Hosted UI という簡易的なログイン画面しか利用できませんでしたが、マネージドログインを有効化することで、ログイン画面の柔軟なカスタマイズが可能になります。
https://dev.classmethod.jp/articles/amazon-cognito-managed-login/

そして AWS CDK でも今回のアップデートにより、L2 Construct でマネージドログインを有効化可能となりました。

やってみた

CDK パッケージのアップデート

AWS CDK モジュールを v2.177.0 以上にアップデートします。

npm i aws-cdk-lib@latest aws-cdk@latest

CDK コード

User Pool のマネージドログインを有効化する CDK コードです。UserPoolDomain または addDomain で新しく利用可能となった managedLoginVersion プロパティで NEWER_MANAGED_LOGIN を指定して、マネージドログインを有効化しています。ただしマネージドログインのスタイルの追加は L2 Construct では未対応のため CfnManagedLoginBranding を利用しています。

lib/main-stack.ts
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as cognito from 'aws-cdk-lib/aws-cognito';

export class MainStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props: cdk.StackProps) {
    super(scope, id, props);

    const COGNITO_DOMAIN_PREFIX = 'cm-test-20250126';
    const CALLBACK_URLS = ['https://dev.classmethod.jp/'];
    const LOGOUT_URLS = ['https://dev.classmethod.jp/'];
    const TEST_USER_EMAIL_ADDRESS = process.env.TEST_USER_EMAIL_ADDRESS || '';

    // Cognito User Pool
    const userPool = new cognito.UserPool(this, 'UserPool', {
      signInAliases: {
        email: true,
      },
      autoVerify: {
        email: true,
      },
      removalPolicy: cdk.RemovalPolicy.DESTROY, // 検証用リソースのため削除を許可
    });

    // Cognito User Pool Domain
    userPool.addDomain('UserPoolDomain', {
      cognitoDomain: { domainPrefix: COGNITO_DOMAIN_PREFIX },
      /**
       * 新規追加された managedLoginVersion プロパティを指定することで、マネージドログインを有効化可能となった。
       */
      managedLoginVersion: cognito.ManagedLoginVersion.NEWER_MANAGED_LOGIN,
    });

    // Cognito User Pool Client
    const client = userPool.addClient('UserPoolClient', {
      generateSecret: false,
      oAuth: {
        callbackUrls: CALLBACK_URLS,
        logoutUrls: LOGOUT_URLS,
        flows: { authorizationCodeGrant: true },
      },
    });

    // デフォルトのマネージドログインブランディングを作成
    new cognito.CfnManagedLoginBranding(this, 'ManagedLoginBranding', {
      userPoolId: userPool.userPoolId,
      clientId: client.userPoolClientId,
      useCognitoProvidedValues: true,
    });

    // Cognito User Pool User(動作確認用のユーザー)
    const userPoolUser = new cognito.CfnUserPoolUser(this, 'UserPoolUser', {
      userPoolId: userPool.userPoolId,
      username: TEST_USER_EMAIL_ADDRESS,
    });
    userPoolUser.node.addDependency(userPool);
  }
}

上記を CDK デプロイし、マネジメントコンソールからマネージドログインの設定を確認すると、有効化されており、またスタイルが追加されています。

クライアントでログインを試みると、新しいスタイルのログイン画面が利用可能となっています。

その他

デフォルトではマネージドログインは無効

managedLoginVersion プロパティで CLASSIC_HOSTED_UI を指定すると従来の Hosted UI となり、これがデフォルトとなります。

// Cognito User Pool Domain
userPool.addDomain('UserPoolDomain', {
  cognitoDomain: { domainPrefix: COGNITO_DOMAIN_PREFIX },
  managedLoginVersion: cognito.ManagedLoginVersion.CLASSIC_HOSTED_UI, // デフォルトは CLASSIC_HOSTED_UI
});

Hosted UI に戻すとログイン不可になる?

次のようにマネージドログインを無効化して Hosted UI に実装を戻すデプロイします。

diff --git a/lib/main-stack.ts b/lib/main-stack.ts
index 7a757d1..a446763 100644
--- a/lib/main-stack.ts
+++ b/lib/main-stack.ts
@@ -25,10 +25,6 @@ export class MainStack extends cdk.Stack {
     // Cognito User Pool Domain
     userPool.addDomain('UserPoolDomain', {
       cognitoDomain: { domainPrefix: COGNITO_DOMAIN_PREFIX },
-      /**
-       * 新規追加された managedLoginVersion プロパティを指定することで、マネージドログインを有効化可能となった。
-       */
-      managedLoginVersion: cognito.ManagedLoginVersion.NEWER_MANAGED_LOGIN, // マネージドログインを有効化
     });

     // Cognito User Pool Client
@@ -41,13 +37,6 @@ export class MainStack extends cdk.Stack {
       },
     });

-    // デフォルトのマネージドログインブランディングを作成
-    new cognito.CfnManagedLoginBranding(this, 'ManagedLoginBranding', {
-      userPoolId: userPool.userPoolId,
-      clientId: client.userPoolClientId,
-      useCognitoProvidedValues: true,
-    });
-
     // Cognito User Pool User(動作確認用のユーザー)
     const userPoolUser = new cognito.CfnUserPoolUser(this, 'UserPoolUser', {
       userPoolId: userPool.userPoolId,

デプロイ完了後に数分の間はマネージドログインが利用可能でしたが、その後ログイン画面にアクセスすると Login pages unavailable となりログインできなくなりました。

さらに待機する必要があるのでしょうか。もしくはクライアントを作り直す必要があるのでしょうか。挙動が怪しい気がしますが、マネージドログインを無効化する際には注意が必要そうです。

おわりに

AWS CDK の L2 Construct で Amazon Cognito User Pool のマネージドログインが有効化可能になったのでご紹介しました。

マネージドログインのデフォルトのスタイルを利用する場合は今回の方法で良いでしょう。一方でスタイルのカスタマイズについては下記で紹介されている通りマネジメントコンソールで設定後に CLI で取得した settings 及び assetsCfnManagedLoginBranding で設定する必要があります。CDK 側からスタイルをデザインするのは難しそうですが、ある環境でカスタマイズしたスタイルを別の環境に横展開する分にはこれで良さそうです。併せて参考にしてみてください。

https://zenn.dev/shikira/articles/c4032b96231f7e

以上

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.