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

How to embed a button for a hotspot and byod flow

172
Views
0
Helpful
0
Comments

Symptoms

Customer wants a single portal that will allow guests to use a simple hotspot and for employees to go through BYOD device registration and on-boarding for native supplicant and certificate provisioning. They don't want guests to be prompted with a credential but they want to have a different flow depending on if guest or employee.

Diagnosis

We will create one portal with 2 buttons. One with static hotspotuser and another byoduser both as an internal user. If you click hotspot button it simply authorizes as guestendpoint. For BYOD goes through another portal per authorization policies.

 

This is an optional method to link to another portal from one portal.

Solution

The use case at this customer was as follows:

It doesn't require OTP server but this showcases it can also be done.

  1. Guest users login using the hotspot portal. For that, they used the Hotspot username. So yes, all the guest MACs will wind up registering to that.
  2. For BYOD, users utilize their AD account+OTP Token
    1. BYOD users first click on this BYOD button which logs in with a static BYOD internal account
    2. AuthZ policy redirects BYOD internal user account to another Guest portal with Allow BYOD onbording enabled.
    3. Authentication on this guest portal is set to OTP server
    4. Users log in to this Guest portal with their OTP token and ISE performs BYOD enrollment because that is a non-Guest account.

Put the following code on the original sponsored guest portal under optional content 2:

This code will hide credentials and provide the 2 buttons

 

<script>
$(function() {
//$('.ui-controlgroup-controls').hide();
$('#ui_login_signon_button').on("click", function(evt){
       evt.preventDefault();
       $('input[name="user.username"]').val("Hotspot");
       $('input[name="user.password"]').val($('input[name="user.passcode"]').val());
       $('form[name="loginForm"]').trigger('submit');
    });
$('.cisco-ise-form-buttons').prepend("<label class='ui-input-text' for='user.passcode'>Passcode:</label><input autocomplete='off' class='ui-body-a ui-input-text' id='user.passcode' name='user.passcode' type='password' value='123456' />");
$('.cisco-ise-form-buttons').append("<p><a href='#' onclick='byod()'>BYOD</a>");
    
setTimeout(hide,1000,true);
});
function hide() {
//$('.ui-controlgroup-controls').hide();
$('#ui_login_signon_button').on("click", function(evt){
       evt.preventDefault();
       $('input[name="user.username"]').val("Hotspot");
       $('input[name="user.password"]').val($('input[name="user.passcode"]').val());
       $('form[name="loginForm"]').trigger('submit');
    });
}

function byod() {
$('#ui_aup_hotspot_text').scrollTop(3000);
       $('input[name="aupAccepted"]').prop("checked","true");
       $('input[name="user.username"]').val("BYOD");
       $('input[name="user.password"]').val("123456");
       setTimeout(function(){$('form[name="loginForm"]').trigger('submit');},1000);
}

</script>Welcome to the Guest Portal. Sign on with the username and password provided to you.

<div class="byod"><button onclick="byod()">BYOD</button></div>