It seems like your browser didn't download the required fonts. Please revise your security settings and try again.
Barracuda Web Application Firewall

Deploying the Custom Login Page on the Barracuda Web Application Firewall

  • Last updated on

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

  1. Go to the ADVANCED > Libraries page.
  2. In the Response Pages section, click Add Response Page.
  3. 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.
  4. 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:

  1. Go to the ACCESS CONTROL > Authentication Policies page.
  2. In the Authentication Polices section:
    1. Identify the service you want to associate with the custom login page.
    2. Click Edit Authentication next to the service.
  3. On the Edit Authentication Policies page, under Edit Authentication Policy, set Status to On, and select an Authentication Service to be used for authentication.
  4. Under Access Control Pages, select the custom login page created in Step 1 from the Login Page drop-down list.
  5. Specify values for other parameters as required and click Save.