Introduction
IBM Security Verify provides a variety of messages on various pages. When client build their customized experience they do wish to change the message content which are shown by Verify. As those messages are coming from Verify system, there is no direct way to change them. But it can be achieved by using Java scripting on various pages.
ConfigurationLets take example of login page where user provides wrong credentials. In this scenario user is shown error message as:
Note that each message in Verify has a unique messageId such as "
CSIAH0303E" in above case.
Now in order to customize the above message admin needs to follow the steps as below:
- Download the default page templates for Verify using GET
https://{{tenantId}}/template/v1.0/branding/download API
- Save the content as ZIP file
- Extract the ZIP content
- Now explore the folder and open the
page.html which need to be modified (Ex: templates\authsvc\basicldapuser_login\default\default)
- Add a custom Java script to override the error message at the end of the body section
<!DOCTYPE html>
<html>
<head>
<title id="loginTitle">$LOGIN_TITLE$</title>
<base href="/" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<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@" />
<script>
// START NON-TRANSLATABLE
const action = "@ACTION@";
const themeId = "@THEME_ID@";
var errorMessage = "@ERROR_MESSAGE@";
var isForgotPasswordEnabled = "@SHOW_FORGOT_PASSWORD_LINK@";
var username = "@USERNAME@";
// END NON-TRANSLATABLE
</script>
</head>
<body>
<div class="cs-content login">
@PAGE_HEADER@
<div class="login-main">
<form id="login-main-form" class="login-fields input-centered" method="POST" action="" onsubmit="disableForm()">
<input type="hidden" name="operation" value="verify" />
<label class="label" id="user-name-label">$LOGIN_USER_NAME$</label>
<input id="user-name-input" placeholder="$LOGIN_USER_NAME$" type="text" name="username" tabindex="1"
class="user-name" onClick="inputClick(event)" onKeyup="inputKeyup(event)" onBlur="inputBlur(event)" carbon-text-input="false"/>
<span>
<label id="password-label" class="label" style="width: 50%;">$LOGIN_PASSWORD$</label>
<a id="forgot-password-link" class="bx--link" tabindex="4"
href="/authsvc/mtfim/sps/authsvc?PolicyId=urn:ibm:security:authentication:asf:forgotpassword&Target=@RETURN_HOME_LINK@&themeId=@THEME_ID@"
style="float: right; padding-top: 20px; display: none">$LOGIN_WITH_FORGOT_PASSWORD$</a>
</span>
<input id="password-input" type="password" placeholder="$LOGIN_PASSWORD$" name="password" tabindex="2" autocomplete="off" class="password"
onClick="inputClick(event)" onKeyup="inputKeyup(event)" onBlur="inputBlur(event)"/>
<button class="button" id="login-button" value="login" class="button-1 ease-in-anim-fast login" type="submit" cs-attach="submitButton" tabindex="3">$LOGIN_BUTTON$</button>
</form>
<div id="login-error-message" class="login-error-message ease-in-anim">
<p id="login-error-text" class="login-error-text"></p>
</div>
</div>
@PAGE_FOOTER@
</div>
<!-- Please do not move JS code from here, it may affect functionality -->
<script type="text/javascript" src="/authsvc/mtfim/sps/static/common.js"></script>
<script type="text/javascript" src="/authsvc/mtfim/sps/static/basicldapuser_login.js"></script>
<script>
if(errorMessage.includes("CSIAH0303E")) {
document.getElementById("login-error-text").innerHTML = "It seems you have forgotten your credentials. Lets give a other try";
} else {
document.getElementById("login-error-text").innerHTML = "Initial message";
}
</script>
</body>
</html>
- Do the similar changes to the various pages which need to override the messages
- Create a new ZIP file with all changes
- Upload the new template.zip using POST
https://{{tenantId}}/template/v1.0/branding/upload API
- Now access the login page and validate the new messaging experience on the various pages
ReferenceVerify Knowledge Center for brandingTo know more read
IBM Security Verify---------------------------------------
NILESH ATAL
IBM Security (India Software labs)
---------------------------------------
#IBM-Security-Verify#identity#SAML#Security#Security-verify#Verify