diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b64461..e8acd6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [11.1.0] - 2024-03-06 + +### Changed: + +- Updated underlying Onfido native SDK version: + - iOS 29.9.1 (up from 29.8.x) + - Android 20.1.x (up from 20.0.x) + ## [11.0.0] - 2024-03-06 ### Changed: diff --git a/README.md b/README.md index 0159a6f..db932bc 100644 --- a/README.md +++ b/README.md @@ -4,136 +4,78 @@ ## Table of contents -- [Table of contents](#table-of-contents) -- [Overview](#overview) -- [Getting started](#getting-started) - - [1. Obtaining an API token](#1-obtaining-an-api-token) - - [2. Creating an Applicant](#2-creating-an-applicant) - - [3. Configuring SDK with Tokens](#3-configuring-sdk-with-tokens) - - [4. Adding the Onfido React Native SDK to your project](#4-adding-the-onfido-react-native-sdk-to-your-project) - - [This SDK supports React Native versions 0.68.2 and later](#this-sdk-supports-react-native-versions-0682-and-later) - - [4.1 Adding SDK dependency through npm](#41-adding-sdk-dependency-through-npm) - - [4.2 Update your Android build.gradle files](#42-update-your-android-buildgradle-files) - - [4.3 Custom Android Application Class](#43--custom-android-application-class) - - [Kotlin](#kotlin) - - [4.4 Update your iOS configuration files](#44-update-your-ios-configuration-files) - - [Enabling NFC extraction](#enabling-nfc-extraction) -- [Usage](#usage) - - [1. Creating the SDK configuration](#1-creating-the-sdk-configuration) - - [2. Parameter details](#2-parameter-details) - - [3. Success Response](#3-success-response) - - [4. Failure Response](#4-failure-response) - - [5. Localization](#5-localization) - - [Android](#android) - - [iOS](#ios) -- [Media Callbacks](#media-callbacks) - - [Introduction](#introduction) - - [Implementation](#implementation) - - [User data](#user-data) -- [Generating verification reports](#generating-verification-reports) -- [Theme Customization](#theme-customization) - - [Android](#android-1) - - [iOS](#ios-1) -- [Going live](#going-live) -- [More Information](#more-information) - - [Troubleshooting](#troubleshooting) - - [Discrepancies between underlying Onfido native SDKs](#discrepancies-between-underlying-onfido-native-sdks) - - [Support](#support) -- [How is the Onfido React Native SDK licensed?](#how-is-the-onfido-react-native-sdk-licensed) - +- [1. Overview](#overview) +- [2. Adding the SDK dependency](#adding-the-sdk-dependency) +- [3. Initializing the SDK](#initializing-the-sdk) +- [4. Completing a session](#completing-a-session) +- [Advanced flow customization](#advanced-flow-customization) +- [Advanced callbacks](#advanced-callbacks) +- [More information](#more-information) +- [Raising support issues](#support) ## Overview -This SDK provides a drop-in set of screens and tools for react native applications to allow capturing of identity documents and face photos/live videos for the purpose of identity verification with [Onfido](https://onfido.com/). The SDK offers a number of benefits to help you create the best on-boarding/identity verification experience for your customers: +The Onfido Smart Capture SDKs provide a set of screens and functionalities that enable applications to implement user identity verification flows. Each SDK contains: -* Carefully designed UI to guide your customers through the entire photo/video-capturing process -* Modular design to help you seamlessly integrate the photo/video-capturing process into your application flow -* Advanced image quality detection technology to ensure the quality of the captured images meets the requirement of the Onfido identity verification process, guaranteeing the best success rate -* Direct image upload to the Onfido service, to simplify integration\* +- Carefully designed UX to guide your customers through the different photo or video capture processes +- Modular design to help you seamlessly integrate the different photo or video capture processes into your application's flow +- Advanced image quality detection technology to ensure the quality of the captured images meets the requirement of the + Onfido identity verification process, guaranteeing the best success rate +- Direct image upload to the Onfido service, to simplify integration +- A suite of advanced fraud detection signals to protect against malicious users -> ℹ️ -> -> If you are integrating using Onfido Studio please see our [Studio integration guide](ONFIDO_STUDIO.md) +All Onfido Smart Capture SDKs are orchestrated using [Onfido Studio](https://developers.onfido.com/guide/onfido-studio-product) workflows, with only minor customization differences between the available platforms. -\* **Note**: The SDK is only responsible for capturing and uploading document photos, live selfies, live videos and motion captures. You still need to access the [Onfido API](https://documentation.onfido.com/) to manage applicants and [Onfido Studio](https://developers.onfido.com/guide/onfido-studio-product) to build verification workflows. +### Environments and testing with the SDK -* Supports iOS 11+ -* Supports Xcode 13+ -* Supports Android API level 21+ -* Supports iPads and tablets +Two environments exist to support the Onfido SDK integrations: -## Getting started +- 'sandbox' - to be used for testing with sample documents +- 'live' - to be used only with real documents and in production apps -### 1. Obtaining an API token +The environment being used is determined by the API token that is used to generate the necessary [SDK token](#sdk-authentication). -In order to start integration, you will need the **API token**. You can use our [sandbox](https://documentation.onfido.com/#sandbox-testing) environment to test your integration, and you will find the API tokens inside your [Onfido Dashboard](https://onfido.com/dashboard/api/tokens). You can create API tokens inside your Onfido Dashboard as well. +### Going Live -### 2. Creating an Applicant +Once you are satisfied with your integration and are ready to go live, please contact [client-support@onfido.com](mailto:client-support@onfido.com) to obtain a live API token. You will have to replace the sandbox token in your code with the live token. -You must create an Onfido [applicant](https://documentation.onfido.com/#applicants) before you start the flow. +Check that you have entered correct billing details inside your [Onfido Dashboard](https://onfido.com/dashboard/), before going live. -For a document or face check the minimum applicant details required are `firstName` and `lastName`. +## Adding the SDK dependency -You must create applicants from your server: +The React Native SDK supports: -```shell -$ curl https://api.onfido.com/v3/applicants \ - -H 'Authorization: Token token=YOUR_API_TOKEN' \ - -d 'first_name=Theresa' \ - -d 'last_name=May' -``` +* React Native 0.72 +* iOS 12+ +* Xcode 15+ +* Android API level 21+ +* iPads and tablets -The JSON response has an `id` field containing a UUID that identifies the applicant. All documents or live photos/videos uploaded by that instance of the SDK will be associated with that applicant. +### Adding the Onfido React Native SDK to your project -### 3. Configuring SDK with Tokens +**This SDK supports React Native versions 0.72** -You will need to generate and include a short-lived JSON Web Token (JWT) every time you initialise the SDK. - -To generate an SDK Token you should perform a request to the SDK Token endpoint in the Onfido API: +If you are starting from scratch, you can follow the [React Native CLI Quickstart](https://reactnative.dev/docs/getting-started). Once you have installed the React Native tools, you can run: -```shell -$ curl https://api.onfido.com/v3/sdk_token \ - -H 'Authorization: Token token=YOUR_API_TOKEN' \ - -F 'applicant_id=YOUR_APPLICANT_ID' \ - -F 'application_id=YOUR_APPLICATION_BUNDLE_IDENTIFIER' -``` - -Make a note of the token value in the response, as you will need it later on when initialising the SDK. - -**Warning:** SDK tokens expire 90 minutes after creation. - -The `application_id` is the "Application ID" or "Bundle ID" that was already set up during development. -* For iOS this is usually in the form of `com.your-company.app-name`. - * To get this value manually, open xcode `ios/YourProjectName`, click on the project root, click the General tab, under Targets click your project name, and check the Bundle Identifier field. - * To get this value programmatically in native iOS code, see [Stack Overflow Page](https://stackoverflow.com/questions/8873203/how-to-get-bundle-id). -* For Android this is usually in the form of com.example.yourapp. - * To get this file manually, you can find it in your app's `build.config`. For example, in `android/app/build.gradle`, it is the value of `applicationId`. - * To get this value programmatically in native Java code, see [Stack Overflow Page](https://stackoverflow.com/questions/14705874/bundle-id-in-android). - -### 4. Adding the Onfido React Native SDK to your project - -#### This SDK supports React Native versions 0.68.2 and later - -If you are starting from scratch, you can follow the React Native CLI Quickstart https://reactnative.dev/docs/getting-started. For examples, once you have installed the React Native tools, you can run: ```shell $ npx react-native init YourProjectName ``` -You cannot use this SDK with Expo: If your project already uses Expo, you will need to follow the eject process https://docs.expo.io/versions/latest/workflow/customizing/. +You cannot use this SDK with Expo. If your project already uses Expo, you will need to follow the eject process, documented [here](https://docs.expo.io/versions/latest/workflow/customizing/). -- NOTE: You will need to download and install [Android Studio](https://developer.android.com/studio/index.html), configured as specified in [the react-native guide for Android](https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment) to run on an android emulator. +**Note**: You will need to download and install [Android Studio](https://developer.android.com/studio/index.html), configured as specified in [the react-native guide for Android](https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment) to run on an Android emulator. -#### 4.1 Adding SDK dependency through npm +### Adding SDK dependency through npm -Navigate to the root directory of your React Native project. The rest of this section (section 4) will assume you are in the root directory. Run the following command: +Navigate to the root directory of your React Native project. The rest of this section will assume you are in the root directory. Run the following command: ```shell $ npm install @onfido/react-native-sdk --save ``` -#### 4.2 Update your Android build.gradle files +#### Update your Android build.gradle files -Update your build.grade files to reference the Android SDK, and enable multi-dex. If you build your project using the `react-native init`, with a `build.gradle` in the `android/` and `android/app/` directories, you can run this script to do it: +Update your `build.grade` files to reference the Android SDK, and enable multi-dex. If you build your project using the `react-native init`, with a `build.gradle` in the `android/` and `android/app/` directories, you can run this script to do it: ```shell $ npm --prefix node_modules/@onfido/react-native-sdk/ run updateBuildGradle @@ -153,7 +95,7 @@ allprojects { } ``` -Enable multidex in `android/app/build.gradle`: +Enable multi-dex in `android/app/build.gradle`: ```gradle android { defaultConfig { @@ -165,47 +107,11 @@ android {
-##### Enabling NFC extraction - -With version 10.0.0 of the Onfido React Native SDK, NFC is enabled by default and offered to customer when both the document and the device support NFC. - -For more information on how to configure NFC and the list of supported documents, please refer to the [NFC for Document Report](https://developers.onfido.com/guide/document-report-nfc) guide. - - -NFC dependencies are not included in the SDK to avoid increasing the SDK size when the NFC feature is disabled. To use the NFC feature, you need to include the following dependencies (with the specified versions) in your build script: +##### Custom Android Application Class -```gradle -implementation "net.sf.scuba:scuba-sc-android:0.0.23" -implementation "org.jmrtd:jmrtd:0.7.34" -implementation "com.madgag.spongycastle:prov:1.58.0.0" -``` - -You also need to add the following Proguard rules to your `proguard-rules.pro` file: - -``` --keep class org.jmrtd.** { *; } --keep class net.sf.scuba.** {*;} --keep class org.bouncycastle.** {*;} --keep class org.spongycastle.** {*;} --keep class org.ejbca.** {*;} - --dontwarn kotlin.time.jdk8.DurationConversionsJDK8Kt --dontwarn org.ejbca.** --dontwarn org.bouncycastle.** --dontwarn org.spongycastle.** - --dontwarn module-info --dontwarn org.jmrtd.** --dontwarn net.sf.scuba.** -``` - - -
- -#### 4.3 Custom Android Application Class **Note**: You can skip this step if you don't have any custom application class. -⚠️ After the release of version 9.0.0, Onfido RN SDK runs in a separate process. This means that when the Onfido SDK started, a new application instance will be created. To prevent reinitializing you have in the Android application class, you can use the `isOnfidoProcess` extension function and return from `onCreate` as shown below: +After the release of version 9.0.0, the Onfido React Native SDK runs in a separate process (for Android only). This means that when the Onfido SDK starts, a new application instance will be created. To prevent re-executing the initializations you have in the Android application class, you can use the `isOnfidoProcess` extension function and return from `onCreate` as shown below. This will prevent initialization-related crashes such as: [`FirebaseApp is not initialized in this process`](https://github.com/firebase/firebase-android-sdk/issues/4693) @@ -234,11 +140,11 @@ class YourCustomApplication : MultiDexApplication() { ``` -#### 4.4 Update your iOS configuration files +#### Update your iOS configuration files -Change `ios/Podfile` to use version 11: +Change `ios/Podfile` to use version 12: ``` -platform :ios, '11.0' +platform :ios, '12.0' ``` Add descriptions for camera and microphone permissions to `ios/YourProjectName/Info.plist`: @@ -255,12 +161,12 @@ Add descriptions for camera and microphone permissions to `ios/YourProjectName/I ``` -Open Xcode and create an empty swift file in your project root. For example, if your project is called YourProjectName, you can open it from the command line: +Open Xcode and create an empty Swift file in your project root. For example, if your project is called YourProjectName, you can open it from the command line: ```bash open ios/YourProjectName.xcodeproj ``` -Once Xcode is open, add an empty Swift file: File > New File > Swift > Next > "SwiftVersion" > Create > Don't create Header. This will update your iOS configuration with a Swift version. All changes are automatically saved, so you can close Xcode. +Once Xcode is open, add an empty Swift file: File > New File > Swift > Next > "SwiftVersion" > Create > Don't create Header. This will update your iOS configuration with a Swift version. All changes are automatically saved, so you can close Xcode. Install the pods: ```bash @@ -269,23 +175,26 @@ pod install cd .. ``` -##### Enabling NFC extraction +#### NFC capture using Onfido Studio -With version 10.0.0 of the Onfido React Native SDK, NFC is enabled by default and offered to customer when both the document and the device support NFC. +Recent passports, national identity cards and residence permits contain a chip that can be accessed using Near Field Communication (NFC). The Onfido SDKs provide a set of screens and functionalities to extract this information, verify its authenticity and provide the resulting verification as part of a Document report. + +From version 10.0.0 onwards, NFC is enabled by default in the Onfido React Native SDK for Android and iOS and offered to customers when both the document and the device support NFC. For more information on how to configure NFC and the list of supported documents, please refer to the [NFC for Document Report](https://developers.onfido.com/guide/document-report-nfc) guide. -This feature requires Near Field Communication Tag Reading capability in your app target. If you haven't added it before, please follow the steps in Apple's documentation. +##### Enabling NFC extraction for iOS +For iOS, the NFC feature requires `Near Field Communication Tag Reading` capability in your app target. If you haven't added it before, please follow the steps in [Apple's documentation](https://help.apple.com/xcode/mac/current/#/dev88ff319e7). -You're required to have the following key in your application's Info.plist file: +You're required to have the following key in your application's `Info.plist` file: ```xml NFCReaderUsageDescription Required to read ePassports ``` -You have to include the entries below in your app target's Info.plist file to be able to read NFC tags properly. +You have to include the entries below in your app target's `Info.plist` file to be able to read NFC tags properly: ```xml com.apple.developer.nfc.readersession.felica.systemcodes @@ -301,9 +210,111 @@ You have to include the entries below in your app target's Info.plist file to be ``` -## Usage +##### Disabling NFC + +NFC is enabled by default. To disable NFC, include the `disableNFC` parameter while configuring the `Onfido.start` function: + +```javascript +config = { + sdkToken: "", + workflowRunId: "", + disableNFC: "true" +} +``` + +For Android, a range of NFC library dependencies are included in the build automatically. In addition to configuring the `disableNFC` parameter, you must remove any libraries from the build process. + +Exclude dependencies required for NFC from your build: + +```gradle +dependencies { + implementation 'com.onfido.sdk.capture:onfido-capture-sdk:x.y.z' { + exclude group: 'net.sf.scuba', module: 'scuba-sc-android' + exclude group: 'org.jmrtd', module: 'jmrtd' + exclude group: 'com.madgag.spongycastle', module: 'prov' + } +} +``` + +If your application already uses the same libraries that the Onfido SDK needs for the NFC feature, you may encounter some dependency conflicts that will impact and could interfere with the NFC capture in our SDK. In such cases, we propose using the dependency resolution strategy below, by adding the following lines to your `build.gradle` file: + +```gradle +implementation ("com.onfido.sdk:onfido-:19.1.0"){ + exclude group: "org.bouncycastle" + } + implementation ("the other library that conflicts with Onfido on BouncyCastle") { + exclude group: "org.bouncycastle" + } + + implementation "org.bouncycastle:bcprov-jdk15to18:1.69" + implementation "org.bouncycastle:bcutil-jdk15to18:1.69" +``` + +## Initializing the SDK + +The Reach Native SDK has multiple initialization and customization options that provide flexibility to your integration, while remaining easy to integrate. + +### Defining a workflow + +Onfido Studio is the platform used to create highly reusable identity verification workflows for use with the Onfido SDKs. For an introduction to working with workflows, please refer to our [Getting Started guide](https://developers.onfido.com/guide/general-introduction), or the Onfido Studio [product guide](https://developers.onfido.com/guide/onfido-studio-product). + +SDK sessions are orchestrated by a session-specific `workflow_run_id`, itself derived from a `workflow_id`, the unique identifier of a given workflow. + +For details on how to generate a `workflow_run_id`, please refer to the `POST /workflow_runs/` endpoint definition in the Onfido [API reference](https://documentation.onfido.com/#workflow-runs). + + + +> **Note** that in the context of the SDK, the `workflow_run_id` property is referred to as `workflowRunId`. + + + +#### Applicant ID reuse + +When defining workflows and creating identity verifications, we highly recommend saving the `applicant_id` against a specific user for potential reuse. This helps to keep track of users should you wish to run multiple identity verifications on the same individual, or in scenarios where a user returns to and resumes a verification flow. + +### SDK authentication + +The SDK is authenticated using SDK tokens. As each SDK token must be specific to a given applicant and session, and a new token must be generated each time you initialize the Onfido React Native SDK. + +| Parameter | Notes | +|------|------| +| `applicant_id` | **required**
Specifies the applicant for the SDK instance. | +| `application_id` | **required**
The application ID (for iOS "application bundle ID") that was set up during development. | + +* For iOS, the `application_id` is usually in the form of `com.your-company.app-name`. + * To get this value manually, open Xcode `ios/YourProjectName`, click on the project root, click the General tab, under Targets click your project name, and check the Bundle Identifier field. + * To get this value programmatically in native iOS code, refer to this [Stack Overflow Page](https://stackoverflow.com/questions/8873203/how-to-get-bundle-id). +* For Android, the `application_id` is usually in the form of `com.example.yourapp`. + * To get this file manually, you can find it in your app's `build.config`. For example, in `android/app/build.gradle`, it is the value of `applicationId`. + * To get this value programmatically in native Java code, refer to this [Stack Overflow Page](https://stackoverflow.com/questions/14705874/bundle-id-in-android). + +It's important to note that SDK tokens expire after **90 minutes**. + +For details on how to generate SDK tokens, please refer to the `POST /sdk_token/` endpoint definition in the Onfido [API reference](https://documentation.onfido.com/#generate-sdk-token). + +**Note**: You must never use API tokens in the frontend of your application as malicious users could discover them in your source code. You should only use them on your server. + +### Build a configuration object + +To use the SDK, you need to obtain an instance of the client object, using your generated SDK token and workflow run ID. + +```javascript +config = { + sdkToken: "", + workflowRunId: "" +} +``` + +### Start the flow + +You can then launch the app with a call to `Onfido.start`. + +```javascript +Onfido.start(config); +// listen for the result +``` -You can launch the app with a call to `Onfido.start`. For example, once you have the `sdkTokenFromOnfidoServer`, your react component might look like this: +An expanded example of a configuration can be found below: ```javascript import React, {Component} from 'react'; @@ -318,17 +329,8 @@ import { export default class App extends Component { startSDK() { Onfido.start({ - sdkToken: 'sdkTokenFromOnfidoServer', - flowSteps: { - welcome: true, - captureFace: { - type: OnfidoCaptureType.VIDEO, - }, - captureDocument: { - docType: OnfidoDocumentType.DRIVING_LICENCE, - countryCode: OnfidoCountryCode.GBR, - }, - }, + sdkToken: "", + workflowRunId: "", }) .then(res => console.warn('OnfidoSDK: Success:', JSON.stringify(res))) .catch(err => console.warn('OnfidoSDK: Error:', err.code, err.message)); @@ -344,190 +346,109 @@ export default class App extends Component { } ``` -### 1. Creating the SDK configuration - -Once you have an added the SDK as a dependency and you have a SDK token, you can configure the SDK: +### Styling customization -Example configuration: +For both iOS and Android, the React Native SDK supports the customization of colors, fonts and strings used in the SDK flow. -```javascript -config = { - sdkToken: “EXAMPLE-TOKEN-123”, - flowSteps: { - welcome: true, - captureDocument: { - docType: OnfidoDocumentType.DRIVING_LICENSE, - countryCode: OnfidoCountryCode.USA - }, - captureFace: { - type: OnfidoCaptureType.VIDEO - } - } -} -``` +### Appearance and Colors -### 2. Parameter details - -* **`sdkToken`**: Required. This is the JWT sdk token obtained by making a call to the SDK token API. See section [Configuring SDK with Tokens](#3-configuring-sdk-with-tokens). -* **`flowSteps`**: Required. This object is used to toggle individual screens on and off and set configurations inside the screens. -* **`welcome`**: Optional. This toggles the welcome screen on or off. If omitted, this screen does not appear in the flow. - * Valid values: `true`, `false` -* **`proofOfAddress`**: Optional. This toggles the proof of address screen on or off. If omitted, this screen does not appear in the flow. - * Valid values: `true`, `false` -* **`captureDocument`**: Optional. This object contains configuration for the capture document screen. If docType and countryCode are not specified, a screen will appear allowing the user to choose these values. If omitted, this screen does not appear in the flow. -* **`docType`**: Required if countryCode is specified. - * Valid values in `OnfidoDocumentType`: `PASSPORT`, `DRIVING_LICENCE`, `NATIONAL_IDENTITY_CARD`, `RESIDENCE_PERMIT`, `RESIDENCE_PERMIT`, `VISA`, `WORK_PERMIT`, `GENERIC`. - **Note**: `GENERIC` document type doesn't offer an optimised capture experience for a desired document type. -* **`countryCode`**: Required if docType is specified. - * Valid values in `OnfidoCountryCode`: Any ISO 3166-1 alpha-3 code. For example: `OnfidoCountryCode.USA`. -* **`captureFace`**: Optional. This object object containing options for capture face screen. If omitted, this screen does not appear in the flow. -* **`type`**: Required if captureFace is specified. - * Valid values in `OnfidoCaptureType`: `PHOTO`, `VIDEO`, `MOTION`. -* **`showIntro`**: Optional. This toggles the intro screen in Selfie step or the intro video on the Video step. Default `true` -* **`showConfirmation`**: Optional. This toggles the confirmation screen in Video step (Android only). Default `true` -* **`manualVideoCapture`**: Optional. This enables manual video capture (iOS only). Default `false` -* **`motionCaptureFallback`**: Required if captureFace is specified as MOTION. - * Valid values in `OnfidoFaceCapture`: `OnfidoFaceSelfieCapture`, `OnfidoFaceVideoCapture`. - * Valid values in `OnfidoFaceSelfieCapture`: `type`: OnfidoCaptureType.PHOTO - * Valid values in `OnfidoFaceVideoCapture`: `type`: OnfidoCaptureType.VIDEO +#### Android - In the scenario that the Motion variant is not supported on the user's device, if you configure the `motionCaptureFallback` appropriately it will allow the user to capture a Selfie or a Video as a fallback. - - **Note**: Fallback is not used in Android anymore as Motion is supported in all devices and OS versions specified by the SDK. -* **`recordAudio`**: Required if captureFace is specified as MOTION. - * Valid values: `true`, `false` -* **`localisation`**: Optional. This object contains localisation configuration. See section [Localization](#localization) for the details. - * Example usage: +The customization of colors and other appearance attributes for Android is implemented according to the same methodology as the native Android SDK. You can find detailed documentation [here](https://documentation.onfido.com/sdk/android/#ui-customization). - ```javascript - config = { - sdkToken: “EXAMPLE-TOKEN-123”, - localisation: { - ios_strings_file_name: 'Localizable', - }, - flowSteps: { - ... - }, - } - ``` -* `theme`: The theme in which Onfido SDK is displayed. By default, the user's active device theme will be - automatically applied to the Onfido SDK. However, you can opt out from dynamic theme switching at run time - and instead set a theme statically at the build time as shown below. In this case, the flow will always be in displayed - in the selected theme regardless of the user's device theme. - * Valid values in `OnfidoTheme`: `AUTOMATIC`, `LIGHT`, `DARK`. +For a complete list and visualizations of the customizable attributes, refer to our [SDK customization guide](https://developers.onfido.com/guide/sdk-customization#ui-customization). -### 3. Success Response +##### Customizing Dimensions -The response will include a `face` section if `captureFace` was specified, `document` section if `captureDocument` was specified, or both sections if thery were both requested in the config. +To customize supported dimensions, you can add an Android resource file called `dimens.xml` in the following directory of your project: `android/app/src/main/res/values`. -Example: +For example: -```javascript -{ - document: { - front: { id: "123-abc" }, - back: { id: "345-def" } - }, - face: { - id: "456-567", - variant: "VIDEO" // PHOTO or VIDEO - }, -} +```xml + + 8dp + ``` -### 4. Failure Response +The following dimension is currently supported: -The SDK will reject the promise any time the Onfido SDK exits without a success. This includes cases where: -* the configuration was invalid, -* the mobile user clicked the back button to exit the Onfido SDK. +* **`onfidoButtonCornerRadius`**: The corner radius of all buttons in the SDK, provided in the `dp` unit + +#### iOS -Example +For iOS, you can customize colors and other appearance attributes by adding a `colors.json` file to your Xcode project as a bundle resource. The file should contain a single json object with the desired keys and values. For example: -```javascript +```json { - code: "config_error", - message: "sdkToken is missing" + "onfidoPrimaryColor": "#FF0000", + "backgroundColor": { + "light": "#FCFCFD", + "dark": "#000000" + }, + "onfidoPrimaryButtonTextColor": "#FFFFFF", + "onfidoPrimaryButtonColorPressed": "#FFA500", + "interfaceStyle": <"unspecified" | "light" | "dark">, + "secondaryTitleColor": "#FF0000", + "secondaryBackgroundPressedColor": "#FF0000", + "buttonCornerRadius": 20, + "fontFamilyTitle": "FONT_NAME_FOR_TITLES", + "fontFamilyBody": "FONT_NAME_FOR_CONTENT", } ``` -### 5. Localization - -The SDK supports and maintains the following 44 languages: - -- Arabic: ar 🇦🇪 -- Armenian: hy 🇦🇲 -- Bulgarian: bg 🇧🇬 -- Chinese (Simplified): zh_Hans 🇨🇳 -- Chinese (Traditional): zh_Hant 🇨🇳 -- Croatian: hr 🇭🇷 -- Czech: cs 🇨🇿 -- Danish: da 🇩🇰 -- Dutch: nl 🇳🇱 -- English (United Kingdom): en_GB 🇬🇧 -- English (United States): en_US 🇺🇸 -- Estonian: et 🇪🇪 -- Finnish: fi 🇫🇮 -- French (Canadian): fr_CA 🇫🇷 🇨🇦 -- French: fr 🇫🇷 -- German: de 🇩🇪 -- Greek: el 🇬🇷 -- Hebrew: he 🇮🇱 -- Hindi: hi 🇮🇳 -- Hungarian: hu 🇭🇺 -- Indonesian: id 🇮🇩 -- Italian: it 🇮🇹 -- Japanese: ja 🇯🇵 -- Korean: ko 🇰🇷 -- Latvian: lv 🇱🇻 -- Lithuanian: lt 🇱🇹 -- Malay: ms 🇲🇾 -- Norwegian: nb 🇳🇴 -- Persian: fa 🇮🇷 -- Polish: pl 🇵🇱 -- Portuguese (Brazil): pt_BR 🇵🇹 🇧🇷 -- Portuguese: pt 🇵🇹 -- Romanian: ro 🇷🇴 -- Russian: ru 🇷🇺 -- Serbian: sr_Latn 🇷🇸 -- Slovak: sk 🇸🇰 -- Slovenian: sl 🇸🇮 -- Spanish (Latin America): es_419 🇪🇸 🇺🇸 -- Spanish: es 🇪🇸 -- Swedish: sv 🇸🇪 -- Thai: th 🇹🇭 -- Turkish: tr 🇹🇷 -- Ukrainian: uk 🇺🇦 -- Vietnamese: vi 🇻🇳 - -However, you can add your own translations. +For a complete list and visualizations of the customizable attributes, refer to our [SDK customization guide](https://developers.onfido.com/guide/sdk-customization#ui-customization). + +### Dark theme + +The React Native SDK supports the dark theme. By default, the user's active device theme will be automatically applied to the Onfido SDK. However, you can opt out from dynamic theme switching at run time and instead set a theme statically at the build time as shown below. In this case, the flow will always be displayed in the selected theme regardless of the user's device theme. #### Android -By default, custom localisation is enabled on Android. There is no configuration needed on React Native SDK to enable it. -You could also provide custom translation for a locale that we don’t currently support, by having an additional XML strings file inside your resources folder for the desired locale. See [Localisation section of Android SDK repo](https://github.com/onfido/onfido-android-sdk#4-localisation) for the details. +Dark theme customization for Android is implemented according to the same methodology as the native Android SDK. You can find detailed documentation [here](https://documentation.onfido.com/sdk/android/#dark-theme). #### iOS -You can also provide a custom translation for a locale that Onfido doesn't currently support. -There is a simple configuration needed on the React Native SDK to enable custom localisation. -1. Add this statement to your configuration object. +Dark theme customization for iOS is implemented according to the same methodology as the native Android SDK. You can find detailed documentation [here](https://documentation.onfido.com/sdk/ios/#dark-theme). + +### Language localization + +The React Native SDK supports and maintains translations for over 40 languages, available for use with both Android and iOS. + +The SDK will detect and use the end user's device language setting. If the device's language is not supported by Onfido, the SDK will default to English (`en_US`). + +For a complete list of the languages Onfido supports, refer to our [SDK customization guide](https://developers.onfido.com/guide/sdk-customization#language-customization). + +#### Custom languages for Android + +You can also provide a custom translation for a specific language or locale that Onfido does not currently support, by having an additional XML strings file inside your resources folder for the desired locale. See our [Android localization documentation](https://documentation.onfido.com/sdk/android/#language-localization) for more details. + +#### Custom languages for iOS + +For iOS, you can also provide a custom translation for a specific language or locale that Onfido does not currently support. To configure this on the React Native SDK: + +1. Add this statement to your [configuration object](#build-a-configuration-object). + ``` localisation: { ios_strings_file_name: '', }, ``` -2. Navigate to the iOS folder ```cd ios```, and open your XCode workspace. -3. Follow the instructions for [iOS Localisation](https://medium.com/lean-localization/ios-localization-tutorial-938231f9f881) to add a new custom language or override existing translations. + +2. Navigate to the iOS folder ```cd ios```, and open your Xcode workspace. +3. Follow the instructions for [iOS Localization](https://medium.com/lean-localization/ios-localization-tutorial-938231f9f881) to add a new custom language or override existing translations. 4. You can find the keys that need to be translated in the [iOS SDK repo](https://github.com/onfido/onfido-ios-sdk/blob/master/localization/Localizable_EN.strings). -## Media Callbacks +## Completing a session + +### Media Callbacks + +#### Introduction -### Introduction Onfido provides the possibility to integrate with our Smart Capture SDK, without the requirement of using this data only through the Onfido API. Media callbacks enable you to control the end user data collected by the SDK after the end user has submitted their captured media. As a result, you can leverage Onfido’s advanced on-device technology, including image quality validations, while still being able to handle end users’ data directly. This unlocks additional use cases, including compliance requirements and multi-vendor configurations, that require this additional flexibility. **This feature must be enabled for your account.** Please contact your Onfido Solution Engineer or Customer Success Manager. -### Implementation +#### Implementation To use this feature, use `Onfido.addCustomMediaCallback` and provide the callback. ```javascript @@ -544,7 +465,7 @@ Onfido.addCustomMediaCallback( ); ``` -### User data +#### User data The callbacks return an object including the information that the SDK normally sends directly to Onfido. The callbacks are invoked when the end user confirms submission of their image through the SDK’s user interface. **Note:** Currently, end user data will still automatically be sent to the Onfido backend, but you are not required to use Onfido to process this data. @@ -581,7 +502,7 @@ These can be `DOCUMENT`, `FACE` or `VIDEO`. ``` **Note:** `fileData` is a String representation of the byte array data corresponding to the captured live photo. -3. For videos(`captureType` is `VIDEO`), the callback returns: +3. For live videos (`captureType` is `VIDEO`), the callback returns: ```json5 { captureType: String @@ -598,180 +519,164 @@ let byteArrayString = mediaResult.fileData; let base64FileData = Onfido.byteArrayStringToBase64(byteArrayString); ``` -## Generating verification reports +### Generating verification reports -While the SDK is responsible for capturing and uploading document photos, live selfies, live videos and motion captures, identity verification reports themselves are generated based on workflows created using [Onfido Studio](https://developers.onfido.com/guide/onfido-studio-product). +While the SDK is responsible for capturing and uploading the user's media and data, identity verification reports themselves are generated based on workflows created using [Onfido Studio](https://developers.onfido.com/guide/onfido-studio-product). For a step-by-step walkthrough of creating an identity verification using Onfido Studio and our SDKs, please refer to our [Quick Start Guide](https://developers.onfido.com/guide/quick-start-guide). -Alternatively, you can [create checks](https://documentation.onfido.com/#create-check) and [retrieve report results](https://documentation.onfido.com/#retrieve-report) manually using the Onfido API. You can also configure [webhooks](https://documentation.onfido.com/#webhooks) to be notified asynchronously of report results. - -**Note**: If you're using API v2 for API calls, please check out [API v2 to v3 migration guide](https://developers.onfido.com/guide/v2-to-v3-migration-guide#checks-in-api-v3) to understand which changes need to be applied before starting to use API v3. - -**Note**: If you are testing with a sandbox token, please be aware that report results are pre-determined. You can learn more about sandbox responses [here](https://documentation.onfido.com/#pre-determined-responses). - -## Theme Customization - -### Android - -Onfido SDK supports the dark theme. By default, the user's active device theme will be -automatically applied to the Onfido SDK. However, you can opt out from dynamic theme switching at run time -and instead set a theme statically at the build time. In this case, the flow will always be in displayed -in the selected theme regardless of the user's device theme. To set a static theme, use the `theme` parameter in the SDK -initialization config. The value type should be `OnfidoTheme`. -Valid values in `OnfidoTheme` are: `AUTOMATIC` (default value), `LIGHT`, `DARK`. - -You can customize the SDK's appearance by overriding Onfido's light and dark themes (`OnfidoActivityTheme` and `OnfidoDarkTheme`) -in `app/src/main/res/values/styles.xml` or `app/src/main/res/values/themes.xml` in the `android` directory of your project. -Make sure to set `OnfidoBaseActivityTheme` as the parent of `OnfidoActivityTheme` and `OnfidoBaseDarkTheme` as the parent of `OnfidoDarkTheme` in your style definition. - -You can use the following snippet as an example: - -```xml - - - - - -``` - -The following attributes are currently supported: - -* `onfidoColorToolbarBackground`: Background color of the `Toolbar` which guides the user through the flow - -* `colorPrimaryDark`: Color of the status bar (with system icons) above the `Toolbar` - -* `onfidoColorContentToolbarTitle`: Color of the `Toolbar`'s title text - -* `onfidoColorContentMain`: Color of primary texts on screen, e.g. titles and regular body texts - -* `onfidoColorContentSecondary`: Color of secondary texts on screen, e.g. subtitles - -* `onfidoColorContentNegative`: Color of error texts - -* `onfidoColorActionMain`: Background color of primary buttons - -* `onfidoColorActionMainPressed`: Background color of primary buttons when pressed +If your application initializes the Onfido React Native SDK using the options defined in the [Advanced customization](#advanced-flow-customization) section of this document, you may [create checks](https://documentation.onfido.com/#create-check) and [retrieve report results](https://documentation.onfido.com/#retrieve-report) manually using the Onfido API. +You may also configure [webhooks](https://documentation.onfido.com/#webhooks) to be notified asynchronously when the report results have been generated. -* `onfidoColorActionMainDisabled`: Background color of primary buttons when disabled +## Advanced flow customization -* `onfidoColorContentOnAction`: Text color of primary buttons +This section on 'Advanced customization' refers to the process of initializing the Onfido React Native SDK without the use of Onfido Studio. This process requires a manual definition of the verification steps and their configuration. -* `onfidoColorContentOnActionDisabled`: Text color of primary buttons when disabled +The flow step parameters described below are mutually exclusive with `workflowRunId`, requiring an alternative method of instantiating the client and starting the flow. -* `onfidoColorActionSecondary`: Background color of secondary buttons +**Note** that this initialization process is **not recommended** as the majority of new features are exclusively released for Studio workflows. -* `onfidoColorActionSecondaryPressed`: Background color of secondary buttons when pressed +### Manually building the configuration object -* `onfidoColorActionSecondaryDisabled`: Background color of secondary buttons when disabled +You can launch the app with a call to `Onfido.start`, manually defining the verification steps and configurations required for your flow: -* `onfidoColorContentOnActionSecondary`: Text color of secondary buttons - -* `onfidoColorContentOnActionSecondaryDisabled`: Text color of secondary buttons when disabled +```javascript +import React, {Component} from 'react'; +import {Button, View} from 'react-native'; +import { + Onfido, + OnfidoCaptureType, + OnfidoCountryCode, + OnfidoDocumentType, +} from '@onfido/react-native-sdk'; -* `onfidoColorActionSecondaryBorder`: Border of the secondary buttons +export default class App extends Component { + startSDK() { + Onfido.start({ + sdkToken: "", + flowSteps: { + welcome: true, + captureFace: { + type: OnfidoCaptureType.VIDEO, + }, + captureDocument: { + docType: OnfidoDocumentType.DRIVING_LICENCE, + countryCode: OnfidoCountryCode.GBR + }, + }, + }) + .then(res => console.warn('OnfidoSDK: Success:', JSON.stringify(res))) + .catch(err => console.warn('OnfidoSDK: Error:', err.code, err.message)); + } -* `onfidoColorActionSecondaryBorderDisabled`: Border of the secondary buttons when disabled + render() { + return ( + +