Skip to main content

Passcode UI Component

Weavr supports 2 types of end-user passwords:

  • Password made up of at least 8 alphanumeric and symbol characters
  • Passcode made up of 4 digits

If you already require your customers to authenticate to use your application, you can authenticate your customers with Weavr using a passcode instead of a password.

info

Contact our support team if you are interested to set up your application to use passcodes instead of a passwords.

1 Embed the Passcode UI Component​

The Passcode UI component lets you collect your customer’s passcode securely and converts it into a token, which you can safely send to Weavr using the API.

tip

To use Weavr UI components, you must first set up the Weavr UI library in your application.

warning

Due to requirements related to strong customer authentication, your authentication token is required to be stepped-up when calling this UI to update the passcode.

<!-- Define a form in which you will ask your customer to input their passcode -->
<form onSubmit="onSubmit(); return false;">
  Username: <input type="input" name="u" /><br />
  Passcode:
  <div id="passcode"></div>
  <br />
  <input type="submit" value="Login" />
</form>

<script type="text/javascript">
  // Initialise the UI library using your ui_key. Replace {{ui_key}} with your own UI key.
  window.OpcUxSecureClient.init("{{ui_key}}");

  // Create an instance of a secure form
  var form = window.OpcUxSecureClient.form();

  // Create an instance of a secure Passcode component that will collect the passcode
  var input = form.input("passcode", "passCode", {
    placeholder: "Pass Code",
  });
  // Define this input so that the 'enter key' would submit the passcode input
  input.on("submit", () => {
    console.log("submit passcode input");
  });

  // Embed the secure Passcode component in the HTML element where you want
  // the Passcode component to the shown on screen
  input.mount(document.getElementById("passcode"));

  // Define a function that will be executed when the form is submitted by the user
  function onSubmit() {
    // Get the tokenised version of the passcode inputted by your customer
    form.tokenize(function (tokens) {
      console.log(tokens);
    });
  }
</script>

2 Authenticate the User​

Now that you have the tokenised passcode, you can authenticate the user using the tokenised passcode.

caution

You must perform this step on the server side of your application.

POST/login_with_passwordTry it

After a successful login you will receive the user authentication token as token in the response. You must then use this token to authenticate the user in all subsequent API calls.