CDKでマネージドログインを試してみる
はじめに
先月、マネージドログイン機能がリリースされました。
Hosted UIよりも表現力が上がっているということで、マネージドログインを採用する機会が増えそうだと思っています。
re:Invent関連で後回しにしていたので時間経ってしまいましたが、触ってみようかと思います。
環境構築
マネコンでサクッと作れると思うのですが、CDK力向上と再現性を担保したくてCDKで実装してみました。
マネージドログインのCDK対応は現状L1コンストラクトで構築できるようです。
マネージドログインによる実装は主に以下のあたりで、managedLoginVersion: 2がマネージドログインで1がHosted UIです。
useCognitoProvidedValues: trueでデフォルトのブランドでマネージドログイン画面を作っています。
ちなみに、aws-cdkやaws-cdk-libが古いとCfnManagedLoginBrandingとか存在しないのでご注意を。
画面を触って見る
作成したスタック -> Outputs -> ManagedLoginUrlからマネージドログイン画面にアクセスします。
まずはアカウントを作成します。
メールとパスワード入力します。
メールにコードが届いていると思うので入力して完了です。
成功するとAWSのトップページに飛ぶようになっていて、クエリパラメータでcodeを渡していれば成功です。
CDKでマネージドログインのカスタマイズ実装について
独自のブランドを作ることも可能ですが、一旦マネコンでブランドをカスタマイズした後、CLI/APIでDescribeManagedLoginBrandingByClientを実行して設定情報を取得し、CDKに変換することがベストプラクティスのようです。
As a best practice, modify the output of DescribeManagedLoginBrandingByClient into the request parameters for this operation. To get all settings, set ReturnMergedResources to true. For more information, see API and SDK operations for managed login branding
今回はグローバルヘッダにロゴを追加して、そのブランディングをjson出力してみます。
Launch Branding designerを起動
Step 1-3はそのまま
Step4でヘッダを変えられるので、条件に合った画像をアップロード。
保存後にログイン画面にいくとちゃんと変更が反映されていることが確認できる。
カスタマイズできたら、describe-managed-login-branding-by-clientコマンド(長いw)でカスタマイズ情報を出力します。
aws cognito-idp describe-managed-login-branding-by-client --user-pool-id USER_POOL_ID --client-id CLIENT_ID > output.json
途中省略しますが、カスタマイズ設定がSettings、アップロードした画像はAssetsに変換されています。
{
"ManagedLoginBranding": {
"ManagedLoginBrandingId": "a03211ea-5949-4b61-b3c3-2b361221f00b",
"UserPoolId": "ap-northeast-1_jVoh2F4AF",
"UseCognitoProvidedValues": false,
"Settings": {
"components": {
...
}
},
"Assets": [
{
"Category": "PAGE_HEADER_LOGO",
"ColorMode": "LIGHT",
"Extension": "JPEG",
"Bytes": "/9j/4AAQSkZJRgABAQAASAB..."
}
],
"CreationDate": "2024-12-21T17:55:28.413000+09:00",
"LastModifiedDate": "2024-12-21T20:08:04.193000+09:00"
}
}
このカスタマイズ設定をCDK化するならCfnManagedLoginBrandingでuseCognitoProvidedValues: falseと指定して、settingsとassetsにjsonから取得した値を指定する。
new cdk.aws_cognito.CfnManagedLoginBranding(this, 'ManagedLoginBranding', {
userPoolId: userPool.userPoolId,
clientId: userPoolClient.userPoolClientId,
useCognitoProvidedValues: false,
settings: {...},
assets: {...}
})
おわりに
CDKでもL1コンストラクトがあるのでマネージドログインを実装できました。
カスタマイズのCDK化はベストプラクティスにならってマネコンで一度作ってから出力した方が楽だなと感じました。
あとは、あまりログイン画面は変更しないので、この手順でも「まぁいいかなぁ」という感想ですが、画面でも設定出力あると嬉しいなと感じました。
Discussion