FortiAuthenticator not displaying custom fields

alexlopes · ‎02-08-2023

Good afternoon everybody!

I'm new to FortiAuthenticator and I'm having an issue related to custom fields in FortiAuthenticator.

Within the company, there is an identification that is informed to the guests and they must fill in the custom field to complete the registration, however, the custom fields are not displayed in the user's registration.

I renamed the fields, left them with the default name, downgraded the version but the problem persists.

And this custom field is of paramount importance in the implementation, since it must be registered with a predetermined code given to the guest at the entrance of the company.

If anyone has ever had a situation like this and can share how they did it so that the custom field could be shown, I would be very grateful.

NSE4 | NSE5 | NSE7 | FCP | FCSS

pminarik · ‎02-13-2023

I suspect you have the variables mis-labeled.

I've tried to set this up myself, on FAC 6.4.6, and here's the added HTML code snippet that works for me:

<div class="form-row">
    <label for="id_custom1" class="required inline">Custom1 variable name: {{:custom1_label}}:</label>
    <input autocomplete="off" id="id_custom1" name="{{:custom1}}" type="text" value="{{:custom1_val}}">
    <span class="error">{{:custom1_errors}}</span>
</div>

The snippet can be placed between any two <div>s of the other form fields.

And here's what it looks like:

FAC - self-registration portal with custom field

[ corrections always welcome ]

View solution in original post

gfleming · ‎02-08-2023

Hi can you please share more details / clarify the workflow here. And better describe the use-case?

It sounds like you have Guest users, visiting the company and they need access to the network?

Guest users in FortiAuthenticator cannot have Custom Fields assigned. Only Local Users.

Please describe what you're trying to do and how you are trying to do it and we will see if we can find a way to do it with FortiAuthenticator.

Cheers,
Graham

alexlopes · ‎02-10-2023

Good afternoon, thank you for taking the time to read and respond.

My problem is the following:

We have the FortiAuthenticator and it is configured so that the guest when connecting to the Wi-Fi is automatically redirected to the captive portal to create a self-registration and log in to the guest network.

Within this record, I would like to add in addition to First Name - Last Name - Email and Phone also a custom field.

In this custom field, we need the user to enter a code that was generated at the entrance, so that we can at some point identify him if necessary.

For this we have enabled the custom field as "required" in the guest registration forum. However, the field is not displayed to guests.

This is my question, what am I doing wrong.

Did you understand the point I would like to reach?

NSE4 | NSE5 | NSE7 | FCP | FCSS

gfleming · ‎02-10-2023

Can you not just identify the user by name/email address?

Have you followed the instructions here to create the portal? https://docs.fortinet.com/document/fortiauthenticator/6.4.0/cookbook/578250/fortiauthenticator-as-a-...

You can also automatically create bulk guest user accounts but they are using random characters so you'd need another method for correllating them to user email/names etc:

https://docs.fortinet.com/document/fortiauthenticator/6.4.6/administration-guide/813547/guest-users

Cheers,
Graham

alexlopes · ‎02-11-2023

Yes I Can.

But identification by ID previously delivered to the visitor is part of the project.

NSE4 | NSE5 | NSE7 | FCP | FCSS

pminarik · ‎02-10-2023

You may need to edit this field into the form manually.

Authentication > Portals > Replacement messages > (open the relevant portal name) > User Registration Page

If you click the "Toggle Tag List", you will see variables for "custom1", "custom2", and "custom3". I don't see them listed in the default HTML code, so I would assume they don't show up unless added.

And while you're there, you can also check if anyone has already modified the HTML code.

[ corrections always welcome ]

alexlopes · ‎02-11-2023

Unfortunately I tried to edit the HTML file, but without success.

Can you see if something is wrong?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>REGISTRO</title>
  <link rel="stylesheet" type="text/css" href="/site_media/css/font-awesome/css/font-awesome.css?v=1043"/>
  <script type="text/javascript" src="/site_media/js/jquery/jquery.js?v=1043"></script>
  <style type="text/css">
    html,body {
      color: black;
      font-size: 12px;
      font-family: arial,helvetica,sans-serif;
      margin:0;
      padding:0;
    }
    form {
      margin: 0;
      padding: 0;
    }
    form label {
      color: #333333;
      display: block;
      font-size: 12px;
      font-weight: normal;
      width: 15em;
      float: left;
      padding: 3px 10px 0 0;
    }
    fieldset {
      background-color: #F5F5F5;
      border: 1px solid #CCCCCC;
      margin: auto;
      margin-bottom: 5px;
    }
    label.required {
      color: #333333;
      font-weight: bold;
    }
    span.error {
      color: red;
      display: inline-block;
      font-size: 11px;
      margin: 0 5px;
      vertical-align: middle;
      width: 200px;
      word-wrap: break-word;
    }
    ul.messagelist {
      margin: 0;
      padding: 0;
      margin-top: 2px;
    }
    ul.messagelist li {
      color: #666666;
      display: block;
      list-style-type: none;
      margin: 0;
      padding: 4px 0;
    }
    ul.messagelist li.info, ul.messagelist li.success{
      color: #007722;
    }
    ul.messagelist li.error {
      color: red;
    }
    ul.messagelist li.warning {
      color: #FF8700;
    }
    .errornote {
      color: red;
      display: block;
      padding: 4px 5px 4px 0;
    }
    .form-row {
      overflow: hidden;
      padding: 4px 12px;
    }
    .form-row img, .form-row input {
      vertical-align: middle;
    }
    .submit-row {
      background-color: #EEEEEE;
      background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
      border: 1px solid #CCCCCC;
      margin: 5px 0;
      overflow: hidden;
      padding: 5px 7px;
      text-align: center;
    }
    #container {
      min-width: 800px;
      padding: 0;
      position: relative;
      width: 100%;
    }
    #form-content {
      margin: auto;
      width: 700px;
    }
    .field-icon {
        margin-left: -25px;
        position: relative;
        z-index: 2;
    }
    input[type="text"], input[type="password"], select {
      width: 220px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="form-content">
      <ul class="messagelist">{{:msgs}}</ul>
      <span class="errornote">{{:form_errors}}</span>
      <p>PREENCHA OS CAMPOS ABAIXO.</p>
      <form action="" method="post">{{:csrf_token}}
        {{:wiz_fields}}
        <fieldset>
          <div class="form-row" id="id_approver" >
            <label for="id_approver">Sponsor:</label>
            <select name="{{:approver}}">
            {{:approver_options}}
            </select>
            <span class="error">{{:approver_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_username" class="required">Username:</label>
            <input id="id_username" maxlength="253" name="{{:username}}" type="text" value="{{:username_val}}">
            <span class="error">{{:username_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_password1" class="required">Password:</label>
            <input id="id_password1" name="{{:password1}}" type="password">
            <span toggle="#id_password1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            <span class="error">{{:password1_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_password2" class="required">Confirm password:</label>
            <input id="id_password2" name="{{:password2}}" type="password">
            <span toggle="#id_password2" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            <span class="error">{{:password2_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_first_name" class="required">First name:</label>
            <input id="id_first_name" name="{{:first_name}}" type="text" value="{{:first_name_val}}">
            <span class="error">{{:first_name_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_last_name" class="required inline">Last name:</label>
            <input id="id_last_name" name="{{:last_name}}" type="text" value="{{:last_name_val}}">
            <span class="error">{{:last_name_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_email1" class="required">Email address:</label>
            <input id="id_email1" name="{{:email1}}" type="text" value="{{:email1_val}}">
            <span class="error">{{:email1_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_email2" class="required inline">Confirm email address:</label>
            <input autocomplete="off" id="id_email2" name="{{:email2}}" type="text" value="{{:email2_val}}">
            <span class="error">{{:email2_errors}}</span>
          </div>
		  <div class="form-row">
            <label for="id_custom_field1" class="required inline">CPF:</label>
            <input autocomplete="off" id="id_custom_field1" name="{{:custom_field1}}" type="text" value="{{:custom_field1_val}}">
            <span class="error">{{:custom_field1_errors}}</span>
          </div>
          <div class="form-row">
            <label for="id_phone_number">Phone number:</label>
            <input id="id_phone_number" maxlength="64" name="{{:phone_number}}" type="text" value="{{:phone_number_val}}">
            <span class="error">{{:phone_number_errors}}</span>
          </div>
          <div class="form-row" id="id_mobile_number_row">
            <label for="id_mobile_number">Mobile number:</label>
            <input class="intl-phone-input"
              id="id_intl_phone_{{:mobile_number}}"
              name="intl_phone_{{:mobile_number}}"
              data-field-id="id_mobile_number"
              data-field-name="{{:mobile_number}}"
              type="tel"
              value="{{:mobile_number_val}}"
              />
            <span class="error">{{:mobile_number_errors}}</span>
          </div>
          <div class="form-row" id="id_verification" >
            <label for="id_verification">Verification:</label>
            <select name="{{:verification}}">
            {{:verification_options}}
            </select>
            <span class="error">{{:verification_errors}}</span>
          </div>
          <div class="form-row" id="id_account_delivery" >
            <label for="id_account_delivery">Registration Method:</label>
            <select name="{{:account_delivery}}">
            {{:delivery_options}}
            </select>
            <span class="error">{{:account_delivery_errors}}</span>
          </div>
        </fieldset>
        <div class="submit-row">
          <input type="submit" value="Submit">
          <input type="button" value="Cancel" onclick="window.location.href='{{:login_url}}';">
        </div>
      </form>
    </div>
  </div>
</body>
<script type="text/javascript" src="{{:jquery_url}}"></script>
<script>
    function set_approver_visibility()
    {
        var x = document.getElementById("id_approver");
        if ({{:have_approver}}){
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
        var size = document.getElementsByName("user_info-verification")[0].length;
        if (size <= 1) {
          x = document.getElementById("id_verification");
          x.style.display = "none";
        }
        size = document.getElementsByName("user_info-account_delivery")[0].length;
        if (size <= 1) {
          x = document.getElementById("id_account_delivery");
          x.style.display = "none";
        }
    }
    window.onload = set_approver_visibility;
  document.getElementById("id_username").focus();
  if ("{{:password_creation_option}}" == "1") {
    document.getElementById("id_password1").parentNode.remove();
    document.getElementById("id_password2").parentNode.remove();
  };
  if ("{{:use_mobile_username}}" == "True"){
      const mobileNumRow = document.getElementById("id_mobile_number_row");
      mobileNumRow.querySelector("label[for=id_mobile_number]").innerText = "Mobile number as username:";
      const userName = document.getElementById("id_username").parentNode;
      userName.parentNode.insertBefore(mobileNumRow, userName);
      userName.remove();
    };
  $(".toggle-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password") {
      input.attr("type", "text");
    } else {
      input.attr("type", "password");
    }
  });
</script>
<link type="text/css" rel="stylesheet" href="/site_media/css/intlTelInput.css" />
<script type="text/javascript" src="/site_media/js/intlTelInput.js"></script>
<script>
  var STATIC_URL = "/site_media/"
  var IP_INFO_URL = "/ip_info/"
</script>
<script type="text/javascript" src="/site_media/js/intlTelInputInit.js"></script>
</html>

NSE4 | NSE5 | NSE7 | FCP | FCSS

alexlopes · ‎02-11-2023

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>REGISTRO</title>
<link rel="stylesheet" type="text/css" href="/site_media/css/font-awesome/css/font-awesome.css?v=1043"/>
<script type="text/javascript" src="/site_media/js/jquery/jquery.js?v=1043"></script>
<style type="text/css">
html,body {
color: black;
font-size: 12px;
font-family: arial,helvetica,sans-serif;
margin:0;
padding:0;
}
form {
margin: 0;
padding: 0;
}
form label {
color: #333333;
display: block;
font-size: 12px;
font-weight: normal;
width: 15em;
float: left;
padding: 3px 10px 0 0;
}
fieldset {
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
margin: auto;
margin-bottom: 5px;
}
label.required {
color: #333333;
font-weight: bold;
}
span.error {
color: red;
display: inline-block;
font-size: 11px;
margin: 0 5px;
vertical-align: middle;
width: 200px;
word-wrap: break-word;
}
ul.messagelist {
margin: 0;
padding: 0;
margin-top: 2px;
}
ul.messagelist li {
color: #666666;
display: block;
list-style-type: none;
margin: 0;
padding: 4px 0;
}
ul.messagelist li.info, ul.messagelist li.success{
color: #007722;
}
ul.messagelist li.error {
color: red;
}
ul.messagelist li.warning {
color: #FF8700;
}
.errornote {
color: red;
display: block;
padding: 4px 5px 4px 0;
}
.form-row {
overflow: hidden;
padding: 4px 12px;
}
.form-row img, .form-row input {
vertical-align: middle;
}
.submit-row {
background-color: #EEEEEE;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
border: 1px solid #CCCCCC;
margin: 5px 0;
overflow: hidden;
padding: 5px 7px;
text-align: center;
}
#container {
min-width: 800px;
padding: 0;
position: relative;
width: 100%;
}
#form-content {
margin: auto;
width: 700px;
}
.field-icon {
margin-left: -25px;
position: relative;
z-index: 2;
}
input[type="text"], input[type="password"], select {
width: 220px;
}
</style>
</head>
<body>
<div id="container">
<div id="form-content">
<ul class="messagelist">{{:msgs}}</ul>
<span class="errornote">{{:form_errors}}</span>
<p>PREENCHA OS CAMPOS ABAIXO.</p>
<form action="" method="post">{{:csrf_token}}
{{:wiz_fields}}
<fieldset>
<div class="form-row" id="id_approver" >
<label for="id_approver">Sponsor:</label>
<select name="{{:approver}}">
{{:approver_options}}
</select>
<span class="error">{{:approver_errors}}</span>
</div>
<div class="form-row">
<label for="id_username" class="required">Username:</label>
<input id="id_username" maxlength="253" name="{{:username}}" type="text" value="{{:username_val}}">
<span class="error">{{:username_errors}}</span>
</div>
<div class="form-row">
<label for="id_password1" class="required">Password:</label>
<input id="id_password1" name="{{:password1}}" type="password">
<span toggle="#id_password1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span class="error">{{:password1_errors}}</span>
</div>
<div class="form-row">
<label for="id_password2" class="required">Confirm password:</label>
<input id="id_password2" name="{{:password2}}" type="password">
<span toggle="#id_password2" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span class="error">{{:password2_errors}}</span>
</div>
<div class="form-row">
<label for="id_first_name" class="required">First name:</label>
<input id="id_first_name" name="{{:first_name}}" type="text" value="{{:first_name_val}}">
<span class="error">{{:first_name_errors}}</span>
</div>
<div class="form-row">
<label for="id_last_name" class="required inline">Last name:</label>
<input id="id_last_name" name="{{:last_name}}" type="text" value="{{:last_name_val}}">
<span class="error">{{:last_name_errors}}</span>
</div>
<div class="form-row">
<label for="id_email1" class="required">Email address:</label>
<input id="id_email1" name="{{:email1}}" type="text" value="{{:email1_val}}">
<span class="error">{{:email1_errors}}</span>
</div>
<div class="form-row">
<label for="id_email2" class="required inline">Confirm email address:</label>
<input autocomplete="off" id="id_email2" name="{{:email2}}" type="text" value="{{:email2_val}}">
<span class="error">{{:email2_errors}}</span>
</div>
<div class="form-row">
<label for="id_custom_field1" class="required inline">CPF:</label>
<input autocomplete="off" id="id_custom_field1" name="{{:custom_field1}}" type="text" value="{{:custom_field1_val}}">
<span class="error">{{:custom_field1_errors}}</span>
</div>
<div class="form-row">
<label for="id_phone_number">Phone number:</label>
<input id="id_phone_number" maxlength="64" name="{{:phone_number}}" type="text" value="{{:phone_number_val}}">
<span class="error">{{:phone_number_errors}}</span>
</div>
<div class="form-row" id="id_mobile_number_row">
<label for="id_mobile_number">Mobile number:</label>
<input class="intl-phone-input"
id="id_intl_phone_{{:mobile_number}}"
name="intl_phone_{{:mobile_number}}"
data-field-id="id_mobile_number"
data-field-name="{{:mobile_number}}"
type="tel"
value="{{:mobile_number_val}}"
/>
<span class="error">{{:mobile_number_errors}}</span>
</div>
<div class="form-row" id="id_verification" >
<label for="id_verification">Verification:</label>
<select name="{{:verification}}">
{{:verification_options}}
</select>
<span class="error">{{:verification_errors}}</span>
</div>
<div class="form-row" id="id_account_delivery" >
<label for="id_account_delivery">Registration Method:</label>
<select name="{{:account_delivery}}">
{{:delivery_options}}
</select>
<span class="error">{{:account_delivery_errors}}</span>
</div>
</fieldset>
<div class="submit-row">
<input type="submit" value="Submit">
<input type="button" value="Cancel" onclick="window.location.href='{{:login_url}}';">
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript" src="{{:jquery_url}}"></script>
<script>
function set_approver_visibility()
{
var x = document.getElementById("id_approver");
if ({{:have_approver}}){
x.style.display = "block";
} else {
x.style.display = "none";
}
var size = document.getElementsByName("user_info-verification")[0].length;
if (size <= 1) {
x = document.getElementById("id_verification");
x.style.display = "none";
}
size = document.getElementsByName("user_info-account_delivery")[0].length;
if (size <= 1) {
x = document.getElementById("id_account_delivery");
x.style.display = "none";
}
}
window.onload = set_approver_visibility;
document.getElementById("id_username").focus();
if ("{{:password_creation_option}}" == "1") {
document.getElementById("id_password1").parentNode.remove();
document.getElementById("id_password2").parentNode.remove();
};
if ("{{:use_mobile_username}}" == "True"){
const mobileNumRow = document.getElementById("id_mobile_number_row");
mobileNumRow.querySelector("label[for=id_mobile_number]").innerText = "Mobile number as username:";
const userName = document.getElementById("id_username").parentNode;
userName.parentNode.insertBefore(mobileNumRow, userName);
userName.remove();
};
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
</script>
<link type="text/css" rel="stylesheet" href="/site_media/css/intlTelInput.css" />
<script type="text/javascript" src="/site_media/js/intlTelInput.js"></script>
<script>
var STATIC_URL = "/site_media/"
var IP_INFO_URL = "/ip_info/"
</script>
<script type="text/javascript" src="/site_media/js/intlTelInputInit.js"></script>
</html>

NSE4 | NSE5 | NSE7 | FCP | FCSS

pminarik · ‎02-13-2023

I suspect you have the variables mis-labeled.

I've tried to set this up myself, on FAC 6.4.6, and here's the added HTML code snippet that works for me:

<div class="form-row">
    <label for="id_custom1" class="required inline">Custom1 variable name: {{:custom1_label}}:</label>
    <input autocomplete="off" id="id_custom1" name="{{:custom1}}" type="text" value="{{:custom1_val}}">
    <span class="error">{{:custom1_errors}}</span>
</div>

The snippet can be placed between any two <div>s of the other form fields.

And here's what it looks like:

FAC - self-registration portal with custom field

[ corrections always welcome ]

FortiAuthenticator not displaying custom fields

Nominate a Forum Post for Knowledge Article Creation