digi.me React-Native Demo

This is a proof of concept demonstrator to show React-Native being used to create native apps using the native Android and iOS digi.me SDKs to make content and data requests. For more details on the digi.me API and the Consent Access architecture please visit the developer support docs.

Preamble

The React-Native demo depends on the digi.me app installed on the target platform to enable user authentication of Consent Access requests.

Prerequisites

Yarn - Package and dependency manager for node
ImageMagick - used to resize image assets for native images

For iOS development

CocoaPods - Package management for iOS development. Used to get the iOS digi.me SDK

For Android development

Java Development Kit (Java SE Development Kit JDK)
Android Studio. Please ensure that the ANDROID_HOME environment variable is set.

Configuring SDKs

The Contract ID and App ID

Before accessing the public APIs, a valid Contract ID and App ID are required. The Contract ID uniquely identifies a contract with the user that defines what type of data you want, how much you will get (from a defined time range), what you will and won't do with it, how long you will retain it for and if you will implement the right to be forgotten. It also specifies how the data is encrypted in transit. By default, this react-native-demo is bundled with a demo SDK tester contract and .p12 file.

The .p12 File

All content retrieved by the SDK is encrypted in transit using the public key bound to the certificate that was created when the Consent Access contract was created. For the SDK to be able to decrypt content transparently a matching private key must be provided (ie. from the keypair created for contract). The .p12 file is an archive format that's used to bundle the private key with its certificate. Digi.me SDK accepts PKCS #12 encoded files as the default key storage format.

To register a Consent Access contract check out digi.me developer support. There you can request a Contract ID and App ID to which it is bound.

Installation and First Run

Install dependencies Installs required dependencies used for the project. This command only needs to be run once.

yarn install

Configure demo properties Add the application id, and .p12 password (supplied by digi.me Ltd) to the Constants.ts file. See Configuring The React-Native demo for more information.
Compile code Compiles Typescript to JavaScript and copy assets to the ./dist/ folder. This command needs to be run each time any TypeScript source code changes.

yarn compile

Configure native sub projects Generate native images, copies assets to native projects, and updates native code. This command only needs to be run if there are any changes to ./src/constants/Constants.ts file or ./assets/.

yarn configure-native

Start Android Ensure that an Android device is connected or an Android virtual device is running

yarn run-android

Start iOS

yarn run-ios

Configuring The React-Native demo

Using supplied App Id and .p12 passphrase

Upon obtaining the App ID and .p12 passphrase issued by digi.me Ltd;

Update the references used in the ./src/constants/Constants.ts file;

    ...
    public static readonly APPLICATION_NAME: string = "[YOUR APPLICATION_NAME]";
    public static readonly APPLICATION_ID: string = "[YOUR APPLICATION_ID]";
    public static readonly P12_PASSPHRASE: string = "[YOUR P12_PASSWORD]";
    ...

NOTE: CONTRACT_ID and P12_FILENAME are already set to use a predefined demo contract. Please contact us if you would like to use a different contract. [YOUR APPLICATION_NAME] is used to create the display name used for the compiled apps. [YOUR APPLICATION_ID] is the App ID issued to you by digi.me ltd. [YOUR CONTRACT_ID] is the Contract ID issued to you by digi.me ltd (where specified). [YOUR P12_PASSWORD] is the password that's used for the p12 file and its corresponding contract ID.

Run yarn compile
Run yarn configure-native

Using a different contract ID

If a different contract ID is required (and supplied by digi.me Ltd), then the code references and assets must also be updated to point and use the new resources.

Add the .p12 file to the top level ./assets/keys sub directory.
Update the contract ID, .p12 file, and .p12 password used in the ./src/constants/Constants.ts file.
Run yarn compile
Run yarn configure-native
For iOS development, please also ensure the .p12 file is imported into the xCode project.

This script copies the p12 assets from the keys directory to their native Android and iOS directories, it also updates the native code to add the application and contract references (e.g, updates the Android strings.xml using the Android SDK expected string name and provided values).

Typescript and SDK interaction

Both the native Android and iOS subprojects have been configured to use their respective SDKs. In this PoC, both native projects contain a class NativeBridge (Android) NativeBridge.java (iOS) NativeBridge.m. The NativeBridge currently exposes only one function, initSDK() which is called from the JavaScript code to start the native authorisation process.

The native code dispatches events to communicate data back to the JavaScript code. Currently events are dispatched on receiving file data via CA, and accept or rejection of the Consent Access contract from the digi.me app.

Compiling and running

If changes have been made to the typescript, then both the JavaScript and the React-Native platform specific bundles must be created Run yarn compile-run-android or yarn compile-run-ios to compile JavaScript and run the app on Android or iOS.

If (only) changes to the native Android or iOS code have been made, then the JavaScript and native bundles don't need to be recompiled or created. Run yarn run-android or yarn run-ios to run the app. Alternatively, open the and run the native code in (Android) Android Studio or (iOS) XCode.

Jwata/digime-react-native-demo