Importar módulos nativos

Como Usar o Módulo Nativo CafSmartAuth no React Native

Este guia detalhado explica como integrar o CafSmartAuth módulo nativo no seu projeto React Native usando TypeScript. Ele inclui a criação de um módulo e de um hook personalizado para gerenciar eventos e métodos fornecidos pelo SDK nativo.

1. Crie o module.ts Arquivo

Este arquivo importa o módulo nativo e configura um NativeEventEmitter para lidar com os eventos emitidos pelo módulo.

Exemplo de implementação

import { NativeModules, NativeEventEmitter, Platform } from 'react-native';

const IS_ANDROID = Platform.OS === 'android';

const module = NativeModules.CafSmartAuthBridgeModule;

const moduleEventEmitter = IS_ANDROID
  ? new NativeEventEmitter()
  : new NativeEventEmitter(module);

export { module, moduleEventEmitter };

2. Crie o useSmartAuth.ts Hook

Este hook gerencia os eventos e o estado associados ao CafSmartAuth módulo. Ele usa o moduleEventEmitter para ouvir os eventos emitidos pelo módulo nativo.

Funções Principais

• formattedOptions: Formata as configurações enviadas ao módulo nativo em formato JSON.
• useSmartAuth: Hook que:

  • Escuta os eventos emitidos pelo módulo nativo.
  • Atualiza o estado do React com base nos eventos.
• startSmartAuth: Método para iniciar a autenticação usando o módulo nativo.
• requestLocationPermissions: Método para solicitar permissões de localização ao usuário.

Exemplo de implementação

import { useState, useEffect } from 'react';

import { module, moduleEventEmitter } from '../modules/CafSmartAuth';

import {
  CafSmartAuthSettings,
  CafSmartAuthResponse,
  CafSmartAuthSuccess,
  CafSmartAuthPending,
} from '../hooks/types';

let responseFormattedOptions: string = '';

const formattedOptions = (settings: CafSmartAuthSettings): string => {
  const formatToJSON = JSON.stringify({
    ...settings,
  });

  return formatToJSON;
};

const useSmartAuth = (settings?: CafSmartAuthSettings) => {
  const [response, setResponse] = useState<CafSmartAuthResponse>({
    success: {
      isAuthorized: false,
      attemptId: null,
      attestation: null,
    },
    error: null,
    cancelled: false,
    isLoading: false,
    pending: {
      isAuthorized: false,
      attestation: null,
    },
  });

  responseFormattedOptions = formattedOptions(settings!);

  useEffect(() => {
    moduleEventEmitter.addListener(
      'CafSmartAuth_Success',
      (event: CafSmartAuthSuccess) => {
        setResponse({
          success: {
            isAuthorized: event.isAuthorized,
            attemptId: event.attemptId,
            attestation: event.attestation,
          },
          error: null,
          cancelled: false,
          isLoading: false,
          pending: {
            isAuthorized: false,
            attestation: null,
          },
        });
      },
    );

    moduleEventEmitter.addListener('CafSmartAuth_Error', (event: string) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: event,
        cancelled: false,
        isLoading: false,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    moduleEventEmitter.addListener('CafSmartAuth_Cancel', (event: boolean) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: null,
        cancelled: event,
        isLoading: false,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    moduleEventEmitter.addListener(
      'CafSmartAuth_Pending',
      (event: CafSmartAuthPending) => {
        setResponse({
          success: {
            isAuthorized: false,
            attemptId: null,
            attestation: null,
          },
          error: null,
          cancelled: false,
          isLoading: false,
          pending: {
            isAuthorized: event.isAuthorized,
            attestation: event.attestation,
          },
        });
      },
    );

    moduleEventEmitter.addListener('CafSmartAuth_Loading', (event: boolean) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: null,
        cancelled: false,
        isLoading: event,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    moduleEventEmitter.addListener('CafSmartAuth_Loaded', (event: boolean) => {
      setResponse({
        success: {
          isAuthorized: false,
          attemptId: null,
          attestation: null,
        },
        error: null,
        cancelled: false,
        isLoading: event,
        pending: {
          isAuthorized: false,
          attestation: null,
        },
      });
    });

    return () => {
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Success');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Pending');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Error');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Cancel');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Loading');
      moduleEventEmitter.removeAllListeners('CafSmartAuth_Loaded');
    };
  }, []);

  return {
    success: response.success,
    error: response.error,
    cancelled: response.cancelled,
    pending: response.pending,
    isLoading: response.isLoading,
  };
};

const startSmartAuth = (
  mfaToken: string,
  faceAuthToken: string,
  policyId: string,
  personId: string,
) => {
  module.startSmartAuth(
    mfaToken,
    faceAuthToken,
    personId,
    policyId,
    responseFormattedOptions,
  );
};

const requestLocationPermissions = async () => {
  await module.requestLocationPermissions();
};

export { startSmartAuth, requestLocationPermissions, useSmartAuth };

3. Métodos Disponíveis

• useSmartAuth: Um hook que fornece os seguintes estados:

  • sucesso: Informações sobre autenticações bem-sucedidas.
  • error: Detalhes sobre os erros ocorridos.
  • cancelado: Indica se a operação foi cancelada.
  • pendente: Informações sobre autenticações pendentes.
  • isLoading: Indica se a autenticação está em andamento.
• startSmartAuth: Método para iniciar o processo de autenticação.

  • Parâmetros:

    • mfaToken: Token de autenticação multifator.
    • faceAuthToken: Token para autenticação facial.
    • policyId: ID da política de autenticação.
    • personId: ID da pessoa a ser autenticada.
• requestLocationPermissions: Método para solicitar permissões de localização ao usuário (somente Android).

4. Integração do Projeto

Veja como implementar o hook em seu projeto, siga Código-fonte