はじめに

IBM Security Verifyのテーマカスタマイズ機能で、Javascriptを新規アップロードできるようになりました。
利用方法についてご紹介いたします。

2025年1月の新機能になります。

今回は、ユーザーの初回ログイン後に表示されるパスワード変更画面をカスタマイズしてみます。

1.IBM Security VerifyへのJavascriptのアップロード

パスワードの強度をチェックするjavascriptを用意します。

#passwordcheck.js
function checkStrength(pw) {
  let score = 0;
  const feedback = [];

  if (pw.length >= 15) score++; else feedback.push("15文字以上にしてください");
  if (/[a-z]/.test(pw)) score++; else feedback.push("小文字を含めてください");
  if (/[A-Z]/.test(pw)) score++; else feedback.push("大文字を含めてください");
  if (/[0-9]/.test(pw)) score++; else feedback.push("数字を含めてください");
  if (/[^A-Za-z0-9]/.test(pw)) score++; else feedback.push("記号を含めてください");
  if (/(\w{2,})\1+/.test(pw)) {
    score--;
    feedback.push("繰り返しパターンを避けてください");
  }

  const level = ["非常に弱い", "弱い", "普通", "やや強い", "強い", "非常に強い"];
  document.getElementById("result").innerHTML =
    `<strong>強度:</strong> ${level[Math.max(0, score)]}<br>${feedback.join("<br>")}`;
}

100KB以下のファイルをアップロードするコマンドです。
実行後の戻り値は特にありませんでした。

curl -X POST "https://<tenant_name>.verify.ibm.com/template/v1.0/branding/registration/js" --header "Authorization: Bearer <Access_Token>" -F file=@passwordcheck.js

Dropbox製のパスワードチェッカーであるzxcvbn.jsをアップロードしようとしたところ、100KBを超えていたためアップロードできませんでした。

curl -X POST "https://<tenant_name>.verify.ibm.com/template/v1.0/branding/registration/js" --header "Authorization: Bearer <Access_Token>" -F file=@passwordcheck.js
{"messageId":"CSIAZ3036E","messageDescription":"The system cannot upload the compressed file because the file was too large. It exceeded the maximum content size [100] KB."}

アップロードしたファイルをリストします。

curl -X GET "https://<tenant_name>.verify.ibm.com/template/v1.0/branding/registration/js" --header "Authorization: Bearer <Access_Token>"
[{"id":{"tenant":"d44c69df-90d2-4187-863f-b43668cfa6e7","component":"common","name":"passwordcheck.js","revision":1},"contentMaxSize":100,"isServiceTemplate":false}]

アップロードしたファイルの削除です。

curl -X DELETE "https://<tenant_name>.verify.ibm.com/template/v1.0/branding/registration/js/passwordcheck.js" --header "Authorization: Bearer <Access_Token>"

2.パスワード変更画面のカスタマイズ

テーマに含まれる以下のファイルをカスタマイズします。

templates\authentication\login\cloud_directory\password\change_password\default\first_login_change_password.html

修正箇所は3箇所あります。コメント部分を参照ください。

javascriptの指定
パスワードフィールドにoninputを追加
パスワード強度の判定結果を出力する欄を追加

<!DOCTYPE html>
<html>

<head>
	<title id="loginTitle">$CHANGE_PASSWORD_TITLE$</title>

	<base href="/" />

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="usc/favicon.ico" />
	<link rel="stylesheet" href="usc/css/stateless.css" />
	<link rel="stylesheet" href="/template/v1.0/static/theme.css?themeId=@THEME_ID@" />
	<link rel="stylesheet" href="/authsvc/mtfim/sps/static/v1/authsvc.css" />

	<!-- START - IBM Specific -->
	<!-- Please DO NOT CHANGE the IBM Specific <meta> info below, it will affect functionality -->
    <!-- Script variables -->
	<meta name="action" content="@ACTION@">
	<meta name="themeId" content="@THEME_ID@">
	<meta name="errorMessage" content="@ERROR_MESSAGE@">
	<meta name="passwordWarning" content="@PASSWORDWARNING@">
	<!-- END - IBM Specific -->
    <!-- 修正箇所① 以下のJavascriptを追加-->
	<script defer type="text/javascript" src="/template/v1.0/static/js/passwordcheck.js?themeId=@THEME_ID@"></script>

</head>

<body>
	<div class="cs-change-password cs-content">
		@PAGE_HEADER@
		<div>
			<form id="change-password-main-form" class="input-centered" method="POST" action="">
				<input type="hidden" id="operation-change-password" name="operation" value=""/>
				<input type="hidden" name="username" value="@USERNAME@"/>
				<input type="password" id="oldpassword" name="oldpassword" value="@OLDPASSWORD@" autocomplete="off" class="bx--text-input bx--password-input display-none">
				<label class="label" for="newpassword">$CHANGE_PASSWORD_NEW$</label>
                <div class="bx--text-input__field-wrapper">
                　　<!-- 修正箇所② oninput="checkStrength(this.value)"を追加 -->
					<input id="newpassword" type="password" name="newpassword" autocomplete="off" oninput="checkStrength(this.value)" class="bx--text-input bx--password-input" tabindex="1">
					<button type="button" id="show-pwd-btn-newpassword" class="bx--text-input--password__visibility__toggle bx--btn bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center pwd-icon-button" >
						<span class="bx--assistive-text">$SHOW_PASSWORD_HELP_TXT$</span>
						<svg class="bx--icon-visibility-on" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" >
						  <path id="eyeIconnewpassword" d="M15.5,7.8C14.3,4.7,11.3,2.6,8,2.5C4.7,2.6,1.7,4.7,0.5,7.8c0,0.1,0,0.2,0,0.3c1.2,3.1,4.1,5.2,7.5,5.3c3.3-0.1,6.3-2.2,7.5-5.3C15.5,8.1,15.5,7.9,15.5,7.8z M8,12.5c-2.7,0-5.4-2-6.5-4.5c1-2.5,3.8-4.5,6.5-4.5s5.4,2,6.5,4.5C13.4,10.5,10.6,12.5,8,12.5M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z M8,10c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S9.1,10,8,10z"></path>
						</svg>
					</button>
				</div>
                <!-- 修正箇所③ パスワード強度の判定結果出力-->
				<div id="result" style="margin-top:10px; color: red; text-align: left;"></div>
                <label class="label" for="confirmpassword">$CHANGE_PASSWORD_CONFIRM$</label>
				<div class="bx--text-input__field-wrapper">
					<input id="confirmpassword" type="password" name="confirmpassword" autocomplete="off" class="bx--text-input bx--password-input" tabindex="2">
					<button type="button" id="show-pwd-btn-confirmpasword" class="bx--text-input--password__visibility__toggle bx--btn bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center pwd-icon-button" >
						<span class="bx--assistive-text">$SHOW_PASSWORD_HELP_TXT$</span>
						<svg class="bx--icon-visibility-on" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" >
						  <path id="eyeIconconfirmpassword" d="M15.5,7.8C14.3,4.7,11.3,2.6,8,2.5C4.7,2.6,1.7,4.7,0.5,7.8c0,0.1,0,0.2,0,0.3c1.2,3.1,4.1,5.2,7.5,5.3c3.3-0.1,6.3-2.2,7.5-5.3C15.5,8.1,15.5,7.9,15.5,7.8z M8,12.5c-2.7,0-5.4-2-6.5-4.5c1-2.5,3.8-4.5,6.5-4.5s5.4,2,6.5,4.5C13.4,10.5,10.6,12.5,8,12.5M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z M8,10c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S9.1,10,8,10z"></path>
						</svg>
					</button>
				</div>
				<button id="submit-change-password" class="button" type="submit" value="$CHANGE_PASSWORD_LABEL$" tabindex="3">
				$CHANGE_PASSWORD_LABEL$</button>
				<input id="skipNow" type="submit" value="Skip Now"/>
			</form>
			<div id="password-error-message" class="password-error-message">
				<!-- <img id="alert-img" alt="Alert" src="assets/img/alert_icon.png"/> -->
				<p id="password-error-text" class="password-error-text"></p>
			</div>
		</div>
		<ol class="spaced">
			<!--  START NON-TRANSLATABLE  -->
			[RPT PolicyDetails]
			<li><span data-name="@POLICYMESSAGE@">@POLICYMESSAGE@</span></li>
			[ERPT PolicyDetails]
			<!--  END NON-TRANSLATABLE  -->
		</ol>
		@PAGE_FOOTER@
	</div>
	<!-- Please do not move JS code from here, it may affect functionality -->
	<script type="text/javascript" src="/authsvc/mtfim/sps/static/v1/common.js"></script>
	<script type="text/javascript" src="/authsvc/mtfim/sps/static/v1/basicldapuser_changepassword.js"></script>
</body>

</html>

3.パスワード変更画面のカスタマイズ結果確認

パスワードで文字を入力すると、パスワードの強度が表示されます。

入力したパスワードの強度に応じて判定結果が変わります。

最後に

IBM Security Verifyで、Javascriptファイルを登録する機能を試してみました。