Custom Password App Connectors

Follow

The following is a walkthrough on how to create custom Password Apps Connectors (apps that use form-based authentication) in Clearlogin.

Please note that the Password Manager extension is required for Password apps to function.

In order to create a Password App Connector, a basic knowledge of CSS and how to find CSS Selectors is generally necessary.  CSS Selectors are used to identify where a form is on a page and what each text field is (the HTML form elements), as well as where the submit button is.  This is because the Password Manager Extension is essentially typing your username and password (as well as any other required information such as domain) into the appropriate fields and clicking on the submit button for you.

The purpose of Password Apps Connectors is more for the sake of quality of life improvement than security, since token-based authentication (SSO via SAML or JWT for example) is required to meet proper security practices and achieve federation.  That said, this is a great workaround for when vendors do not support SSO.

In order to begin, first navigate to the App Marketplace on the Admin panel (https://admin.clearlogin.com).

On the navigation bar, click on Apps, this will take you to the Manage App Connections page.

chrome_2018-01-08_10-55-40.png

From the Manage App Connections Page select New App Connection (the button at the very bottom of the page).



On the Add A New App Connection page, click on the Password button at the bottom.



This will take you to the New Password App screen.



Under Display Name, fill out the name of the app that you are adding.

For Icon, usually you want to add a picture of the app's logo by clicking on the Choose File button and then selecting it from within your file system.

App URL is the URL for the homepage of the app itself.

Login URL is the URL of the app's actual login page where the login form resides.

Form Selector refers to the CSS selector to identify the HTML form element. This is typically something resembling "#login_form" or simply "form".

Username Selector is the CSS selector for the username field in the login form. This is usually something along the lines of "#username" or "input[type="text"]".

Password Selector is the CSS selector for the password field in the login form. This is typically something like "#password" or input"[type="password"]".

Submit Selector is the CSS selector that identifies the location of the submit button.  This is can be something like "#submit" or "input[type="submit"]".

Submit Type identifies the type of form 

Custom Fields is mean for adding text fields that don't exist in the default password app template.  For example, some forms may have a "domain" field.  This means that you would just make the Field Name anything that you want in order to help identify what type of field it is (you would probably just want to call it "Domain" if it's a field to input your domain) and then add the CSS selector under Field Selector.


Finding CSS Selectors

Finding CSS selectors can be a bit of a daunting task if you have never had to do it before.  It's recommended that you have someone with pre-existing knowledge of this be the one to find the selectors for you.

Typically the best way to find CSS selectors would be to use Google Chrome's Inspect Tool on the app's login page.

To get started, first navigate to the app's log in page.  We'll use ALEKS in our example.

In this case, the App URL for ALEKS is also the Login URL since the login form is on the homepage.

Right-click on the login form and then select Inspect in order to view the attributes of the form and it's fields.



The best way to identify parts of a form is through Unique ID's.  This will only work if the form has Unique ID's in it though.  Unique ID's are the most ideal way to identify parts of a form, because they are usually the most specific selector possible.

For example, when opening the Inspect Tool by right-clicking specifically on the form itself the Inspect Tool should open up to the line/paragraph) of code that references the form.  If i move my mouse cursor directly over the line/paragraph of code that refers to the form, the form should be highlighted and in some cases the Unique ID will be displayed above it.

chrome_2018-01-15_14-57-46.png

To denote a Unique ID in Clearlogin, you would type it into the Form Selector field as "#login".

The easiest way to identify the other selectors on this form is to then right-click on each field and click on Inspect and find the Unique ID's for each field.





The submit button in this case does not have a Unique ID, so we'll use it's name instead.



This will be entered into the Submit Selector field as "button[name="login"]".

Once you are done, your form should look like the following.



Click on the "Save Password App" button and test out your new app!

Below are more examples on how to enter typical CSS selectors into Clearlogin's custom app forms.  Please note that it's always assumed that the $('') syntax is always present and should not be entered manually.

Unique ID's

#form
#username
#password
#submit

Input

input[type=text]
input[type=password]
input[type=submit]

Have more questions? Submit a request

Comments

Powered by Zendesk