• fb
  • tw
  • gg
97008 48403
+91 40-27177600

Blog

How to Login Securely from HTML form in Mule ESB

single-blog

From the technical center of excellence of Massil Technologies, our technology leaders make it easy to understand the complex situations you come across in Mule ESB from the experience of Massil Technologies to have countered them in their experience of working on client projects in real time. This blog talks about logging in securely from HTML form in Mule ESB. This blog is a part of series of blogs being authored and published by Massil Technologies for the benefit of the IT community globally.

Out of the different scenarios we worked upon, we are sharing with you the most effective and easiest way of doing it. Hope our article helps you in your task. The step by step approach is as follows:

Step 1: Create a project and search Http connector in Mule ESB palette and drag it to the Message flow and configure as follows

Step 2:- Keep the Parse Template after the Http connector to call HTML page which consists of login content.

 

Step 3: Keep the index.html, loginSuccessful.html, unsuccess.html files in src/main/resources in the project

index.html:

<!DOCTYPE html>

<html>

<style>

form {

border: 3px solid #f1f1f1;

}

 

input[type=text], input[type=password] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

box-sizing: border-box;

}

 

button {

background-color: #4CAF50;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

}

 

button:hover {

opacity: 0.8;

}

 

.cancelbtn {

width: auto;

padding: 10px 18px;

background-color: #f44336;

}

 

.imgcontainer {

text-align: center;

margin: 24px 0 12px 0;

}

 

img.avatar {

width: 40%;

border-radius: 50%;

}

 

.container {

padding: 16px;

}

 

span.psw {

float: right;

padding-top: 16px;

}

 

/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {

span.psw {

display: block;

float: none;

}

.cancelbtn {

width: 100%;

}

}

</style>

<body>

 

<form action=“/Login”>

<div  class=“container “>

<div class=“row”>

<div class=“col-lg-4 col-md-4 col-sm-4 col-md-offset-4”>

 

<label><b>Username</b></label>

<input type=“text” placeholder=“Enter Username” name=“username” required>

 

<label><b>Password</b></label>

<input type=“password” placeholder=“Enter Password” name=“password” required>

 

<button type=“submit”>Login</button>

<input type=“checkbox” checked=“checked”> Remember me

</div>

 

<div class=“container” style=”background-color:#f1f1f1“>

<button type=“button” class=“cancelbtn”>Cancel</button>

<span class=“psw”>Forgot <a href=“#”>password?</a></span>

</div>

</div> </div>

</form>

 

</body>

</html>

loginSuccessful.html

<!DOCTYPE html>

<html>

<body>

<h1>success</h1>

</body>

</html>

unsuccess.html

<!DOCTYPE html>

<html>

<body>

<h1>fail</h1>

</body>

</html>

Step 4: Now, create another flow & keep the http Inbound connector, configure as follows

Step 5:-Keep the message Filter in the Message Flow so that we can identify the incoming username & password is same as we defined or not.

Step 6: Keep another Parse Template to print the successful HTML after successful login validation.

Step 7: In Http expand the Error Handling, keep the Catch Exception Strategy. In Catch, Exception Strategy keep another Parse Template for loading unsuccessful HTML.

Step 8: Complete Mule ESB Flow is as follows:

Step 9: Run the project and after successful deployment, Hit the URL http://localhost:8081/login from Browser you will get the login page.

Step 10:-Now, Give the username as mule & password as mule, Click LOGIN then you will get a success message. Otherwise If the Credentials are Different You Get the Failure Message

 

Hence, we have gone through the step by step process to depict the way Massil Technologies team has addressed the above-mentioned scenario. Hope this article from Massil Technologies was useful for you. If you have any further queries on this topic, please reach out to info@massil.tech.

Leave a Reply

Your email address will not be published. Required fields are marked *

map

Contact Us

Get in touch with us