Validation of participant's ID (password)

[Carlos]

I want to validate an ID that participants input into the text box presented in the first page of an experiment, then I want to prevent the unauthorised participation. I will give a unique ID to each participant prior to the experiment, and I want to check whether the ID that a participant inputs is matched to one of the IDs that are registered in the main.js (var passwords = ['password_one', 'password_two'] in the example below).

I have implemented such a verification system like below so far. However, the implementation allows those who input any text string in the box to advance to the next stage of the experiment without verification of the IDs, although it should only be possible to proceed to the next stage if the appropriate ID is entered in the box.

The link to the example is: https://farm.pcibex.net/r/pWbWRm/

Any suggestions would be appreciated.

PennController.ResetPrefix()

var passwords = ['password_one', 'password_two']

newTrial(
  "instruction",

  newVar("ID").global(),

  newText(
    "<p>Welcome! Please fill your password into the box below.</p>"
  )
    .left()
    .print(),
  newTextInput("inputID", "").center().css("margin", "1em").print(),
  newButton("Start my trials")
    .center()
    .print()
    .wait(
      newFunction(
        function(){
          passwords.includes(() => getTextInput("inputID"));
        }
      ).call()
        .testNot.is(true)
    ),
  getVar("ID").set(getTextInput("inputID"))
);

[Jeremy]

Hi,

First let me remind you that javascript is executed on the client’s side, so all the code is visible by the participant simply via clicking “View source” on the page. I would recommend using a one-way encryption method to list hashes:

const password_hashes = [
    'b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9', // hello world
    '4d371276d3db24d63534d530c302487492adcc1bf221387edb6836dbbf341524'  // bye earth
]

const digest = async message =>
  Array.prototype.map
    .call(
      new Uint8Array(
        await crypto.subtle.digest("SHA-256", new TextEncoder().encode(message))
      ),
      (x) => ("0" + x.toString(16)).slice(-2)
    )
    .join("");

newTrial( "instruction",
    newText("<p>Welcome! Please fill your password into the box below.</p>").print()
    ,
    newTextInput("inputID", "").center().css("margin", "1em").print()
    ,
    newButton("Start my trials")
        .center()
        .print()
        .wait()
    ,
    newFunction( "set", async function() {
        this.hash = await digest(document.querySelector(".PennController-inputID").value);
    }).call()
    ,
    clear()
    ,
    newFunction( "test", function () { return password_hashes.find(v=>v==this.hash); })
        .testNot.is( undefined )
        .failure(
            newText("ID not listed").print()
            ,
            newButton("dummy").wait()
        )
    ,
    newVar("ID").global().set( getTextInput("inputID") )
)

Here I have pre-generated two hashes: one for hello world and one for bye earth. I have added comments but of course keeping them when actually running the experiment would defeat the whole purpose of hashing the input

You can generate the hashes to list yourself by running your experiment and, once you’re on the tab of your running experiment, open your browser’s web console and type:

digest("type the id here").then(console.log)

Replace type the id here with an ID, and then you’ll get the hash output in the console, which you can then report in the password_hashes array

Jeremy

[Carlos]

Hi, Jeremy,

Thank you for your quick reply and really helpful advice! I haven’t notice that the participants may be able to see the source of the experiment… Thank you for letting me know that! Among other things, I really appreciate your code! The code works fine in my experiment, too!

Carlos

[Author]

Posts