cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
5039
Views
15
Helpful
4
Replies

Cisco ISE Guest Portal Human Verification

Kevin Raditheo
Beginner
Beginner

Hi All,

I have deployment in one of my client with Cisco ISE Self Register Portal with sponsor approval.

Therefore the guest are expected to register them-self prior login.

Then after that sponsor must approved the guest account before the guest can use it.

My question is, is there any method to prevent some guest to using a bot to create an account.

Imagine that a bot can create 100 account per minute and there will be a spam email in sponsor account because of approval notification.

Anyone have a case like this? Maybe integrate ISE portal with captcha with custom portal or any other method?

Thanks for your advises and insights.

Regards,

Kevin

1 Accepted Solution

Accepted Solutions

Charlie Moreton
Cisco Employee
Cisco Employee

Yes, you can accomplish this with the steps below:

*I found these instructions long ago written for ISE 1.3.  There was no author attached to them and I have updated the instructions for 2.1*

Navigate to Work Centers > Guest Access > Configure > Guest Portals.  Select the Self-Registered Guest Portal and click the Duplicate button.

Captcha1.PNG

Give the new Portal a name and updated description.

Captcha2.PNG

Click on the Portal Page Customization panel and verify that you are customizing the Login page.

Captcha3.PNG

Scroll to the Optional Content 2 text box and click the HTML Toggle button (highlighted below):

Captcha4.PNG

Paste the contents of the captcha_login.txt file into the text box and click the HTML Toggle button again.

<style>

.captcha_text {

margin-top:5px;

float: left;

width: 82px;

  height: 37px;

  font: bold 16px/37px Arial, sans;

  text-align: center;

  background-color: #ededed;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.captcha_input

{

float: left;

width: 250px;

margin-left:45px;

}

</style><script>

var submitButton = jQuery('#ui_login_signon_button');

var submitButtonUiContainer = submitButton.parent();

submitButtonUiContainer.css('opacity', 0.25);

submitButton.addClass('disabled');

var captchaBlock = jQuery('<div class="captcha_container"></div>');

captchaBlock.html('<div class="captcha_text"></div> <div class="captcha_input"><input placeholder="Enter code" type="text" /></div>');

jQuery('form[name="loginForm"]').find('.cisco-ise-form-buttons').before(captchaBlock);

var login_captcha='';

    function login_randomgen() {

        for (ranNum = 1; ranNum <= 6; ranNum++) {

            login_captcha += Math.floor(Math.random() * 10).toString();

        }

        jQuery('.captcha_text').html(login_captcha);

    }

    login_randomgen();

jQuery('.captcha_input').find('input').on('input', function(evt){

if(jQuery(this).val() == login_captcha)

{

submitButton.removeClass('disabled');

submitButtonUiContainer.css('opacity', 1);

}

else

{

submitButton.addClass('disabled');

submitButtonUiContainer.css('opacity', 0.25);

}

});

submitButton.on('click', function(evt){

evt.preventDefault();

if(jQuery(this).hasClass('disabled')) return;

jQuery('form[name="loginForm"]').submit();

});

</script>

Captcha5.PNG

Scroll up and select the Self-Registration page

Captcha6.PNG

Scroll down to the Optional Content 2 text box and click the HTML Toggle button (highlighted below):

Captcha4.PNG

Paste the contents of the captcha_selfReg.txt file into the text box and click the HTML Toggle button again.

<style>

.captcha_text {

margin-top:5px;

float: left;

width: 82px;

  height: 37px;

  font: bold 16px/37px Arial, sans;

  text-align: center;

  background-color: #ededed;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.captcha_input

{

float: left;

width: 250px;

margin-left:45px;

}

.disabled .ui-submit

{

opacity: 0.25;

}

</style><script>

var submitButton = jQuery('#ui_self_reg_submit_button');

var submitButtonUiContainer = submitButton.parent();

submitButtonUiContainer.addClass('disabled');

console.log(submitButtonUiContainer);

submitButton.addClass('disabled');

var captchaBlock = jQuery('<div class="captcha_container"></div>');

captchaBlock.html('<div class="captcha_text"></div> <div class="captcha_input"><input placeholder="Enter code" type="text" /></div>');

jQuery('form[name="selfRegForm"]').find('.cisco-ise-form-buttons').before(captchaBlock);

var login_captcha='';

    function login_randomgen() {

        for (ranNum = 1; ranNum <= 6; ranNum++) {

            login_captcha += Math.floor(Math.random() * 10).toString();

        }

        jQuery('.captcha_text').html(login_captcha);

    }

    login_randomgen();

jQuery('.captcha_input').find('input').on('input', function(evt){

if(jQuery(this).val() == login_captcha)

{

submitButton.removeClass('disabled');

submitButtonUiContainer.removeClass('disabled');

}

else

{

submitButton.addClass('disabled');

submitButtonUiContainer.addClass('disabled');

}

});

submitButton.on('click', function(evt){

evt.preventDefault();

if(jQuery(this).hasClass('disabled')) return;

jQuery('form[name="selfRegForm"]').submit();

});

</script>

Captcha5.PNG

The most important step is to scroll all the way back up and click Save

Captcha9.PNG

Once this is done, you can test the new Self-Registration Guest Portal with Captcha Verification.

This is the initial login screen.

Captcha7.PNG

If the user clicks the 'Don't have an account?' link, they will get this page, also with a Captcha

Captcha8.PNG

I hope this helps.  Please leave feedback so that we know.

**Edited to replace all '$' in javascript with 'jQuery'

View solution in original post

4 Replies 4

Charlie Moreton
Cisco Employee
Cisco Employee

Yes, you can accomplish this with the steps below:

*I found these instructions long ago written for ISE 1.3.  There was no author attached to them and I have updated the instructions for 2.1*

Navigate to Work Centers > Guest Access > Configure > Guest Portals.  Select the Self-Registered Guest Portal and click the Duplicate button.

Captcha1.PNG

Give the new Portal a name and updated description.

Captcha2.PNG

Click on the Portal Page Customization panel and verify that you are customizing the Login page.

Captcha3.PNG

Scroll to the Optional Content 2 text box and click the HTML Toggle button (highlighted below):

Captcha4.PNG

Paste the contents of the captcha_login.txt file into the text box and click the HTML Toggle button again.

<style>

.captcha_text {

margin-top:5px;

float: left;

width: 82px;

  height: 37px;

  font: bold 16px/37px Arial, sans;

  text-align: center;

  background-color: #ededed;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.captcha_input

{

float: left;

width: 250px;

margin-left:45px;

}

</style><script>

var submitButton = jQuery('#ui_login_signon_button');

var submitButtonUiContainer = submitButton.parent();

submitButtonUiContainer.css('opacity', 0.25);

submitButton.addClass('disabled');

var captchaBlock = jQuery('<div class="captcha_container"></div>');

captchaBlock.html('<div class="captcha_text"></div> <div class="captcha_input"><input placeholder="Enter code" type="text" /></div>');

jQuery('form[name="loginForm"]').find('.cisco-ise-form-buttons').before(captchaBlock);

var login_captcha='';

    function login_randomgen() {

        for (ranNum = 1; ranNum <= 6; ranNum++) {

            login_captcha += Math.floor(Math.random() * 10).toString();

        }

        jQuery('.captcha_text').html(login_captcha);

    }

    login_randomgen();

jQuery('.captcha_input').find('input').on('input', function(evt){

if(jQuery(this).val() == login_captcha)

{

submitButton.removeClass('disabled');

submitButtonUiContainer.css('opacity', 1);

}

else

{

submitButton.addClass('disabled');

submitButtonUiContainer.css('opacity', 0.25);

}

});

submitButton.on('click', function(evt){

evt.preventDefault();

if(jQuery(this).hasClass('disabled')) return;

jQuery('form[name="loginForm"]').submit();

});

</script>

Captcha5.PNG

Scroll up and select the Self-Registration page

Captcha6.PNG

Scroll down to the Optional Content 2 text box and click the HTML Toggle button (highlighted below):

Captcha4.PNG

Paste the contents of the captcha_selfReg.txt file into the text box and click the HTML Toggle button again.

<style>

.captcha_text {

margin-top:5px;

float: left;

width: 82px;

  height: 37px;

  font: bold 16px/37px Arial, sans;

  text-align: center;

  background-color: #ededed;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.captcha_input

{

float: left;

width: 250px;

margin-left:45px;

}

.disabled .ui-submit

{

opacity: 0.25;

}

</style><script>

var submitButton = jQuery('#ui_self_reg_submit_button');

var submitButtonUiContainer = submitButton.parent();

submitButtonUiContainer.addClass('disabled');

console.log(submitButtonUiContainer);

submitButton.addClass('disabled');

var captchaBlock = jQuery('<div class="captcha_container"></div>');

captchaBlock.html('<div class="captcha_text"></div> <div class="captcha_input"><input placeholder="Enter code" type="text" /></div>');

jQuery('form[name="selfRegForm"]').find('.cisco-ise-form-buttons').before(captchaBlock);

var login_captcha='';

    function login_randomgen() {

        for (ranNum = 1; ranNum <= 6; ranNum++) {

            login_captcha += Math.floor(Math.random() * 10).toString();

        }

        jQuery('.captcha_text').html(login_captcha);

    }

    login_randomgen();

jQuery('.captcha_input').find('input').on('input', function(evt){

if(jQuery(this).val() == login_captcha)

{

submitButton.removeClass('disabled');

submitButtonUiContainer.removeClass('disabled');

}

else

{

submitButton.addClass('disabled');

submitButtonUiContainer.addClass('disabled');

}

});

submitButton.on('click', function(evt){

evt.preventDefault();

if(jQuery(this).hasClass('disabled')) return;

jQuery('form[name="selfRegForm"]').submit();

});

</script>

Captcha5.PNG

The most important step is to scroll all the way back up and click Save

Captcha9.PNG

Once this is done, you can test the new Self-Registration Guest Portal with Captcha Verification.

This is the initial login screen.

Captcha7.PNG

If the user clicks the 'Don't have an account?' link, they will get this page, also with a Captcha

Captcha8.PNG

I hope this helps.  Please leave feedback so that we know.

**Edited to replace all '$' in javascript with 'jQuery'

Hi Charles,

I've tried this method, and it works great.

Thank you very much for your help.

Hopefully in the next Cisco ISE release this can be done with an option in ISE so no need to copy paste the script

Have a nice day..

If you don't mind send me company name to jakunst@cisco.com<mailto:jakunst@cisco.com> and will add to request list

I don't think will be in next release

Hi Charlie Moreton,

The Captcha code mentioned above is working like charm on a Windows machine. However, when we tried to access the guest portal on MAC and Android devices the Captcha code does not show there in the browser. Is there something we need to modify to work this captcha on Android and MAC OS?

Getting Started

Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community:

Recognize Your Peers