AWS CDK の L2 Construct で Amazon Cognito User Pool のマネージドログインが有効化可能になりました
こんにちは、製造ビジネステクノロジー部の若槻です。
AWS CDK の最新のリリース v2.177.0 で、L2 Construct で Amazon Cognito User Pool のマネージドログインを有効化可能になりました。
cognito: managed login (#33097) (188f52d)
マネージドログインは昨年の re:Invent 開催直前にリリースされた機能で、ログインメニューのブランディングが可能となる機能です。今までは Hosted UI という簡易的なログイン画面しか利用できませんでしたが、マネージドログインを有効化することで、ログイン画面の柔軟なカスタマイズが可能になります。
そして 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
を利用しています。
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
及び assets
を CfnManagedLoginBranding
で設定する必要があります。CDK 側からスタイルをデザインするのは難しそうですが、ある環境でカスタマイズしたスタイルを別の環境に横展開する分にはこれで良さそうです。併せて参考にしてみてください。
以上