- For many applications it is a primary requirement to provide a client specific login page where their company logo or messages should be displayed.
- An OAM resource should prepare this login page which will be thrown to user when the resource is accessed.
- Mostly .jsp or .html pages are used as a custom login page in OAM.
- Here a .html page is used as a login page which has username and password fields and a submit button to post the credentials.
- It displays alert messages to user if username or password field left blank. Most Importantly it also provides OAM Error messages on the page if wrong username or password is provided.
- <scipt> tag is used to write the scripts in the .html page which will show the alert and error messages.
- In this page validate() function is used for alert messages and ReadCookie() function is used for OAM error messages.
- This page can be used as a login page for any application just by changing the path of .css and image files and most importantly the auth_cred_submit url which should have oam_host: port as below:
- Please find below the code for html page. Copy and paste the contents in a notepad and save as MyPage.html page.
Code for the Login page
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<title>Login to My Application</title>
<img src="images/child.jpg" alt="Child"
height="200" width="200">
<link rel="stylesheet" href="images/style.css">
</head>
<script
type="text/javascript">
function trim(s)
{
return s.replace( /^\s*/,
"" ).replace( /\s*$/, "" );
}
function validate() {
var x =
document.forms["frmLogin"]["username"].value;
if (x == "") {
alert("Login is
Empty");
return false;
}
var y = document.forms["frmLogin"]["password"].value;
if (y == "") {
alert("Password is
Empty");
return false;
}
}
function ReadCookie() {
var id = getUrlVars()["p_error_codes_list"];
if (id == "OAM-2") {
var
data="<b>UserID or Password is not Correct</b>";
document.getElementById('mylocation').innerHTML="<span
style=\"color:red\">" + data + "</span>";
}
else if (id ==
"OAM-1") {
var
data="<b>An incorrect Username or Password is
specified</b>";
document.getElementById('mylocation').innerHTML="<span
style=\"color:red\">" + data + "</span>";
}
else if (id ==
"OAM-8") {
var data="<b>Authentication
failed</b>";
document.getElementById('mylocation').innerHTML="<span
style=\"color:red\">" + data + "</span>"; }
}
function getUrlVars() {
var vars = [], hash;
var hashes =
window.location.href.slice(window.location.href.indexOf('?') +
1).split('&');
for(var i = 0; i <
hashes.length; i++)
{
hash =
hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
<style>
body {
background-color:#6694CF;
}
</style>
<div Style="position:absolute; visibility:show; left:5px;
top:5px;">
<!--img
src="images/ascena-eprocurement-color.png"
width="65%"/-->
</div>
<body onload="ReadCookie()">
<section class="container">
<div
class="login">
<h1>Login to
aPP</h1>
<form name="frmLogin"
onSubmit="return validate()" action="http://localhost:14100/oam/server/auth_cred_submit"method="post">
<p><input type="text"
name="username" placeholder="Username"></p>
<p><input type="password" name="password"
placeholder="Password"></p>
<p><input
name="request_id" value="<%=reqId%>"
type="hidden"></p>
<p><input
type="submit" name="sSubmit"
value="Login"></p>
<label id="mylocation"></label>
</form>
<div
class="login-help">
<p>Forgot your password? <a
href="http://localhost:7001/console">Click here to reset it</a>.</p>
</div>
</section>
</body>
</html>
- Keep this page under htdocs folder of OHS.
- Create an Authentication scheme as MyScheme as per below screenshot.
- If want a .jsp page, modify the page accordingly (use <% tag instead of script); then it should be deployed in OAM server as a .war file and the Authentication scheme should be as below.
- Create an Authentication policy MyPolicy using Myscheme and protect the required resource with that policy.
- Gives Alert and Error messages as below:
