TrustX Appkey Web SDK Guide
The Daon Appkey Javascript library provides secure biometric registration and authentication capabilities for web and mobile environments. It offers a simple JavaScript API for implementing user registration and authentication workflows that can be integrated with TrustX API.
This document provides a quick-start installation guide with simple installation instructions to get started using the library.
For biometric registration and authentication flows, it is necessary to add FIDO SDK dependences to the Trust SDK.
CDN/ Script Usage
Before using the Appkey Web SDK, ensure you have the following files in your project:
- ixjs_bg.wasm - WebAssembly binary for core functionality
- DaonAppkey.v{version}.min.js - Main Daon Appkey library
<script src="path/to/DaonAppkey.v{version}.min.js"></script>Usage Example:
// Authenticationconst payload = await DaonAppkey.authentication({ appkeyAuthClientRequest, language, translations });NPM/ REACT Usage
The Appkey Web SDK will be distributed to NPM in a future update. This document will be updated once the NPM distribution is available.
To include the Appkey Web SDK in your project, add the following to your list of dependencies:
// package.json"dependencies": { "@daon/trustx-appkey": "file:./path/to/DaonAppkey-{version}.tgz"}For Android applications, if you are using Typescript, it is also required to add the following:
// index.d.tsdeclare module '@daon/trustx-appkey';Usage Example:
import { registration, authentication } from '@daon/trustx-appkey';// Registrationconst payload = await registration({ appkeyRegClientRequest, language, translations });// Authenticationconst payload = await authentication({ appkeyAuthClientRequest, language, translations, transactionCallback });REACT Registration Example
import { registration, ELocalization, ETranslationKey } from '@daon/trustx-appkey';import { useEffect } from 'react';import './App.css'function App() { useEffect(() => { window.parent.postMessage({ event: 'READY' }, '*') window.addEventListener('message', async (event) => { const { sessionData, constants } = event.data.variables const { language } = constants const { appkeyRegClientRequest } = sessionData const translations = { [ELocalization.EN]: { [ETranslationKey.REGISTRATION_TITLE]: "New En Title", [ETranslationKey.REGISTRATION_SUBTITLE]: "New En subTitle", [ETranslationKey.REGISTRATION_DESCRIPTION]: "New En description", [ETranslationKey.REGISTRATION_CANCEL]: "New En cancel" } } const response = await registration({ appkeyRegClientRequest, language, translations }) const { data, success } = response if (success) { return window.parent.postMessage({ event: 'SEND', variables: { data } }, '*') } else { const { error } = response const { errorMessage } = error // show errorMessage or send error data to server // return window.parent.postMessage({ // event: 'SEND', // variables: { ...data } // }, '*') } }); }, []) return null}export default AppREACT Authentication Example
import { authentication, ELocalization, ETranslationKey } from '@daon/trustx-appkey';import { useEffect } from 'react';import './App.css'function App() { const transactionCallback = (text: string) => { const transactionResponse = window.confirm(`Text from transaction is ${text}`) return transactionResponse } useEffect(() => { window.parent.postMessage({ event: 'READY' }, '*') window.addEventListener('message', async (event) => { const { sessionData, constants } = event.data.variables const { language } = constants const { appkeyAuthClientRequest } = sessionData const translations = { [ELocalization.EN]: { [ETranslationKey.AUTHENTICATION_TITLE]: "New En Title", [ETranslationKey.AUTHENTICATION_SUBTITLE]: "New En subTitle", [ETranslationKey.AUTHENTICATION_DESCRIPTION]: "New En description", [ETranslationKey.AUTHENTICATION_CANCEL]: "New En cancel" } } const response = await authentication({ appkeyAuthClientRequest, language, translations, transactionCallback }) const { success, data } = response if (success) { return window.parent.postMessage({ event: 'SEND', variables: { data } }, '*') } else { const { error } = response const { errorMessage } = error // show errorMessage or send error data to server // return window.parent.postMessage({ // event: 'SEND', // variables: { ...data } // }, '*') } }); }, []) return null}export default AppFurther Reading
A full API Reference for the Appkey Web SDK can be found in the Appkey Web SDK API Reference guide.