Som's Oracle IAM Blog: OAM Custom Login Page (with Alert and Error Messages)

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:

action=http://oam_host:oam_port/oam/server/auth_cred_submit

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;">

</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.