cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Announcements
Choose one of the topics below to view our ISE Resources to help you on your journey with ISE

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.

588
Views
0
Helpful
10
Replies
Highlighted
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

Everyone's tags (5)
1 ACCEPTED SOLUTION

Accepted Solutions
Cisco Employee

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

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>

10 REPLIES 10
Cisco Employee

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

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 ?
Cisco Employee

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

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

Cisco Employee

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

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?
Cisco Employee

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

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.

Cisco Employee

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

Ok will get back to you
Cisco Employee

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

Great, thanks Jason!

Cisco Employee

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

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.

Cisco Employee

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

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

Cisco Employee

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

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>

Cisco Employee

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

Fantastic, thank you so much again Serhii!

This should definitely be what they are looking for.