TrustX Appkey Web SDK Guide

Early Access

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.

Note

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

Usage Example:

// Authentication const payload = await DaonAppkey.authentication({ appkeyAuthClientRequest, language, translations });

NPM/ REACT Usage

Info

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.ts declare module '@daon/trustx-appkey';

Usage Example:

import { registration, authentication } from '@daon/trustx-appkey'; // Registration const payload = await registration({ appkeyRegClientRequest, language, translations }); // Authentication const 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 App

REACT 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 App

TrustX Appkey Web SDK Guide

CDN/ Script Usage

NPM/ REACT Usage

REACT Registration Example

REACT Authentication Example

Further Reading