---
description: >-
  A Web Application interacts with the Trust1Connector on standalone devices or
  within a shared environment. The Web Application is not aware, but must take
  this into consideration upon integration.
---

# Integration in Web Applications

{% hint style="warning" %}
Sample code uses ES6 language features such as arrow functions and promises. For compatibility with IE11, code written with these features must be either transpiled using tools like Babel or refactored accordingly using callbacks.
{% endhint %}

Integrating the Trust1Connector can be done via the Javascript SDK. This SDK is compiled in regular javascript and in Typescript. Each release of the Javascript SDK will have the following files;

* dist
  * T1CSdk.js (complete SDK)
  * T1CSdk.js.map
* lib (typings, default Typescript compilation)
* lib-esm (typings, Compilation with ES6 module support)

In V3 of the Trust1Connector the javascript SDK is meant as a comparable manner of integrating like the V2. The SDK includes most of the API featureset but not all.&#x20;

We strongly encourage to integrate via the API, since this will be the most feature-complete and the de-facto way of integration in the future.

{% hint style="info" %}
All examples below will be shown in regular Javascript. All Javascript for changing UI will not be present but are purely displayed as part of the example.
{% endhint %}

## Initialising the Trust1Connector

For initialisation of the T1C you need to prepare your application first by adding the SDK JS files to your project and importing them in such a way that you can call for the Javascript functions when you need them.

Next up we will prepare the SDK's configuration Object, this object is used to pass information about which default port the Trust1Connector is running on, JWT key, API url, ...

```javascript
let environment = {
    t1cApiUrl: 'https://t1c.t1t.io',
    t1cApiPort: '51983',
    t1cProxyUrl: 'https://t1c.t1t.io',
    t1cProxyPort: '51983',
    jwt: '' // retrieve via Back-end
};

const configoptions = new T1CSdk.T1CConfigOptions(
        environment.t1cApiUrl,
        environment.t1cApiPort,
        environment.t1cProxyUrl,
        environment.t1cProxyPort,
        environment.jwt
    );
config = new T1CSdk.T1CConfig(configoptions);
```

When the configuration is set you can initialise the Trust1Connector with that Config and an optional property for clipboardData. This clipboard data is used for initialisation of the Trust1Connector in a shared environment. This will be handled later.

```javascript
T1CSdk.T1CClient.initialize(config).then(res => {
        client = res;
        console.log("Client config: ", client.localConfig);
        core = client.core();
        core.version().then(versionResult => console.log("T1C running on core "+ versionResult));
    }, err => {
        else if (err.code == 814501) {
            $('#consentModal').modal('show', {
                keyboard: false
            });
            $('.consent-token').text(makeid(20));
        }
        else if (err.code == 812020) {
            $('.consent-token').text(makeid(20));
        }
        else if(err.code == 112999) {
            document.querySelector("#initAlert").classList.remove("d-none")
            document.querySelector("#initAlert").innerHTML = err.description;
        } else {
            console.error("T1C error:", err)
        }
    });
```

You can see in the code above we catch 3 errors;

* 814501: Consent error, this means the user is running in a shared environment and needs to provide his consent
* 812020: Initialisation error: The Trust1Connector is not able to initialise because it could not find any users with a Trust1Connector installed.
* 112999: T1C exception, this will be thrown when the T1C is not available, where you can display an URL where the user can [download the T1C](../core/downloading-latest-trust1connector)

## Readers

To retrieve the reader after initialisation you can do the following;

```javascript
core.readersCardAvailable().then(res => {
    //Reader response
}, err => {
    console.log("Cards available error:", err)
})
```

## Initialisation of a module

After initialisation of the T1C you can start using it. For example the BEID module needs to be initialised with a readerId, That is why fetching the readers and providing the user-selected reader to the client is a necessity.

```javascript
function getBeid() {
    if(selected_reader === null || selected_reader === undefined) return undefined
    else return client.beid(selected_reader.id);
}
```

The code above will return a BEID client which can be used to execute the BEID functionality.

## Shared environments

Initialisation of the Trust1Connector for shared environments is similar to the regular initialisation with the difference being a required consent. More information can be found in the [Consent](../core/consent) page.

For initialising the Trust1Connector in a shared environment you need to setup the config so that it contacts the Proxy. When initialising you need to provide a token that is residing on the user's clipboard, via this clipboard token the Proxy can determine which which user is trying to communicate and will return an updated configuration value for the API and the sandbox service.

This configuration update is handled by the SDK itself.

```javascript
const tokenNode = document.querySelector('.consent-token');
var range = document.createRange();
range.selectNode(tokenNode);
window.getSelection().addRange(range);
try {
    // Now that we've selected the anchor text, execute the copy command
    document.execCommand('copy');
} catch(err) {
    console.log('Oops, unable to copy');
}

// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeRange(range);
const clipboardData = tokenNode.textContent;

```

The code above is an example of how you can integrate a copy command in the webbrowser. When the data is copied to the clipboard you just need to pass it to the initialize function like so;

```javascript
T1CSdk.T1CClient.initialize(config).then(res => {
    // initialised
}, err => {
    // Error handeling
})
```
