Documentação
CLEARSALE

SDK React Native Liveness

v1.1.0

Suggest Edits

🚧

A partir da release 1.1.0 (08/10/2024), foi implementado um novo método opcional de autenticação via token resgatado da autenticação via Plataforma Data Trust nos SDKs nativos. Recomenda-se que todos façam a alteração, pois, futuramente, será o único método.

🚧

A release 1.1.0 somente é compatível com as versões dos SDKs disponibilizadas a partir de 08/10/2024 (Android 2.0.18 e iOS 2.0.8).

Como obter o accessToken e transactionId?

  • accessToken: Faça a autenticação seguindo as instruções da API DataTrust e obtenha o token do retorno.
  • transactionId: Crie uma transação seguindo as instruções da API DataTrust e obtenha o id do retorno.

Introdução

O objetivo deste manual é fornecer todas as informações necessárias para instalação e uso da ferramenta nos aplicativos desenvolvidos para plataforma React Native.

Este SDK realiza a captura de faces para processamento de Liveness pela ClearSale. Todas as informações coletadas são dados relacionados apenas ao dispositivo, sem relação ao aplicativo integrado.

As informações de captura de imagem dependem da permissão concedida pelo usuário no momento de captura. Neste caso é necessário que o aplicativo solicite o acesso à câmera ao usuário para dar prosseguimento à coleta de prova de vida.

O SDK respeita a política de privacidade da Google para a captura dos dados do dispositivo e o nível de permissão atribuído pelo usuário (usuário do dispositivo).

Instalação

npm install csliveness-react-native

"dependencies": {
   ...
   "csliveness-react-native": "git+https://github.com/ClearSale/LivenessReactNativePlugin.git",
   ...
}

Android

Adicione um arquivo clearsale.gradle.env na raiz do seu projeto de react-native.
Esse arquivo deve conter as seguintes propriedades:

CS_LIVENESS_TEC_ARTIFACTS_FEED_URL= // fornecido pela clearsale
CS_LIVENESS_TEC_ARTIFACTS_FEED_NAME= // fornecido pela clearsale
CS_LIVENESS_TEC_USER= // fornecido pela clearsale
CS_LIVENESS_TEC_PASS= // fornecido pela clearsale
CS_LIVENESS_VERSION= // fornecido pela clearsale

🚧

Para aplicações que usam o framework Expo é necessário acesso aos diretórios nativos e adição do seguintes repositórios no arquivo build.gradle do seu projeto (isso é necessário caso você deseje rodar a partir da Expo CLI - caso você rode pelo Android Studio, isso não é necessário):

def setupEnvFile(searchParam) {
    if (searchParam !== null && System.properties[searchParam] !== null) {
        return System.properties[searchParam]
    }
 
    if (System.properties['ENV_FILE_PATH'] == null) {
        // First try searching on project root.
        def projectFileEnv = new File("$rootProject.rootDir/../clearsale.gradle.env")
        def projectFileEnvExists = projectFileEnv.exists()
        if (projectFileEnvExists) {
            System.properties['ENV_FILE_PATH'] = projectFileEnv.path
        } else {
            System.properties['ENV_FILE_PATH'] = System.env.DIRNAME ?: System.env.PWD + "/../clearsale.gradle.env"
        }
    }
 
    file(System.properties['ENV_FILE_PATH']).readLines().each() {
        def (key, value) = it.tokenize('=');
        if (key !== null && value !== null) {
            System.properties[key] = value
        } else {
            throw new InvalidUserDataException("[CSLIVENESS SDK] - Invalid value for clearsale.gradle.env. Received key: $key, value: $value")
        }
    }
 
    if (searchParam !== null) {
        return System.properties[searchParam]
    }
 
    return null
}
 
setupEnvFile()
 
rootProject.allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url System.properties['CS_LIVENESS_TEC_ARTIFACTS_FEED_URL']
            name System.properties['CS_LIVENESS_TEC_ARTIFACTS_FEED_NAME']
            credentials {
                username System.properties['CS_LIVENESS_TEC_USER']
                password  System.properties['CS_LIVENESS_TEC_PASS']
            }
            authentication {
                basic(BasicAuthentication)
            }
        }
    }
}

iOS

No arquivo Podfile de seu projeto adicione o seguinte código:

platform :ios, '15.0'

use_frameworks!

target 'NOME_DO_SEU_PROJETO' do
  pod 'CSLivenessSDK', :git => 'URL DO REPOSITÓRIO ENVIADO PELA CLEARSALE', :tag => 'VERSÃO AQUI' #PAT fornecido pela ClearSale
end

Adicione também no seu Info.plist a seguinte entrada:

<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>

Instruções de uso

Importe o plugin no seu projeto e use o useCSLiveness hook para receber uma função open que irá chamar a SDK nativa do dispositivo.

O resultado da função open é uma promise que pode retornar os seguintes valores:

type CSLivenessResult = {
  real: boolean;
  responseMessage?: string; // Android only
  sessionId: string | null;
  image: string | null;
};

🚧

A propriedade responseMessage é retornada somente no Android. Em caso de erro, a promise será rejeitada com o motivo do erro em ambas as plataformas.

Exemplo de uso

import { useCSLiveness } from 'csliveness-react-native';

const ReactComponent = () => {
  const [transactionId, setTransactionId] = React.useState<string>('');
  const [accessToken, setAccessToken] = React.useState<string>('');
  const { open: openCsLivenessSdk } = useCSLiveness();

  ...


  return <TouchableOpacity
    style={styles.button}
    onPress={async () => {
      try {
        const { real, responseMessage, sessionId, image } = await openCsLivenessSdk({
          transactionId,
          accessToken,
          vocalGuidance,
          primaryColor,
          secondaryColor,
          titleColor,
          paragraphColor,
        });

        console.log(`Received responseMessage: ${responseMessage}`);
        console.log(`Received sessionId: ${sessionId}`);
        console.log(`Received image: ${image}`);
      } catch (e) {
        console.error(e);
        Alert.alert(
          'SDKError',
          'Something went wrong, check you dev console',
          [{ text: 'OK' }]
        );
      }
    }}
  >
    <Text style={styles.buttonTitle}>Open CSLiveness</Text>
  </TouchableOpacity>
}

import { useCSLiveness } from 'csliveness-react-native';

const ReactComponent = () => {
  const [clientId, setClientId] = React.useState<string>('');
  const [clientSecretId, setClientSecretId] = React.useState<string>('');
  const { open: openCsLivenessSdk } = useCSLiveness();

  ...


  return <TouchableOpacity
    style={styles.button}
    onPress={async () => {
      try {
        const { real, responseMessage, sessionId, image } = await openCsLivenessSdk({
          clientId,
          clientSecretId,
          identifierId,
          cpf,
          vocalGuidance,
          primaryColor,
          secondaryColor,
          titleColor,
          paragraphColor,
        });

        console.log(`Received responseMessage: ${responseMessage}`);
        console.log(`Received sessionId: ${sessionId}`);
        console.log(`Received image: ${image}`);
      } catch (e) {
        console.error(e);
        Alert.alert(
          'SDKError',
          'Something went wrong, check you dev console',
          [{ text: 'OK' }]
        );
      }
    }}
  >
    <Text style={styles.buttonTitle}>Open CSLiveness</Text>
  </TouchableOpacity>
}

Executando o aplicativo de exemplo (sample)

  1. Conecte um dispositivo físico (Android ou iOS - o nosso SDK não roda em emuladores, apenas em dispositivos físicos) à sua máquina de desenvolvimento.
  2. Clone esse repositório e rode yarn. Como esse projeto usa yarn workspaces, deve-se usar o comando yarn para instalar as dependências.
  3. Coloque suas credenciais no arquivo clearsale.gradle.env (crie ele e adicione as informações conforme descrito na etapa de instalação) na raiz do projeto de exemplo e adicione também as credenciais no arquivo example/ios/Podfile.
  4. Rode yarn example android|ios (no caso do iOS é necessário rodar pod install na pasta example/ios primeiro).
  • Caso queira rodar com o Android Studio o app de Android, é só abrir a pasta example/android no Android Studio.
  • Caso queira rodar com o XCode o app de iOS, é só abrir o CslivenessReactNativeExample.xcworkspace/ com o XCode.
  1. Ao pressionar o botão Open CSLiveness o SDK Liveness iniciará. Após completar o fluxo o aplicativo retornará o real, responseMessage, image e sessionId.

Detalhes de privacidade

Uso de dados

Todas as informações coletadas pelo SDK da ClearSale são com exclusiva finalidade de prevenção à fraude e proteção ao próprio usuário, aderente à política de segurança e privacidade das plataformas Google e Apple e à LGPD. Por isso, estas informações devem constar na política de privacidade do aplicativo.

Tipo de dados coletados

O SDK da ClearSale coleta as seguintes informações do dispositivo :

  • Características físicas do dispositivo/ hardware (Como tela, modelo, nome do dispositivo);
  • Características de software (Como versão, idioma, build, controle parental);
  • Informações da câmera;
  • Licença de Uso;

Licença

Ao realizar o download e utilizar nosso SDK você estará concordando com a seguinte licença:

Todos os direitos são reservados, sendo concedida a permissão para usar o software da maneira como está, não sendo permitido qualquer modificação ou cópia para qualquer fim. O Software é licenciado com suas atuais configurações “tal como está” e sem garantia de qualquer espécie, nem expressa e nem implícita, incluindo mas não se limitando, garantias de comercialização, adequação para fins particulares e não violação de direitos patenteados. Em nenhuma hipótese os titulares dos Direitos Autorais podem ser responsabilizados por danos, perdas, causas de ação, quer seja por contrato ou ato ilícito, ou outra ação tortuosa advinda do uso do Software ou outras ações relacionadas com este Software sem prévia autorização escrita do detentor dos direitos autorais.

Copyright © 2022 ClearSale

Updated about 1 month ago