Как использовать response-native-otp-auto-verify для автоматического обнаружения OTP в React Native (Android) ⇐ IOS

[Anonymous]

Вот сообщение, готовое к переполнению стека, которое вы можете опубликовать.

Я использую react-native-otp-auto-verify для автоматического определения OTP из SMS в моем приложении React Native. Ниже приведено полное руководство по настройке для Android с использованием официального API SMS Retriever.

Что такое response-native-otp-auto-verify?

Код: Выделить всё

react-native-otp-auto-verify

 — это библиотека React Native, которая обеспечивает автоматическое обнаружение OTP на Android с использованием официального API Google SMS Retriever.
Она:

• НЕ требует READ_SMS
• НЕ требует RECEIVE_SMS
• Соответствует ли Play Store
• Работает автоматически, когда SMS содержит хэш вашего приложения.
• НЕ читает SMS автоматически на iOS (поддерживается только автозаполнение с клавиатуры)
  
  https://www.npmjs.com/package/react-nat ... Tab=readme
  
  https://github.com/kailas-rathod/react- ... me-ov-file

Шаг 1 — Установить

Код: Выделить всё

npm install react-native-otp-auto-verify

Для iOS:

Код: Выделить всё

cd ios && pod install

Шаг 2. Получите хэш приложения (очень важно)
Ваша серверная часть должна добавить хэш для конкретного приложения в конце OTP SMS.
Получите хэш внутри вашего приложения:

Код: Выделить всё

import { getHash } from 'react-native-otp-auto-verify';
import { useEffect } from 'react';

useEffect(() => {
getHash().then(hash => {
console.log('App Hash:', hash);
});
}, []);

Отправьте этот хэш своей серверной команде.

Шаг 3. Требуемый формат SMS
Ваше OTP SMS должно выглядеть следующим образом:

Код: Выделить всё

 Your verification code is 123456
FA+9qCX9VSu

Без хэша автоматическое обнаружение НЕ будет работать.

Шаг 4. Использование Hook API (рекомендуется)

Код: Выделить всё

import React, { useEffect } from 'react';
import { Text } from 'react-native';
import { useOtpVerification } from 'react-native-otp-auto-verify';

export default function OtpScreen() {
const { otp, startListening, stopListening } =
useOtpVerification({ numberOfDigits: 6 });

useEffect(() => {
startListening();
return () => stopListening();
}, []);

return OTP: {otp};
}

При поступлении SMS:

• OTP извлекается автоматически

• Код: Выделить всё

  otp

  обновления состояния
• Вы можете автоматически отправить подтверждение

Шаг 5. Альтернативный императивный API

Код: Выделить всё

import {
startOtpListener,
removeListener,
} from 'react-native-otp-auto-verify';

useEffect(() => {
startOtpListener(message => {
const otp = message.match(/\d{6}/)?.[0];
console.log('OTP:', otp);
removeListener();
});

return () => removeListener();
}, []);

Примечание для iOS
iOS НЕ позволяет приложениям автоматически читать SMS.
Вместо этого используйте:

Код: Выделить всё

Это включает предложение автозаполнения OTP с клавиатуры.

Код: Выделить всё

Код: Выделить всё

Feature               Android iOS
Automatic OTP detection ✅   ❌
SMS Permission Required ❌   ❌
Keyboard OTP Autofill   ❌   ✅

Эта настройка обеспечивает безопасный процесс автоматической проверки OTP без разрешения для Android с использованием официального механизма SMS Retriever.
https://www.npmjs.com/package/react-nat ... Tab=readme


Подробнее здесь: https://stackoverflow.com/questions/798 ... -react-nat