Embedding a FrontlineCloud Sign-In form within an external webpage

It is possible to embed a form into your app and let your users directly log in to FrontlineCloud. In order to add the ability to log into FrontlineCloud from your app, follow the following steps.

You should do this in a secured page served over HTTPS.

Step 1:

Add the Javascript resources definitions below into the head section of your web page.

 
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
//the jquery resource above is optional if you already have jquery included on your page.

<script type="text/javascript" src="https://cloud.frontlinesms.com/assets/third-party-initiated-signin.js">
</script>
//this is the resource that contains the code that lets you log in to FrontlineCloud.

 <script type="text/javascript"> 
$(function() { 
     thirdPartyInitiatedLoginUtil.init();
     // initialize the frontline thirdPartyInitiatedLogin utility function. 
}); 
</script>

Step 2:

Add the form HTML markup into your web page where you want the form to show.

Ensure your form action points to https://cloud.frontlinesms.com/j_spring_security_check and that your form has a username input field with id j_username and a password input field with id j_password like in the sample code below.

<div class="form-wrapper">
 <form id="frontline-third-party-initiated-signin-form" method="POST" action="https://cloud.frontlinesms.com/j_spring_security_check">
 <div id="login-response-message-container">
   <!-- notifications about the status of the attempted login will be displayed here.-->
 </div>
 <input type="text" name="j_username" id="j_username" placeholder="Email">
 <input type="password" name="j_password" id="j_password">
 <button type="submit" class="frontline-sign-btn" id="frontline-sign-btn">Sign in</button>
 </form>
 <a href="https://cloud.frontlinesms.com/register/forgotpassword" name="forgotPassword">Forgot your password?</a>
</div>

Login response messages like error messages during user authentication will be displayed in the section

<div id="login-response-message-container">

You can always override how and what is displayed to your users when the following occur.

• Login wasn't possible because of wrong credentials; Override method loginFailureHandler in loginFailureHandler.  
  
• Login wasn't possible because of an unknown error in FrontlineCloud; Override method genericErrorHandler in loginFailureHandler.
  
• Login operation started; Override method onLoginStartNotificationCreator in loginFailureHandler.

Note

You can include additional tags and attributes to style the form