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:
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:
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 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":
After clicking "inspect element" a new window will open in the bottom half of Chrome:
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".
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:
Step 5: Repeat steps 2-4 for both the password field and the login button on the target website:
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:
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!