Website Login Integration

Transcription

1 SSO Widget Website Login Integration October 2015

2 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):

3 Introduction This document explains how to add a basic Applied CSR24 Self-Service Portal Customer Login to your organization s website, which may look similar to what is shown below. Adding this login on your organization s website gives your clients a fast, easy way to access CSR24 Self-Service portal. These instructions are intended for web designers, and they detail the process for adding a simple CSR24 Self-Service login to an existing web page. In order to follow these directions, you must have general knowledge of HTML, as well as knowledge of HTML forms, which are used to implement the client login. The code to implement the login form uses a mix of required and optional values. 3

4 4

5 Getting Started This document focuses on the SSO Widget itself, the example form contains the following elements: The Customer Login label The login name text input The password text input A Remember Me checkbox A Sign On or Login button Register Account and Forgot Details links. <div class="login"> <h1>customer Login</h1> <form name="portalsignon" id="portalsignon" method="post" action=" <input type="hidden" name="agencykey" value=" " /> <input type="hidden" name="subagencykey" value="" /> <input type="hidden" name="errorurl" value=" /> <input type="text" name="username" size="99" placeholder="username" /> <input type="password" name="password" size="18" placeholder="password" /> <input type="checkbox" name="rememberme" value="remember"/><span class="rememberme">remember Me</span> <input type="button" name="signon" value="sign On" onclick="usersignon();" /> <a href="javascript:altlink('signup');">register Account</a> <a href="javascript:altlink('forgot');">forgot Details?</a> </form> </div> Note: For Canadian brokers, use and for UK brokers, use In addition, there are a number of hidden input fields some required and some optional. This is the main HTML code used for the example. Note that the JavaScript calls are included in the example, but do not require any updates. The full code for the example, including the JavaScript and CSS styling, is at the end of this document. You can update the CSS styles to align with your corporate branding. This document discusses the example shown above, line by line. Creating your Login Form The first element creates a div to contain your form, specifies a CSS class to provide a simple background color and positioning, and adds some header text as a 5

6 description. None of these are required, but they are recommended. <div class="login"> <h1>customer Login</h1> </div> The next step creates the HTML form element itself. The first step is to add an HTML form element to your webpage. The form s method is set to post to the CSR24 Self-Service Portal: <form name="portalsignon" id="portalsignon" method="post" action=" This element is required. You may replace the standard signon URL shown above ( with your organizations personalized URL obtained from Applied. Note: For Canadian brokers, use and for UK brokers, use Next there are several hidden values passed in. Hidden values are not visible on the webpage. Some of these values are required and some are optional. For optional values, you may omit the entire line if desired. The AgencyKey input value is required and represents your Agency Portal Key. The value shown, " " is for example purposes only. You should use your Applied assigned Agency Key value instead. If you do not know this value, please contact your Applied Account Manager. <input type="hidden" name="agencykey" value=" " /> The SubAgencyKey value is also not visible to the customer and is optional. This value is used for sub-agencies or branches that you may have defined. This example does not specify a value. <input type="hidden" name="subagencykey" value="" /> The "ErrorURL" parameter is optional and specifies a URL to which a customer is redirected if an incorrect user ID or password is entered. If you would like to handle the error within your site, you must specify a URL to which to redirect the login error. <input type="hidden" name="errorurl" value=" /> The value in this example above redirects to the CSR24 portal. Replace that URL with your own. 6

7 If a custom ErrorURL value is not specified, the customer is redirected to the default signon page for the Self-Service portal ( ) where the login error displays. This is also the case if you choose not to add this line. Next, add the Username and Password inputs to the webpage for the username and password. The Username value can be up to 99 characters and must match a user name already created in the Self-Service portal. The "size" value of 99 should not be changed from what is shown. The Password value may be up to 18 characters long. This "size" value should also not be changed from what is shown. <input type="text" name="username" size="99" placeholder="username" /> <input type="password" name="password" size="18" placeholder="password" /> The next line adds a Remember Me checkbox to the page. This is not required, and in this example is using JavaScript to create/set a user cookie when the Submit button is clicked if the item is checked. <input type="checkbox" name="rememberme" value="remember"/><span class="rememberme">remember Me</span> Add a button to submit the customer login information to the CSR24 portal to be verified. <input type="button" name="signon" value="sign On" onclick="usersignon();" /> The last two elements in the example code are optional and are using JavaScript calls for their functionality. <a href="javascript:altlink('signup');">register Account</a> <a href="javascript:altlink('forgot');">forgot Details?</a> Full code for the example (including CSS and JavaScript): <!DOCTYPE html> <html lang="en" xmlns=" <head> <meta charset="utf-8" />  <style> /*Login Container*/.Login { 7

8 background-color:#1180d7; width:210px; height:280px; color:#fff; padding:15px; /*Login Title*/.Login h1 { font-size:17px; text-align:left; margin:20px 0 0; font-weight:normal; /*links*/.login a { color:#fff; margin:12px 0; display:block; text-align:center; /*User Name and Password*/.Login input { width:195px; margin:20px 0 0; border:none; padding:10px 5px 5px 10px; color:#000; /*Sign on Button*/.Login input[type="button"] { width: 210px; margin: 10px 0 0; border: none; padding: 10px 5px; color: #1180d7; text-align: center; font-size: 14px; background-color: #fff; /*Container background color*/ /*container width*/ /*container height*/ /*text color*/ /*Title Font size*/ /*Link Color*/ /*Button text color*/ /*Button text alignment*/ /*Button font size*/ /*Button background color*/.login input[type="checkbox"] {width:30px; float:left;.login.rememberme {text-align:left; display:block; margin-top:17px; float:left; </style>   <script language="javascript"> function setcookie(cookiename, cookievalue) { 8

9 document.cookie = encodeuricomponent(cookiename) + '=' + encodeuricomponent(cookievalue) + '; expires=fri, 31 Dec :59:59 GMT' + '; path=/'; function getcookie(cookiename) { return decodeuricomponent(document.cookie.replace(new RegExp("(?:(?:^.*;)\\s*" + encodeuricomponent(cookiename).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$) ^.*$"), "$1")) null; function usersignon() { if (document.portalsignon.username.value > '' && document.portalsignon.password.value > '') { if (document.portalsignon.rememberme.checked == true) { setcookie('username', document.portalsignon.username.value); else { setcookie('username', ''); document.portalsignon.submit(); else { alert('please enter a user name and password'); document.portalsignon.username.focus(); function altlink(linkname) { if (linkname == 'signup') surl = ' if (linkname == 'forgot') surl = ' + document.portalsignon.agencykey.value + '/Password?language=EN&urlReferrer=' + encodeuricomponent(parent.location.href); document.portalsignon.action = surl; document.portalsignon.submit(); function documentready() { var saveduserid = getcookie('username'); if (saveduserid > '') { document.portalsignon.username.value = saveduserid; document.portalsignon.rememberme.checked = true; </script>  </head> <body onload="documentready();"> 9

10  <div class="login"> <h1>customer Login</h1> <form name="portalsignon" id="portalsignon" method="post" action=" <input type="hidden" name="agencykey" value=" " /> <input type="hidden" name="subagencykey" value="" /> <input type="hidden" name="culture" value="en-us" /> <input type="hidden" name="errorurl" value=" /> <input type="text" name="username" size="10" placeholder="username" /> <input type="password" name="password" size="10" placeholder="password" /> <input type="checkbox" name="rememberme" value="remember"/><span class="rememberme">remember Me</span> <input type="button" name="signon" value="sign On" onclick="usersignon();" /> <a href="javascript:altlink('signup');">register Account</a> <a href="javascript:altlink('forgot');">forgot Details?</a> </form> </div>  </body> </html> 10