Password UI Component
Before your customers can access their cards and managed accounts, they must be onboarded and authenticated on the Weavr platform. You can find more information on how to onboard your customers here.
To onboard and authenticate a user, you must collect their password. You must do this in a way so that your application does not have access to the plain text version of the password.
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. Learn more in the passcode UI component guide.
1 Embed the Password UI Component
The Password UI component lets you collect your customer’s password securely and converts it into a token, which you can safely send to Weavr using the API.
To use Weavr UI components, you must first set up the Weavr UI library in your application.
Due to requirements related to strong customer authentication, your authentication token is required to be stepped-up when calling this UI component to update the password.
<!-- Define a form in which you will ask your customer to input their password -->
<form onSubmit="onSubmit(); return false;">
Username: <input type="input" name="u" /><br />
Password:
<div id="password"></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 Password component that will collect the password
var input = form.input("p", "password", {
placeholder: "Password",
maxlength: 30,
});
// Embed the secure Password component in the HTML element where you want
// the Password component to the shown on screen
input.mount(document.getElementById("password"));
// Define this input so that the 'enter key' would submit the password input
input.on("submit", () => {
console.log("submit password input");
});
// Define a function that will be executed when the form is submitted by the user
function onSubmit() {
// Get the tokenised version of the password inputted by your customer
form.tokenize(function (tokens) {
console.log(tokens);
});
}
</script>
2 Authenticate the User
Now that you have the tokenised password, you can authenticate the user using the tokenised password.
You must perform this step on the server side of your application.
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.