Fortinet black logo

Handbook

Configuring customized authentication form

Configuring customized authentication form

FortiADC allows you to customize your login page with your company brand images and modify the layout/text. It also supports the 2FA token page.

Similar to the GUI of the error page, we allow the user to upload a zip/tar/tar.gz file. The file must include a logging.html file and you must use onsubmit="return Fsb(event)" in your form. It must include the tag %%auth_script%%.

If you would like to use a token, you must include the tag %%token_script%% in your web page and use onsubmit="return Fsb(event)" in your form.

To configure a Customized Authentication Form:

1. Go to User Authentication > Customized Authentication Form.

2. Click Create New to display the configuration editor.

3. Complete the configuration for the customized authentication form.

4. Save the configuration.

Settings Guidelines
Name Configuration name. Valid characters are A-Z, a-z, 0-9, _, and -. No spaces. After you initially save the configuration, you cannot edit the name.
File File package for customize Authentication form page. Click ‘Choose File’ to upload.
Username Field Name The username field name in customize form
Password Field Name The password field name in customize form
Virtual Path Virtual path of customized authentication form function. This path is running on VS, so it will conflict with other configure like error page’s vpath and Captcha.

When you choose to use a customized authorization form, LB will untar/unzip the file to /tmp/cust_auth/[vdom]/[vs name]/[auth form name]/ from /home/backup_config_file/[vdom]/cust_auth/[auth profile name].zip and add a line, FileSrv [location of untar/unzip file] [/virtual address/], to the httproxy config which will handle this line by the local file framework in httproxy.

The following is an example of a login.html file:

<html>

<head>

<style type="text/css">html, body, div, h1, p, form, section,{fontsize:

100%;font:inherit;vertical-align:baseline;} section {display:block;} body {lineheight:1;font:13px/20px 'Lucida Grande',Tahoma,Verdana,sansserif; color:#404040;background:#fff;} .cter {margin:80px auto;width:640px;} .lgin {position:relative;margin:0 auto;padding:20px 20px 20px;width:270px;background:#f2f2f2;border-radius:3px;} .lgin h1 {margin:-20px -20px 21px;line-height:40px;font-size:15px;font-weight:bold;color:white;textalign:center;background:#555555;border-bottom:1px solid #cfcfcf;border-radius:3px 3px 0 0;} .lgin p {margin:20px 0 0;} .lgin p.submit {text-align:center;} input[type=text], input[type=password] {margin:5px;padding:0 10px;width:160px;height:25px;color:#404040;background:white;border:1px solid;bordercolor:#c4c4c4 #d1d1d1 #d4d4d4;outline:3px solid #eff4f7;} input[type=text]:focus, input [type=password]:focus {border-color:#7dc9e2;outline-color:#dceefc;outline-offset:0;} input[type=submit] {padding:0 18px;height:29px;font-size:12px;fontweight:bold;color:#527881;background:#cde5ef;border:1px solid;border-color:#b4ccce #b3c0c8 #9eb9c2;border-radius:8px;outline:0;} input[type=submit]:active {background:#dfe7f2;border-color:#9eb9c2 #b3c0c8 #b4ccce;}</style>

</head>

%%auth_script%%

<body >

<section class="cter">

<div class="lgin">

<h1>Web Authentication</h1>

<form method="post" action="/" onsubmit="return Fsb(event)">

<p>UserName: <input type="text" id="un" required></p>

<p>Password : <input type="password" id="pwd" required></p>

<p class="submit"><input type="submit" value="Login"></p>

</form>

</div>

</section>

</body>

</html>

Configuring customized authentication form

FortiADC allows you to customize your login page with your company brand images and modify the layout/text. It also supports the 2FA token page.

Similar to the GUI of the error page, we allow the user to upload a zip/tar/tar.gz file. The file must include a logging.html file and you must use onsubmit="return Fsb(event)" in your form. It must include the tag %%auth_script%%.

If you would like to use a token, you must include the tag %%token_script%% in your web page and use onsubmit="return Fsb(event)" in your form.

To configure a Customized Authentication Form:

1. Go to User Authentication > Customized Authentication Form.

2. Click Create New to display the configuration editor.

3. Complete the configuration for the customized authentication form.

4. Save the configuration.

Settings Guidelines
Name Configuration name. Valid characters are A-Z, a-z, 0-9, _, and -. No spaces. After you initially save the configuration, you cannot edit the name.
File File package for customize Authentication form page. Click ‘Choose File’ to upload.
Username Field Name The username field name in customize form
Password Field Name The password field name in customize form
Virtual Path Virtual path of customized authentication form function. This path is running on VS, so it will conflict with other configure like error page’s vpath and Captcha.

When you choose to use a customized authorization form, LB will untar/unzip the file to /tmp/cust_auth/[vdom]/[vs name]/[auth form name]/ from /home/backup_config_file/[vdom]/cust_auth/[auth profile name].zip and add a line, FileSrv [location of untar/unzip file] [/virtual address/], to the httproxy config which will handle this line by the local file framework in httproxy.

The following is an example of a login.html file:

<html>

<head>

<style type="text/css">html, body, div, h1, p, form, section,{fontsize:

100%;font:inherit;vertical-align:baseline;} section {display:block;} body {lineheight:1;font:13px/20px 'Lucida Grande',Tahoma,Verdana,sansserif; color:#404040;background:#fff;} .cter {margin:80px auto;width:640px;} .lgin {position:relative;margin:0 auto;padding:20px 20px 20px;width:270px;background:#f2f2f2;border-radius:3px;} .lgin h1 {margin:-20px -20px 21px;line-height:40px;font-size:15px;font-weight:bold;color:white;textalign:center;background:#555555;border-bottom:1px solid #cfcfcf;border-radius:3px 3px 0 0;} .lgin p {margin:20px 0 0;} .lgin p.submit {text-align:center;} input[type=text], input[type=password] {margin:5px;padding:0 10px;width:160px;height:25px;color:#404040;background:white;border:1px solid;bordercolor:#c4c4c4 #d1d1d1 #d4d4d4;outline:3px solid #eff4f7;} input[type=text]:focus, input [type=password]:focus {border-color:#7dc9e2;outline-color:#dceefc;outline-offset:0;} input[type=submit] {padding:0 18px;height:29px;font-size:12px;fontweight:bold;color:#527881;background:#cde5ef;border:1px solid;border-color:#b4ccce #b3c0c8 #9eb9c2;border-radius:8px;outline:0;} input[type=submit]:active {background:#dfe7f2;border-color:#9eb9c2 #b3c0c8 #b4ccce;}</style>

</head>

%%auth_script%%

<body >

<section class="cter">

<div class="lgin">

<h1>Web Authentication</h1>

<form method="post" action="/" onsubmit="return Fsb(event)">

<p>UserName: <input type="text" id="un" required></p>

<p>Password : <input type="password" id="pwd" required></p>

<p class="submit"><input type="submit" value="Login"></p>

</form>

</div>

</section>

</body>

</html>