Architecture
============

The solution is based on a local service (the *Smart Card Web Service*, or *SCWS*), which is set up on the client phone when the client application is installed. The *SCWS* is able to communicate with tokens connected to the phone. In order to communicate with this service, a React-Native application can use the **SCWS API React** (:index:`SCWS API`), which communicates with the SCWS.   

The general architecture is depicted below:

.. graphviz::

	digraph {
		graph [ compound=true, newrank=true ];

		subgraph cluster_phone_machine {
			label="Phone OS (Android or iOS)";
			subgraph cluster_browser {
				label="Application";
				subgraph cluster_client_page {
					style=dashed;
					label="React class";
					node [ label="SCWS API React", style=dashed, shape=rectangle, width=1 ] scwsapi;
				}
			}
			node [ label="Smart Card\nWeb Service", shape=rectangle, width=2.7 ] scws;
		}
	
		node [ label="Smart Card\nReader", shape=rectangle ] reader;

		scwsapi -> scws;
		scws -> scwsapi;
		scws -> reader;
		reader -> scws;

		{ rank=same; }

	}

When access to the smart card system is needed, the application can use the *SCWS API* provided by Idopte (with which the application is bundled). This API is a simple wrapper that takes care of the communication with the underlying *Smart Card Web Service*. The *Smart Card Web Service*, which is resident in the background of the app, performs the operations through native calls.