Example Mapping Field IDs

One of the new major features in our Browser Extensions for Passwordstate is the ability to easily map website input field IDs to fields within a Password Record.  This allows the Browser Extension to know exactly which input fields on a website’s login page need to be automatically form-filled by fields within your Password Record.  It effectively removes the guess work, on the part of the Browser Extension, when dealing with websites that have similar input fields.

In this week’s blog I’m going to work through a step by step approach to mapping the Username and Password input fields to a Password Record.  However, before we get started, I’ll make a couple of statements up front, those being;

  • You must be on Passwordstate 9.5 – Build 9583 or later, with the latest Browser Extension installed,
  • Don’t do this for every set of credentials you form-fill with our Browser Extensions.  Save it for the websites that need it,
  • This blog works on the assumption the Password Record already exists,
  • I have 2 Password Records for this website, and,
  • I’m deliberately redacting the name of the website used for the examples.  There is no inference the company owning the website has produced an inferior or poorly designed site.  It’s simply one of many websites we use for testing our functionality against.

Form-Filling Incorrect Fields

When I navigate to the website used in our example the issue becomes evident.  The Browser Extension has either detected the incorrect website field IDs to form-fill, or the Password Record has historically referenced field IDs that have changed over time.  The latter is more common than you’d think and is usually the result of the owner/developer continuing to evolve their website. 

At this stage it doesn’t really matter what the underlying cause was as the process I’m going to use will fix it. 

As stated at the beginning of this blog there are 2 Password Records for this website.  This means I’ll need to select the correct one to perform the field mapping I require.  To do this I click on the Browser Extension icon, then click on Show Matching Logins.  This shows the two sets of credentials, or two Password Records, for the website.  In the example I’m selecting the bottom one that I want to automatically form-fill the Your email and Your password fields, 

When I hover my mouse cursor over that record, a right pointing arrow appears on the right hand side, and clicking on this brings up the Password Record details (image below).  What I want to do is navigate to the Password Record in Passwordstate by clicking on the link symbol shown,

Clear Existing Mappings

This will take me through to my Passwordstate instance that the Browser Extension is authenticating against.  I’ll need to login to Passwordstate as normal (as I don’t have Single Sign-On configured in this environment) and the Password Record will be opened for me.  From here I’ll select the website fields tab and clear the UserName Field ID and Password Field ID and then click Save.

Note, this step isn’t really necessary, but it’s a good method of showing where the field IDs are kept and how to clear them

Now Map The Correct Fields

I’m now going to navigate back to the website in the example and select the Password Record again from the Browser Extension icon.  Then I’ll select the right pointing arrow on the right hand side, and click on it to bring up the Password Record details.  Now I click on the Map Website Fields button at the bottom of the Password Record,

I’m now presented with the Passwordstate Website Field Mapper dialog.  This allows me to map the Website Fields to my Passwordstate Fields in the Password Record.  I’ll start by mapping the correct field for Username.  To do this ensure I’ve selected Username from the Passwordstate Field drop down box.  Next, I click on the Pick Field button and then click my mouse pointer in the input field for Your email (your website will most likely be different to these – as this is my example).

The Website Field will now show the name of that input field, in this example it’s called email.

I’ll now do the same thing for the Password Field.  I’ve selected Password from the Passwordstate Field drop down box.  Then clicked the Pick Field button and this time clicked the mouse pointer in the input field for Your password (again this is an example).

The Website Field will now show the name of that input field, in this example it’s called secret.  Then I click the Save button.

It really is as easy as those couple of steps.  Now I simply refresh the login page for that website and as you can see the Browser Extension has correctly mapped the Your email and Your password input fields.  If there was only one Password Record for this site then the two fields would have automatically form-filled correctly.

Mapping the website input fields to the fields in your Password Record enables you to successfully auto form-fill the login details for most difficult sites.  The next time you have an issue why don’t you give it a try.

If you’d like to share your feedback please send it through to support@clickstudios.com.au.