Customizing the SmartCloud for Social Business Login

Creating a custom login form for SmartCloud for Social Business is pretty basic – like “I once took a class on HTML at a coffee shop” basic.  It’s just an HTML form that anyone with a little bit of web development can achieve.  For example, let’s consider the following custom login form.

Business Partner Login Form

I’ve copied the login form (View -> Page Source on the login page), hosted it on another server, and added a custom graphic.  The Javascript files, style sheets, and submission location still reside on SmartCloud.  Take a look; it’s basic HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login</title>
 
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="shortcut icon"
href="https://apps.na.collabserv.com/manage/theme/images/SmartCloud_favicon.ico" />
<link type="text/css"
href="https://apps.na.collabserv.com/manage/css/1.53-SNAPSHOT/bluehouse.css"
rel="stylesheet" />
<link rel="stylesheet"
href="https://apps.na.collabserv.com/manage/css/1.53-SNAPSHOT/meetings.css"
type="text/css" />
<script type="text/javascript"
src="https://apps.na.collabserv.com/manage/js/1.53-SNAPSHOT/authUtils.js"></script>
<script type="text/javascript"
src="https://apps.na.collabserv.com/manage/resource/getProductDetails"></script>
</head>
 
<body class="tundra" style="text-align: center;"
onload="initLoginPage();">
<div id="frame">
<div id="joinBox" style="text-align: left;">
<div id="mainBox" role="main" aria-labelledby="pageTitle">
<div class="mainBox_inner">
<!-- need to translate the alt tag contents -->
<div id="company_logo" role="banner">
<a class="ibm_login" href="http://www.ibm.com"
style="text-align: left;" id="loginLogo"><img
src="ibm-bp.png" alt="IBM" /></a>
</div>
<h1 id="pageTitle">Host Sametime Meeting</h1>
 
<div id="errorMessage" class="error_login" style="display: none;"
role="alert" aria-live="assertive">Your username &amp;
password are not recognized by the service. Please check your
login credentials and try again.</div>
 
<div id="suspenderrorMessage" class="error_login"
style="display: none;" role="alert" aria-live="assertive">
Your account has been expired or suspended.</div>
<form id="loginActionForm" name="login" onsubmit="return false;"
action="https://apps.na.collabserv.com/pkmslogin.form"
method="post" role="form">
<fieldset>
<legend>
Log in to <span id="productName1"></span>
</legend>
<input type="hidden" name="login-form-type" value="pwd" /> <input
type="hidden" id="error-code" name="error-code" value="" /> <label
id="loginActionForm_eMail" for="username">E-mail
address:</label> <input type="text" name="username" id="username"
class="text" aria-required="true" /> <label
id="loginActionForm_Password" for="password">Password:</label> <input
type="password" name="password" id="password" class="text"
aria-required="true" />
</fieldset>
<div style="padding: 15px 0px 0px 0px;">
<input type="submit" class="lotusBtn ok okLeft" id="submit_form"
onclick="submitLoginForm();" value="Log In" /> <a role="button"
class="forgot" id="forgot" href="#"
onclick="showPasswordRecoveryPage('loginActionForm');">Forgot
password?</a>
<div style="clear: both;">&nbsp;</div>
</div>
</form>
</div>
</div>
 
<div style="clear: both;">&nbsp;</div>
<!-- Do Not Remove For Gomez Scripts -->
<div style="display: none;">6h5k7fQJ1VSa6qi5dxgr</div>
</div>
</div>
<script type="text/javascript">
initError();
</script>
<iframe src="https://apps.na.collabserv.com/meetings/host/sametime"width="0" height="0" style="visibility: hidden"></iframe></body>
</html>

Notice the highlighted lines?  This is a hidden IFRAME containing the host URL for Sametime Meetings.  “So, what?” you ask.

Think about what would happen if you pasted any SmartCloud URL into your browser. Unless you’re already logged in, you are likely to be issued the login page by Tivoli Access Manager.  TAM is also setting a cookie in your browser to your pasted URL. This way – after you login – TAM reads the cookie, and you get sent back to the URL you pasted. Otherwise, you just end up on SmartCloud for Social Business’ home page.

By including the hidden IFRAME, the form is also telling TAM where we want to go after login. It’s doing two functions: login and redirect. In the above code, a user logs in, and he or she is entered immediately into a Sametime Meeting as the host.  This bypasses the SmartCloud user interface and alleviates the need to manually press the ‘Host Meeting’ button.

Removing the SmartCloud user experience in this manner might seem counter-intuitive, but there are use cases for ISVs that make this solution desireable.

Leave a Reply

Your email address will not be published.