在 React Native 中使用 *react-native-otp-auto-verify 自动读取 OTP

发布: 2天前 (2026年3月18日 GMT+8 18:34)

4 分钟阅读

Source: Dev.to

react-native-otp-auto-verify

移动应用中一个小而痛的用户体验问题是 OTP（一次性密码）验证。
传统上，用户必须手动输入短信中的 4–6 位验证码，这会导致流程中断和用户沮丧。

react-native-otp-auto-verify 是一个库，能够在 Android 上自动监听收到的短信并在 OTP 到达时提取出来——无需手动输入 ✨。
它使用 Android 的 SMS Retriever API 来：

监听包含 OTP 的来短信。
在不需要用户交互的情况下提取 OTP 代码（例如 4–6 位）。
提供简易的 Hook 和命令式 API 供监听使用。

注意： 仅在 Android 上可用；出于安全/隐私原因，iOS 不允许任意读取短信。

工作原理

生成应用哈希

库提供了一个方法用于生成应用的哈希值，你必须将该哈希嵌入后端发送的 OTP 短信内容中。

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

const [hash] = await getHash(); // e.g., "AbCdEfGhIjK"

正确格式化短信

短信必须在结尾处包含该哈希，并以 “ 为前缀，以满足 SMS Retriever 的格式要求。

 Your verification code is 123456
AbCdEfGhIjK

只有包含此哈希的消息才会被投递给应用。

监听并提取代码

你可以使用提供的 Hook 或命令式监听器。

Hook 示例

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

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

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

  return (
    
      {otp ?? "Waiting for SMS…"}
    
  );
}

命令式监听器示例

import { activateOtpListener, removeListener } from "react-native-otp-auto-verify";

const handler = (code) => {
  console.log("Received OTP:", code);
};

activateOtpListener(handler);

// 当不再需要监听时
removeListener();

API 概览

Function	Description
`getHash()`	返回用于嵌入短信的 Android 应用哈希。
`useOtpVerification(options)`	Hook，负责启动/停止监听并提供 OTP、超时错误等信息。
`activateOtpListener(handler)`	命令式监听器，会在提取到 OTP 时调用 `handler`。
`removeListener()`	手动移除当前激活的监听器。
`extractOtp(sms, numberOfDigits)`	从原始短信字符串中解析 OTP 的工具函数。

替代方案与兼容性

还有其他包（例如 react-native-otp-verify），但多数已过时或不支持新版 React Native 架构。
react-native-otp-auto-verify 兼容 React Native ≥ 0.60+，并支持自动链接（autolinking）。

重要注意事项

短信必须包含应用哈希；否则平台不会投递该短信。
监听器大约在 5 分钟后超时——请在 UI 中处理重试逻辑。

安装

npm install react-native-otp-auto-verify

使用摘要

在客户端 生成应用哈希（getHash）。
在后端发送的 OTP 短信中 加入哈希（参见上面的格式）。
在 React Native 组件中 启动监听器（使用 Hook 或命令式 API）。
当短信到达时 自动收到 OTP。

资源

完整代码与文档：react‑native‑otp‑auto‑verify on GitHub