6.1. HTMLドキュメントの更新 (ランディングページ)¶

作業の目的 [why]¶

HTMLドキュメント名"<HTMLドキュメント名>"を更新します。

完了条件/事前条件 [設計者用情報]

完了条件 [after]

主処理は、以下を満たしたときに成功したものとします。

完了条件1: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が更新されている。
完了条件2: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が更新されている。

事前条件 [before]

主処理の実施は、以下の状態であることを前提とします。

事前条件1: HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-idp-landing"が存在する。
事前条件2: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が存在する。
事前条件3: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が存在する。
事前条件4: Cognitoユーザープール名"handson-cli-cognito-idp-userpool"が存在する。
事前条件5: Cognitoユーザープールクライアント名"handson-cli-cognito-idp-userpool-client"が存在する。
事前条件6: Cognitoユーザープールドメイン名"handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX"が存在する。

作業対象 [what]¶

HTMLドキュメント

標準時間(合計)¶

8分

パラメータ設定¶

パラメータ設定の標準時間: 2分

作業に必要なモノ・情報 [resource]¶

作業開始には、以下が全て揃っていることが必要です。

リソース1: HTMLドキュメントファイル用ディレクトリ

HTMLドキュメントファイルが存在するディレクトリ"${HOME}/environment/contents-handson-cli-cognito-idp-landing"です。

リソース2: HTMLドキュメント名 (インデックスページ)

更新するHTMLドキュメント(インデックスページ)の名称です。
今回は"index.html"とします。

リソース3: HTMLドキュメント名 (コールバックページ)

更新するHTMLドキュメント(コールバックページ)の名称です。
今回は"callback.html"とします。

リソース4: Cognitoユーザープール名

更新するHTMLドキュメントで必要となるCognitoユーザープール名の名称です。
今回は"handson-cli-cognito-idp-userpool"とします。

リソース5: Cognitoユーザープールクライアント名

更新するHTMLドキュメントで必要となるCognitoユーザープールクライアント名の名称です。
今回は"handson-cli-cognito-idp-userpool-client"とします。

リソース6: Cognitoユーザープールドメイン名

更新するHTMLドキュメントで必要となるCognitoユーザープールドメインの名称です。
今回は"handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX"とします。

リソース7: CognitoユーザプールクライアントOAuthスコープ(URLパラメータ形式)

更新するHTMLドキュメント(インデックスページ)で必要となるCognitoユーザプールクライアントOAuthスコープ(URLパラメータ形式)です
今回は"email+openid"とします。

パラメータの指定¶

作業に必要なパラメータを変数に格納をします。

0.0. リージョンの指定¶

変数の設定

export AWS_DEFAULT_REGION='ap-northeast-1'

0.1. HTMLドキュメントファイルディレクトリの指定¶

変数の設定:

DIR_HTML_DOC="${HOME}/environment/contents-handson-cli-cognito-idp-landing"

0.2. HTMLドキュメント名の指定 (インデックスページ)¶

インデックスページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_INDEX='index.html'

変数の設定:

FILE_HTML_DOC_INDEX="${DIR_HTML_DOC}/${HTML_DOC_NAME_INDEX}" \
  && echo ${FILE_HTML_DOC_INDEX}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html

0.3. HTMLドキュメント名の指定 (コールバックページ)¶

コールバックページのHTMLドキュメント名を指定します。

変数の設定:

HTML_DOC_NAME_CALLBACK='callback.html'

変数の設定:

FILE_HTML_DOC_CALLBACK="${DIR_HTML_DOC}/${HTML_DOC_NAME_CALLBACK}" \
  && echo ${FILE_HTML_DOC_CALLBACK}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html

0.4. Cognito ユーザープール名の指定¶

Cognito ユーザープール名を指定します。

変数の設定:

COGNITO_IDP_USER_POOL_NAME='handson-cli-cognito-idp-userpool'

0.5. Cognito ユーザープールクライアント名の指定¶

Cognito ユーザープールクライアント名を指定します。

変数の設定:

COGNITO_IDP_USER_POOL_CLIENT_NAME='handson-cli-cognito-idp-userpool-client'

0.6. Cognito ユーザープールドメイン名の指定¶

Cognito ユーザープールクライアント名を指定します。

変数の設定:

COGNITO_IDP_USER_POOL_DOMAIN_NAME_PREFIX='handson-cli-cognit-idp-userpool-domain'

コマンド:

AWS_ID=$( \
  aws sts get-caller-identity \
    --query 'Account' \
    --output text \
) \
  && echo ${AWS_ID}

結果(例):

XXXXXXXXXXXX

変数の設定:

COGNITO_IDP_USER_POOL_DOMAIN_NAME="${COGNITO_IDP_USER_POOL_DOMAIN_NAME_PREFIX}-${AWS_ID}" \
  && echo ${COGNITO_IDP_USER_POOL_DOMAIN_NAME}

結果(例):

handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX

0.7. OAuthスコープパラメータの指定¶

OAuthのスコープをパラメータ形式で指定します。

変数の設定:

COGNITO_IDP_USER_POOL_CLIENT_ALLOWD_O_AUTH_SCOPES_URL_PARAMETER='email+openid'

パラメータの保存¶

設定されている変数の保存先となるファイル名を指定します。

変数の設定:

DIR_PARAMETER="${HOME}/tmp/parameter-handson-cli-cognito-idp"
FILE_PARAMETER="${DIR_PARAMETER}/$(date +%Y-%m-%d)-html-landing-update-expand-aws-cognito-idp.env" \
  && echo ${FILE_PARAMETER}

結果(例):

${HOME}/tmp/parameter-handson-cli-cognito-idp/2019-12-11-html-landing-update-expand-aws-cognito-idp.env

各変数に正しいパラメータ値が格納されていることを確認しながら保存します。

変数の確認:

cat << EOF > ${FILE_PARAMETER}

  # 0.0. AWS_DEFAULT_REGION:"ap-northeast-1"
         AWS_DEFAULT_REGION="${AWS_DEFAULT_REGION}"

  # 0.1. DIR_HTML_DOC:"${HOME}/environment/contents-handson-cli-cognito-idp-landing"
         DIR_HTML_DOC="${DIR_HTML_DOC}"
  # 0.2. FILE_HTML_DOC_INDEX:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"
         FILE_HTML_DOC_INDEX="${FILE_HTML_DOC_INDEX}"
  # 0.3. FILE_HTML_DOC_CALLBACK:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"
         FILE_HTML_DOC_CALLBACK="${FILE_HTML_DOC_CALLBACK}"
  # 0.4. COGNITO_IDP_USER_POOL_NAME:"handson-cli-cognito-idp-userpool"
         COGNITO_IDP_USER_POOL_NAME="${COGNITO_IDP_USER_POOL_NAME}"
  # 0.5. COGNITO_IDP_USER_POOL_CLIENT_NAME:"handson-cli-cognito-idp-userpool-client"
         COGNITO_IDP_USER_POOL_CLIENT_NAME="${COGNITO_IDP_USER_POOL_CLIENT_NAME}"
  # 0.6. COGNITO_IDP_USER_POOL_DOMAIN_NAME:"handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX"
         COGNITO_IDP_USER_POOL_DOMAIN_NAME="${COGNITO_IDP_USER_POOL_DOMAIN_NAME}"
  # 0.7. COGNITO_IDP_USER_POOL_CLIENT_ALLOWD_O_AUTH_SCOPES_URL_PARAMETER:"email+openid"
         COGNITO_IDP_USER_POOL_CLIENT_ALLOWD_O_AUTH_SCOPES_URL_PARAMETER="${COGNITO_IDP_USER_POOL_CLIENT_ALLOWD_O_AUTH_SCOPES_URL_PARAMETER}"

EOF

cat ${FILE_PARAMETER}

下段の変数が入っていない、もしくは上段と同等の値が入っていない場合は、それぞれの手順番号に戻って変数の設定を行います。

タスクの実施¶

タスク標準時間: 6分

1. 前処理¶

1.1. 処理対象の状態確認¶

主処理の実施は、以下の状態であることを前提とします。

前提と異なることが判明した場合、直ちに処理を中止します。

事前条件1: HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-idp-landing"が存在する。

「HTMLファイル用ディレクトリ"${HOME}/environment/contents-handson-cli-cognito-idp-landing"が存在する。」ことを確認します。

コマンド:

ls -d ${DIR_HTML_DOC}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing

事前条件2: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が存在する。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が存在する。」ことを確認します。

コマンド:

ls ${FILE_HTML_DOC_INDEX}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html

事前条件3: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が存在する。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が存在する。」ことを確認します。

コマンド:

ls ${FILE_HTML_DOC_CALLBACK}

結果(例):

${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html

事前条件4: Cognitoユーザープール名"handson-cli-cognito-idp-userpool"が存在する。

「Cognitoユーザープール名"handson-cli-cognito-idp-userpool"が存在する。」ことを確認します。

コマンド:

aws cognito-idp list-user-pools \
  --max-results 60 \
  --query "UserPools[?Name == \`${COGNITO_IDP_USER_POOL_NAME}\`].Name" \
  --output text

結果(例):

handson-cli-cognito-idp-userpool

コマンド:

COGNITO_IDP_USER_POOL_ID=$( \
  aws cognito-idp list-user-pools \
    --max-results 60 \
    --query "UserPools[?Name == \`${COGNITO_IDP_USER_POOL_NAME}\`].Id" \
    --output text \
) \
  && echo ${COGNITO_IDP_USER_POOL_ID}

結果(例):

ap-northeast-1_xxxxxxxxx

事前条件5: Cognitoユーザープールクライアント名"handson-cli-cognito-idp-userpool-client"が存在する。

「Cognitoユーザープールクライアント名"handson-cli-cognito-idp-userpool-client"が存在する。」ことを確認します。

コマンド:

aws cognito-idp list-user-pool-clients \
  --user-pool-id ${COGNITO_IDP_USER_POOL_ID} \
  --query "UserPoolClients[?ClientName == \`${COGNITO_IDP_USER_POOL_CLIENT_NAME}\`].ClientName" \
  --output text

結果(例):

handson-cli-cognito-idp-userpool-client

事前条件6: Cognitoユーザープールドメイン名"handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX"が存在する。

「Cognitoユーザープールドメイン名"handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX"が存在する。」ことを確認します。

コマンド:

aws cognito-idp describe-user-pool-domain \
  --domain ${COGNITO_IDP_USER_POOL_DOMAIN_NAME} \
  --query 'DomainDescription.Domain' \
  --output text

結果(例):

handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX

1.2. 主処理に必要な情報の取得¶

CognitoユーザープールドメインURLの取得

変数の設定:

URL_COGNITO_IDP_USER_POOL_DOMAIN="https://${COGNITO_IDP_USER_POOL_DOMAIN_NAME}.auth.${AWS_DEFAULT_REGION}.amazoncognito.com" \
  && echo ${URL_COGNITO_IDP_USER_POOL_DOMAIN}

結果(例):

https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com

CognitoユーザープールクライアントIDの取得

コマンド:

COGNITO_IDP_USER_POOL_CLIENT_ID=$( \
  aws cognito-idp list-user-pool-clients \
    --user-pool-id ${COGNITO_IDP_USER_POOL_ID} \
    --query "UserPoolClients[?ClientName == \`${COGNITO_IDP_USER_POOL_CLIENT_NAME}\`].ClientId" \
    --output text \
) \
  && echo ${COGNITO_IDP_USER_POOL_CLIENT_ID}

結果(例):

xxxxxxxxxxxxxxxxxxxxxxxxxx

CognitoユーザープールクライアントCallback URLの取得

コマンド:

COGNITO_IDP_USER_POOL_CLIENT_CALLBACK_URL=$( \
aws cognito-idp describe-user-pool-client \
  --user-pool-id ${COGNITO_IDP_USER_POOL_ID} \
  --client-id ${COGNITO_IDP_USER_POOL_CLIENT_ID} \
  --query 'UserPoolClient.CallbackURLs' \
  --output text \
) \
  && echo ${COGNITO_IDP_USER_POOL_CLIENT_CALLBACK_URL}

結果(例):

https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/callback.html

ログインURLの生成

Cognito ユーザプールクライアントのLogin URLを生成します。

変数の設定:

URL_LOGIN_COGNITO_USER_POOL_CLIENT="${URL_COGNITO_IDP_USER_POOL_DOMAIN}/login?client_id=${COGNITO_IDP_USER_POOL_CLIENT_ID}&response_type=token&scope=${COGNITO_IDP_USER_POOL_CLIENT_ALLOWD_O_AUTH_SCOPES_URL_PARAMETER}&redirect_uri=${COGNITO_IDP_USER_POOL_CLIENT_CALLBACK_URL}" \
  && echo ${URL_LOGIN_COGNITO_USER_POOL_CLIENT}

結果(例):

https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com/login?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx&response_type=token&scope=email+openid&redirect_uri=https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/callback.html

CognitoユーザープールクライアントLogout URLの取得

コマンド:

COGNITO_IDP_USER_POOL_CLIENT_LOGOUT_URL=$( \
aws cognito-idp describe-user-pool-client \
  --user-pool-id ${COGNITO_IDP_USER_POOL_ID} \
  --client-id ${COGNITO_IDP_USER_POOL_CLIENT_ID} \
  --query 'UserPoolClient.LogoutURLs' \
  --output text \
) \
  && echo ${COGNITO_IDP_USER_POOL_CLIENT_LOGOUT_URL}

結果(例):

https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/logout.html

ログアウトURLの生成

Cognito ユーザプールクライアントのLogin URLを生成します。

変数の設定:

URL_LOGOUT_COGNITO_USER_POOL_CLIENT="${URL_COGNITO_IDP_USER_POOL_DOMAIN}/logout?client_id=${COGNITO_IDP_USER_POOL_CLIENT_ID}&logout_uri=${COGNITO_IDP_USER_POOL_CLIENT_LOGOUT_URL}" \
  && echo ${URL_LOGOUT_COGNITO_USER_POOL_CLIENT}

結果(例):

https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com/logout?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx&logout_uri=https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/logout.html

2. 主処理¶

2.1. Indexページの更新¶

変数の確認:

cat << ETX

  # FILE_HTML_DOC_INDEX:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"
    FILE_HTML_DOC_INDEX:"${FILE_HTML_DOC_INDEX}"
  # URL_LOGIN_COGNITO_USER_POOL_CLIENT:"https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com/login?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx&response_type=token&scope=email+openid&redirect_uri=https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/callback.html"
    URL_LOGIN_COGNITO_USER_POOL_CLIENT:"${URL_LOGIN_COGNITO_USER_POOL_CLIENT}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_INDEX}
<!DOCTYPE html>
<meta charset="UTF-8">
<title>ようこそ</title>

<h1>ようこそ</h1>

<p><a href="${URL_LOGIN_COGNITO_USER_POOL_CLIENT}">ログイン</a></p>
EOF

cat ${FILE_HTML_DOC_INDEX}

結果(例):

<!DOCTYPE html>
<meta charset="UTF-8">
<title>ようこそ</title>

<h1>ようこそ</h1>

<p><a href="https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com/login?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx&response_type=token&scope=email+openid&redirect_uri=https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/callback.html">ログイン</a></p>

2.2. コールバックページの更新¶

変数の確認:

cat << ETX

  # FILE_HTML_DOC_CALLBACK:"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"
    FILE_HTML_DOC_CALLBACK:"${FILE_HTML_DOC_CALLBACK}"
  # URL_LOGOUT_COGNITO_USER_POOL_CLIENT:"https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com/logout?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx&logout_uri=https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/logout.html"
    URL_LOGOUT_COGNITO_USER_POOL_CLIENT:"${URL_LOGOUT_COGNITO_USER_POOL_CLIENT}"

ETX

コマンド:

cat << EOF > ${FILE_HTML_DOC_CALLBACK}
<!DOCTYPE html>
<meta charset="UTF-8">
<title>MyPage</title>

<h1>My Page</h1>

<p><a href="${URL_LOGOUT_COGNITO_USER_POOL_CLIENT}">ログアウト</a></p>
EOF

cat ${FILE_HTML_DOC_CALLBACK}

結果(例):

<!DOCTYPE html>
<meta charset="UTF-8">
<title>My Page</title>

<h1>My Page</h1>

<p><a href="https://handson-cli-cognit-idp-userpool-domain -XXXXXXXXXXXX.auth.ap-northeast-1.amazoncognito.com/logout?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxx&logout_uri=https://s3.ap-northeast-1.amazonaws.com/handson-cli-cognito-idp-landing-XXXXXXXXXXXX/logout.html">ログアウト</a></p>

3. 後処理¶

完了条件の確認¶

主処理は、以下を満たしたときに成功したものとします。

完了条件1: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が更新されている。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/index.html"が更新されている。」ことを確認します。

コマンド:

stat ${FILE_HTML_DOC_INDEX} |grep Modify

結果(例):

Modify: 2019-12-11 12:34:56.789012345 +0000

完了条件2: HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が更新されている。

「HTMLドキュメントファイル"${HOME}/environment/contents-handson-cli-cognito-idp-landing/callback.html"が更新されている。」ことを確認します。

コマンド:

stat ${FILE_HTML_DOC_CALLBACK} |grep Modify

結果(例):

Modify: 2019-12-11 12:34:56.789012345 +0000

handson: aws service (cognito idp)

6.1. HTMLドキュメントの更新 (ランディングページ)¶

作業の目的 [why]¶

作業対象 [what]¶

標準時間(合計)¶

パラメータ設定¶

作業に必要なモノ・情報 [resource]¶

パラメータの指定¶

0.0. リージョンの指定¶

0.1. HTMLドキュメントファイルディレクトリの指定¶

0.2. HTMLドキュメント名の指定 (インデックスページ)¶

0.3. HTMLドキュメント名の指定 (コールバックページ)¶

0.4. Cognito ユーザープール名の指定¶

0.5. Cognito ユーザープールクライアント名の指定¶

0.6. Cognito ユーザープールドメイン名の指定¶

0.7. OAuthスコープパラメータの指定¶

パラメータの保存¶

タスクの実施¶

1. 前処理¶

1.1. 処理対象の状態確認¶

1.2. 主処理に必要な情報の取得¶

2. 主処理¶

2.1. Indexページの更新¶

2.2. コールバックページの更新¶

3. 後処理¶

完了条件の確認¶

完了¶