はじめに
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ファイルを登録する機能を試してみました。