Tips and Tricks for Creating and Troubleshooting Custom Web Applications

Tips and Tricks for Creating and Troubleshooting Custom Web Applications

By Centrify on ‎06-15-2017 08:15 AM

Creating commonly used applications for yourself of other users is a pretty straight forward task until it isn't.  Let's jump into the process that I use for creating and troubleshooting custom applications.


First things first, by far the easist place to start is by using the Centrify Browser Extension in Firefox.

 Screen Shot 2017-06-14 at 2.59.44 PM.png


If you don't have this installed, sign into your Centrify Portal and click on your name in the upper right corner.  Click 'Switch to Admin Portal' in the drop down.  Then click your name again, and this time select 'Downloads'.  Download and install the Centrify Browser Extension for Firefox.



Screen Shot 2017-06-15 at 8.50.10 AM.png



Open Firefox and click the Centrify icon in the upper-right corner of your browser.  Select Sign-In and enter the credentials for an Admin user (Optional only if you're not sharing the app with other users or customizing it).

 Screen Shot 2017-06-14 at 3.00.23 PM.png


Now that you've signed in, go ahead and navigate to a website that you want to create an App for.  In my case, I've chosen the Centrify Community.  ( Go to the sign-in page and click on the Centrify Browser Extension icon and select Capture.


Run through the Wizard that pops up.  The last step is to select Add application to Cloud Manager.


Screen Shot 2017-06-14 at 3.14.53 PM.png



Now, let's go take a look at our new App.  Sign into your Centrify Portal as an Admin.


Click on Apps and select the App you just created.


Screen Shot 2017-06-14 at 3.18.12 PM.png



Let's do a quick test configuration:

In User Access:  Check Everyone - You can change this later or use a Test Role

In Account Mapping: Click Prompt user for their user name - You can change this later, if desired

Click Save


At this point, I'd recommend opening a Private Browser (Firefox) or an Incognito Window (Chrome).  Sign into your Centrify Portal and click your name and select 'Switch to User Portal'.

 Screen Shot 2017-06-14 at 3.30.55 PM.png

Click on your newly created App to enter in a username and password.


Screen Shot 2017-06-14 at 3.31.28 PM.png



Click on your App again to launch it.


Most of the time, your journey will end here with a successful login.  But, you likely wouldn't be reading this article if that was the case.  


So, if your new App fails, these are some next steps:


Switch back to your Admin Portal and the Advanced Section of the App you created.


Screen Shot 2017-06-15 at 8.46.36 AM.png



First step is to validate the fields that the Browser Extension found.

Namely:  User Name, Password, and Submit


Switch back to the website's sign-in page.  It's at this phase I like to use a Chrome Add-on call CSS Selector, OR just right click the User Name/Password/Submit field(s) or button and click 'Inspect Element'

 Screen Shot 2017-06-14 at 3.39.25 PM.png



In the Inspector Console, hover over the input line.  Look at the tag on the element.  In my case, it says 'input#email'.

 Screen Shot 2017-06-14 at 3.40.14 PM.png


This is the value we want in the User Name field in the Advanced tab of our App.  Repeat for Password and Submit.  Normally, you can leave the Submit field blank, but if when testing your App, it successfully enters the UserName and Password values, but makes you manually click Submit, then you want to check your Submit value.


Occasionally, a web developer might use an 'input#' value that changes from one session to the next.  In those cases, you can use a different element tag, but be careful that the tag isn't used elsewhere on the page:


A lot of times, the way or speed of the page loading will cause a race condition.  To give yourself some additional time before the Browser Extension tries to inject the UserName and Password, add some time into the Selector Timeout.  10,000 miliseconds is the max.  I like to start there and work my way back down to the 1,000-2,000 range assuming that the additional time fixed the issue.


Screen Shot 2017-06-14 at 4.02.00 PM.png


Last, but not least in my process is manually adding values to the Order field in the Advanced section.  This can get complicated, but also allows you to get very specific on what you want done and when.  You can do things here like add pauses, account for two-step login pages, etc.


This is a sample Order value it's simplest form:  [["fill", "username"], ["fill", "password"], ["submit"]]  This is essentially the default behavior, but you can modify this wildly if needed.


So, there it is.  That should get you through most Application setups.  Good luck in all of your custom App creations!

Showing results for 
Search instead for 
Do you mean 

Community Control Panel