You can set up a custom login page on the Barracuda Web Application Firewall, and associate it with a service to authenticate users.
Step 1. Create a Custom Login Page
- Go to the ADVANCED > Libraries page.
- In the Response Pages section, click Add Response Page.
- Specify values for the following:
- Response Page Name – Enter a name for the response page.
- Type – Select Access Control Pages.
- Status Code – Enter 200 OK.
- Headers – Enter the response headers
- Body - Configure the response body for the response page. This is the HTML source of the response page to display to the client.
- Click Save.
Example: HTML Body
<!DOCTYPE html>
<html>
<head>
<title>Authentication and Access Control</title>
<style type="text/css">
html {
height: 100%;
}
html body {
background: none repeat scroll 0 0 #999999;
margin: 0;
height: 100%;
}
html body #form-body {
margin: 0 auto;
min-height: 100%;
overflow: auto;
position: relative;
background-color: #405F8D;
background-image: -moz-linear-gradient(center top , #405F8D, #001133);
}
html .form-signin-logo {
height: 35%;
left: 0;
position: absolute;
right: 0;
top: 15px;
z-index: 103;
}
html .form-signin-outer {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 35%;
width: 100%;
z-index: 103;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html .form-signin-wrapper {
vertical-align: top;
width: 100%;
}
html .form-signin {
background-color: #F7F7F7;
background-image: -moz-linear-gradient(center top , #F8F8F8, #E7E7E7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
font: 12px helvetica neue,helvetica,arial;
left: 50%;
margin-left: -260px;
position: relative;
width: 520px;
}
html .form-page-title {
background-color: #D8D8DD;
background-image: -moz-linear-gradient(center top , #D8D8DD, #E3E3E6);
color: #000000;
font: bold 18px/20px arial !important;
height: 20px;
margin-bottom: -1px;
padding: 10px 15px;
}
html .form-signin h2 {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
input[type="text"], input[type="password"] {
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
/*color: #333333;*/
}
/* html .form-signin .form-page-content, html .form-signin .page_content {
position: static;
}
*/
html #form-login-page {
overflow: hidden;
padding: 15px 30px !important;
}
html .form-field-text, .form-field-password {
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#fff));
background-image: -moz-linear-gradient(top,#f8f8f8,#fff);
cursor: text;
display: block;
font: 18px/24px helvetica neue,helvetica,arial;
margin: 15px 0;
padding: 5px 10px;
position: relative;
width: 95%;
z-index: 1;
}
html .form-field-submit[type="submit"] {
background: #004e9e;
background: -webkit-gradient(linear, left top, left bottom, from(#0079be), to(#004e9e));
background: -moz-linear-gradient(top, #0079be, #004e9e);
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: inline-block;
font: 18px/38px helvetica neue,helvetica,arial;
height: 40px;
opacity: 0.9;
padding: 0 20px;
margin: 0 0 10px;
cursor: pointer;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.75);
}
html .form-field-submit[type="submit"]:hover, .form-field-submit:hover, .form-field-submit:focus, .form-field-submit:active {
opacity: 1;
}
html .form-field-align-right {
float: right;
}
html .form-field-submit .form-field-align-right {
margin: 15px 0;
}
html .form-signin-logo {
background-image: url('data:image/png;base64,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');
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div id="form-body">
<div id="form-content">
<div class="form-signin-logo">
</div>
<table class="form-signin-outer">
<tr>
<td class="form-signin-wrapper">
<div class="form-signin">
<h2 class="form-page-title">Authentication and Access Control</h2>
<div id="form-page-content" class="form-page-content">
<form id="form-login-page" action="/nclogin.submit" method="POST">
<div id="form-page-fields">
Please provide your username and password to access restricted applications.
<input type="text" name="f_username" id="username_entry" value="" class="form-field-text" placeholder="Username" autocomplete="off">
<input type="password" name="f_passwd" id="password_entry" value="" class="form-field-password" placeholder="Password" autocomplete="off">
<input type="hidden" name="f_method" id="method_entry" value="LOGIN" class="form-field-text" placeholder="Method" autocomplete="off">
<input id="Submit" class="form-field-submit form-field-align-right" type="submit" value="Sign in" name="Submit">
</div>
</form>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
For more information, see How to Create a Custom Response Page.
Step 2. Configure the Barracuda Web Application Firewall to Use the Custom Login Page
To associate a custom login page with a service, do the following:
- Go to the ACCESS CONTROL > Authentication Policies page.
- In the Authentication Polices section:
- Identify the service you want to associate with the custom login page.
- Click Edit Authentication next to the service.
- On the Edit Authentication Policies page, under Edit Authentication Policy, set Status to On, and select an Authentication Service to be used for authentication.
- Under Access Control Pages, select the custom login page created in Step 1 from the Login Page drop-down list.
- Specify values for other parameters as required and click Save.