ISE Guest Login page pre-fill and hide password field (single credential)

[Jason Kunst]

This is an idea we had for a customer to allow them to create a single passcode type of login to the ISE guest portal. They are using this for vendors at an electronics store to connect TVs to the wireless network. They want a simple way for them to enter the guest credentials via a remote control. This would ideally be a single passcode. The vendor using the sponsor portal would create a credential that can be used for 1 device (or make it higher). Then the device would connect to wireless Open SSID, be redirected to the guest portal and enter the single passcode.

As ISE requires a username and password to be created we are going to set the password to a specific value by restricting what values ISE can use as the password and the username will be restricted to 6 numbers (making easy to enter but still unique). On the login page, the username will be renamed passcode to make it more understandable. In this example we will allow the sponsor to create 1 credential per device so they can easily be tracked to the vendor.

Steps for flow:

• Vendor accesses Sponsor Portal and creates an account (no need to enter email address or first last name as the username is randomly generated to produce 6 number username
  • they can also enter some identifiable info if required, like LG TV1 (label on the physical device perhaps)
• Vendor receives code (username), password is not used (can be hidden in notification)
• Vendor goes to TV and launches wireless and opens browser to redirect to ISE
• Device login via remote control with just 6 digit code

Configuration:

• Enable ISE to allow HTML and Javascript for web portal customization, also learn how to work with javascript see ISE Web Portal Customization Guide
• Setup your username policy under Guest Access > Settings > Username Policy

1. min user length is 6
2. Enter 6 under numeric
3. choose 0 for special and alphabetic
4. SAVE

• Setup your password policy to only allow character 1

1. set minimum lowercase, uppercase to 0
2. minimum numeric of 1
3. Special of 0
4. SAVE

• Create a guest portal (sponsored or self-reg)
• On the login page configure the following:
  • Change username to passcode label
  • Hide the password and set it to 1 using the following javascript under Optional Content 2 (see image below)
    • toggle html, insert javascript, toggle out
  • SAVE THE PORTAL

<script>
$(document).one('pageshow', function() {
   if
(!(/selfregistrationcancel|selfregistrationsuccess|SELF_REGISTRATION/i).test(document.location.href)) {
     jQuery('#ui_login_self_reg_button').click();
   }
});
portalloginForm.elements["user.password"].value = '0';
portalloginForm.elements["user.password"].style.visibility = 'hidden';
portalloginForm.elements["user.password"].type = 'hidden';

</script>

• Setup your notifications to only send the username

[Jaaazman777]

Hello, Jason!

Thank you very much for the article! it's really great and helpful.

Do you now, is it possible to insert variable into the .value state?

For example if we want to automatically insert username, which user manually entered at self registration page, on Login page Username field.

I guess script will be like.

<script>

portalloginForm.elements["user.username"].value = 'guestUser.fieldValues.ui_user_name';

</script>

but it doesn't work. Maybe it is syntax problem...

Thank you in advance!

[Jaaazman777]

The main aim it to authorize guest user by SMS and use his phonenumber as a USERNAME in ISE system.

The final flow is the following:

• guest user connects to SSID and after opening the browser is redirected to GuestPortal SelfRegistration page;
• on SelfReg page user is asked to
  • put in his phonenumber in Username field (Username field is renamed to "Phonenumber");
  • "retype" phonenumber in PhoneNumber field;
• after that user clicks Registration button and is redirected to Login page, where he is asked to put in only password (password was generated by ISE and sent to user by SMS).

We don't want the user to put in his username on Login page, that's why we want to hide Username on Login page and make the system to place Username from Selfreg page to Username field on Login page automatically.

I think that it is possible to do it with portalloginForm.elements["user.username"].value = , but I am not sure which variable to put in. This variable must indicate the information from SelfReg page Username field.

[Jason Kunst]

Check this out to get you started

ISE Guest Self-Registration phone number as the username

[jpujol]

Hi, 

Using this solution successfully for a couple of customers, however, it seems that the code is confusing Chrome/Android devices when the wrong credentials are provided ;

Chrome loops forever on the link : /portal/CreateAccount.action?from=SELF_REGISTRATION and the chrome debug console displays 4 "[DOM] Found 2 elements with non-unique id" errors for the following IDs : 

- #portalloginForm (fieldset id=login_username_password)

- #ui_login_signon_button

- #user.password

- #user.username

I don't understand why setting :

portalloginForm.elements["user.password"].value = '0';
portalloginForm.elements["user.password"].style.visibility = 'hidden';
portalloginForm.elements["user.password"].type = 'hidden';

in the additional javascript code in the login page does generate all these errors, and only with Chrome ...

Any idea that could help me here ? (any proposition to test something or to change slightly the code  would be welcome)

Thanks a lot in advance, 

Jean-Francois

[Serhii Pustovit]

I think it should help, if you replace :

portalloginForm.elements["user.password"].value = '0';
portalloginForm.elements["user.password"].style.visibility = 'hidden';
portalloginForm.elements["user.password"].type = 'hidden';

To this:

$('[name="user.password"]').val('0');

$('[name="user.password"]').css('visibility', 'hidden');

$('[name="user.password"]').attr('type', 'hidden');

[jpujol]

Hi Serhii, 

I made the change and it's working properly now ! 

Maybe the latest request : you you know a way to put a small timer on the error message (when the entered credentials are wrong) ? The page reloads so quickly that the message is almost not visible ....

Thanks - a lot - for the help, 

Jean-Francois

[Serhii Pustovit]

You could try to replace:

jQuery('#ui_login_self_reg_button').click();

to:
setTimeout(function(){

  jQuery('#ui_login_self_reg_button').click();

}, 1000);

1000 = 1 second (you could increase/decrease)