Quick and easy way to find CSS values for template SWA applications Skip to main content
https://support.okta.com/help/blogdetail?id=a67f0000000blngiay&refurl=http%3a%2f%2fsupport.okta.com%2fhelp%2fblogdetail
How satisfied are you with the Okta Help Center?
Thank you for your feedback!
How satisfied are you with the Okta Help Center?
1
2
3
4
5
Very Dissatisfied
Very satisfied
Enter content less than 200 characters.

Quick and easy way to find CSS values for template SWA applications

Oct 12, 2015 | by Thomas Hill in Security

Original Author:  Lee Tschetter, Sales Engineer, Okta

Forms based web applications are very numerous and have a very wide array of shapes and styles. Our Okta browser plugin is capable of automatically finding the username, password, and login buttons on between 80% and 90% of all websites. However, what about those sites where it cannot find the fields? What about websites that require three fields to login instead of two? These are common questions here at Okta so I put together some quick instructions on how to set up an Okta template application.

If you go in to the Okta Application Network and search for "Template" you will see several options:

User-added image

 

The two we are going to cover in this post are "Template Plugin App" and "Template Plugin App 3 Fields".

 

The "Template Plugin App" looks like this:

User-added image

 

I think it is safe to assume that most of us do not know what a "CSS selector" is, so we are going to use the Google Chrome browser to help us find these values. These instructions only work in Chrome because it has some advanced developer tools built right in to the browser that make it very powerful. This process can be done in other browsers, but it is easier and quicker in Chrome.

 

Step 1: Open the page in Chrome. This is important, you need to be using Chrome for the next steps to work. I am going to use my own Okta page for these instructions.

 

 

Step 2: Left click on the field you want to identify so it is highlighted in the browser, then right click on the field to bring up the Chrome menu. Left click on "inspect element":

User-added image

 

After clicking "inspect element" a new window will open in the bottom half of Chrome:

User-added image

 

Step 3: In the bottom half of Chrome a section of HTML code will automatically be highlighted. This is the relevant code for the field or button you have currently selected. Right click on the automatically highlighted section and then left click on "copy CSS path".

User-added image

The CSS selector value for the login box is now on your clipboard.

 

Step 4: Go back to the Okta Template Plugin Application and paste this value in to the "Username field" box:

User-added image

 

Step 5: Repeat steps 2-4 for both the password field and the login button on the target website:

User-added image

 

Once all of the fields are populated, you're done! You have created a new template application inside of Okta that is ready for testing. Assign the application to yourself, go to your Okta dashboard, and test it out! It will most likely work, but, if it doesn't, then there are more steps we can take. This will be covered in another post.

 

And, finally, the "Template Plugin App 3 Fields" is very similar. The process for finding and inserting the values does not change between the templates.

 

The "Template Plugin App 3 Fields" looks like this:

User-added image

As you can tell, it is nearly identical to the "Template Plugin App", except there are two new fields: "Extra Field Selector" and "Extra Field Value".

 

To find the value for "Extra Field Selector" you simply follow steps 2-4 above. It doesn't really matter what this field is for, just make sure you click on whichever field is not the username or password value. The most common use for three field login forms is when a company name or a server name is required.

 

The "Extra Field Value" box is where you input the static value that your users need to supply at the login screen for this application. It could be company name or some other unique ID. Just type in the correct value, no special formatting needed!

Comments

  • Therese Edney on September 29, 2017

    Needs to be updated