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.
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.
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 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.
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.