ISE Guest Web Auth Portal with Get Quick Access (Hotspot) button for different User Groups

[Federico Ziliotto]

Hello everyone,

I would like to customize a guest sponsored portal with a "quick access" (e.g., hotspot) button, but by also providing the option (most likely through a drop-down menu) to select between different types of quick accesses.

I already found the following javascript example, which allows to add a quick access / hotspot button to a standard sponsored portal:

https://community.cisco.com/t5/security-documents/ise-guest-web-auth-portal-with-get-quick-access-hotspot-button/ta-p/3636652

On top of just the quick access button, I'd also like to give the option to select between different types of quick accesses, maybe through a drop-down menu.

The goal here would be to allow some internal VPN users to get quick access to their VPN gateways only, through the guest SSID. Unfortunately we cannot go for just one single VPN quick access button, because the ACL being applied behind on the WLC is limited to 64 ACEs, and there are more than 64 VPN gateways to permit (URL filtering on the WLC's ACL is not an option either, as those VPN gateways are not well organised with common FQDNs).

Thank you in advance,

Federico

[Jason Kunst]

Not sure exactly what the guest portal has to do with vpn but to simplify things you’re just looking for a pull down with links to multiple guest portals ?

[Federico Ziliotto]

Thanks for your reply Jason,

On a sponsored portal, I would like to add a Hotspot / Quick Access button allowing me to choose between different User Groups.

This button should basically post a default (hidden) username/password from a specific User Group, depending on the User Group we choose from a drop-down menu next to it.

Regards,

Federico

[Jason Kunst]

Ok you need a pull down that maps to different username and passwords

Default would likely please choose an option correct? And it’s mandatory they select one or can they leave that pull down unselected and do something else on the page or would this be the only Option?

[Federico Ziliotto]

Correct, a a pull down that maps to different username and passwords, but without showing the username and password, just a tag/group/company name.

This pull down option should be below the standard login/password fields for sponsored guests, and the default would be something like "please choose an option", correct.

It shouldn't be mandatory to select an option in the pull down menu, as they could chose to log in through a standard sponsored login/password too.

[Jason Kunst]

Ok will get back to you

[Federico Ziliotto]

Great, thanks Jason!

[Serhii Pustovit]

Could you please try something like this:

Bold strings - "office 1" (This is what you can see in dropdown menu) and "credentials ("user1", "Test123") of created users, you can change whatever you want. Users should be created beforehand. 

Also you could add more objects with offices... Just copy previous, separate by coma and change values. 

<script>
$(document).ready(function(){
var creds = [{"Please choose an option":{
'username': '',
'password': ''}
},
{"office 1":{
'username':'user1',
'password': 'Test123'}
},
{"office 2":{
'username': 'user2',
'password': 'Test123'}
}];

var mySelect = $("<div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span'"
+" data-icon='arrow-d' data-iconpos='right' data-theme='a' class='ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right"
+" ui-btn-up-a' id='outerDiv'><span class='ui-btn-inner'><span class='ui-btn-text'><span id='displayName'></span></span>"
+"<span class='ui-icon ui-icon-arrow-d ui-icon-shadow'></span></span><select name='select' id='select' class='ui-body-a'></select></div></div>");

var password = $('[name="user.password"]');
var username = $('[name="user.username"]');
password.parent().after(mySelect);

for (i=0; i<creds.length; i++) {
$('#select').append($('<option></option>').val(Object.keys(creds[i])).html(Object.keys(creds[i])));
}

$('#select > option:first-child').attr('selected', 'selected');

$('#select').on('change', function(evt){
var credentials = {};
for (i=0; i<creds.length; i++) {
if(creds[i][$(this).val()] != null) {
credentials = creds[i][$(this).val()];
}
}

username.val(credentials.username); // username
password.val(credentials.password); // password
$('#displayName').html($(this).find('option:selected').text());
});

$('#select').trigger('change');
})

</script>

Let me know how it works.

[Federico Ziliotto]

Thank you for the script Serhii!

I tested it in my lab and it works very closely to what the end customer would like to see.

When choosing the option between "office 1", "office 2", etc., we can see that the username and password are posted in the corresponding fields of the login page, and then we need to click on the Sign On button to submit those credentials.

Is it possible for the script to directly submit credentials when we choose "office 1", "office 2", etc. from the drop down menu, without showing them posted on the login/password fields?

Regards,

Federico

[Serhii Pustovit · Accepted solution]

Yes, here is modified full script:

<script>
$(document).ready(function(){
var creds = [{"Please choose an option":{
'username': '',
'password': ''}
},
{"office 1":{
'username':'user1',
'password': 'Test123'}
},
{"office 2":{
'username': 'user2',
'password': 'Test123'}
}];


var mySelect = $("<div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span'"
+" data-icon='arrow-d' data-iconpos='right' data-theme='a' class='ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right"
+" ui-btn-up-a' id='outerDiv'><span class='ui-btn-inner'><span class='ui-btn-text'><span id='displayName'></span></span>"
+"<span class='ui-icon ui-icon-arrow-d ui-icon-shadow'></span></span><select name='select' id='select' class='ui-body-a'></select></div></div>");

var password = $('[name="user.password"]');
var username = $('[name="user.username"]');
password.parent().after(mySelect);

for (i=0; i<creds.length; i++) {
$('#select').append($('<option></option>').val(Object.keys(creds[i])).html(Object.keys(creds[i])));
}

$('#select > option:first-child').attr('selected', 'selected');

$('#select').on('change', function(evt){
var credentials = {};
for (i=0; i<creds.length; i++) {
if(creds[i][$(this).val()] != null) {
credentials = creds[i][$(this).val()];
}
}

username.val(credentials.username); // username
password.val(credentials.password); // password

if (username.val() != "" && password.val() != "") {
$('.ui-controlgroup-controls').hide();
$('#ui_login_signon_button').click();
};

$('#displayName').html($(this).find('option:selected').text());

});

$('#select').trigger('change');
});

</script>

[Federico Ziliotto]

Fantastic, thank you so much again Serhii!

This should definitely be what they are looking for.