Creating custom Password App Connections in Clearlogin is both fun and easy. It requires a little bit of knowledge about CSS selectors but that’s it. Prerequisites The Clearlogin Password Manager currently supports the Google Chrome browser and login forms with two fields (username and password) and a submit button. We will be expanding the capabilities of the Password Manager soon. Adding the Connection
- Log into https://admin.clearlogin.com and on the left select Apps then click Add New.
- Scroll down the page to the Custom Connections section and select Password. The following form contains a number of fields which we will walk through.
- First things first are the visual elements of your app, namely the Display Name and Icon. The display name is the name of your app and the icon is typically a square graphic or logo to represent that application. Any image uploaded will be resized accordingly to look correct on your users' dashboards.
- Next up is some basic information about the application. The App URL is the url for your application. The Login URL is the address where the login form resides. If possible we suggest using a URL for the App URL that requires authentication such as a logged in dashboard or other internal page that will redirect the user to a login form if they are not logged in. Another recommendation is to simply use the Login URL for the App URL as well.
- The next step is to fill out the CSS selectors for the different fields of the login form. This is the most involved part and we will go over it in detail.
CSS selectors are a web standard for identifying elements on a web page. In this case we need to know the different parts of the form. Form selector refers to the selector to identify the HTML form element. This is typically something like #login_form or simply form.Username selector is the selector for the username field in the login form. This is typically something like #username or input[type="text"].Password Selector is the selector for the password field in the login form. This is typically something like #password or input[type="password"].Submit Selector is the selector for the submit button for the login form. This is typically something like #submit or input[type="submit"].Identifying selectors is as easy as right clicking on the element on the page and choosing Inspect element and identifying the attributes of it. It would be ideal to use the most specific selector possible such as an ID selector (#) or a name selector ([name=element_name_attribute]).
After clicking Inspect element the Chrome Elements panel will open up, highlighting the element you inspected.
In this example we've inspected the username input field. Looking at the element now we can determine that the ID is sign_in_username so our resulting username selector is #sign_in_username. We could also use [name="sign_in[username]"]. Here are some additional resources for CSS selectors: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors http://www.w3schools.com/css/css_selectors.asp Why do we do this? We have designed the Clearlogin Password Manager to operate with as little magic as possible. Many password managers automatically identify form fields which can cause unexpected or insecure behaviors. By explicitly identifying the form fields you can guarantee the extension to behave consistently.
- The last step is to select Shared access tags and Personal access tags. Users within the shared access tags will gain access to the Shared Account you configure for this app connection if you chose to do so. Similarly, users within the personal access tags will have the ability to use and manage account credentials specific to them.
- All that's left is to click Save Password App and you're all done.
Please refer to our Password Manager Credentials documentation for information about managing Shared and Personal account credentials.