cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Announcements

This community is for technical, feature, configuration and deployment questions.
For production deployment issues, please contact the TAC! We will not comment or assist with your TAC case in these forums.
Please see How to Ask the Community for Help for other best practices.

3109
Views
0
Helpful
10
Replies
Federico Ziliotto
Cisco Employee

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

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

1 ACCEPTED SOLUTION

Accepted Solutions

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>

View solution in original post

10 REPLIES 10
Jason Kunst
Cisco Employee

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 ?

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

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?

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.

Ok will get back to you

Great, thanks Jason!

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.

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

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>

Fantastic, thank you so much again Serhii!

This should definitely be what they are looking for.

Create
Recognize Your Peers
Content for Community-Ad

ISE Webinars


Miss a previous ISE webinar?
Never miss one again!

CiscoISE on YouTube