Configuring customized authentication forms
FortiADC allows you to customize your login page with your company brand images and modify the layout/text.
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 login.html file and you must use onsubmit="return Fsb(event)" in your form. It must include the tag %%auth_script%%.
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. |
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="customize-username" 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>
Using the information from the example login.html file, the following is the corresponding Customized Authentication Form configuration in the GUI.
The corresponding CLI configuration:
config user cust_auth_form
edit "customized-auth-form-example"
set auth_form-file customized-auth-form-example.zip
set username_field customized-username
set password_field pwdcustomized-password
set virtual_path adcvirtualpath-forAuthForm2
next
end
Using the customized authentication form for 2FA token
To use a token for 2FA, you can upload a zip/tar/tar.gz file. The file must include a token_page.html file that contains the tag %%token_script%% that you can use in your web page and use onsubmit="return Fsb(event)" in your form.
The following is an example of token_page.html file for 2FA token:
<html>
<head>
<style type="text/css">html, body, div, h1, p, form, section,{font-size:100%;font:inherit;vertical-align:baseline;} section {display:block;} body {line-height:1;font:13px/20px 'Lucida Grande',Tahoma,Verdana,sans-serif;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;text-align: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;border-color:#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;font-weight: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>
%%token_script%%
<body >
<section class="cter">
<img align="middle" src="goldbrig.jpg">
<div class="lgin">
<h1>2FA-Mick-page</h1>
<form method="post" action="/" onsubmit="return Fsb(event)">
<p>Token: <input type="text" id="token" required></p>
<p class="submit"><input type="submit" value="Login"></p>
</form>
</div>
</section>
</body>
</html>