react native中的Otp验证

mctunoxg  于 2023-03-19  发布在  React
关注(0)|答案(2)|浏览(137)

我想在我的react原生应用中实现自动填充otp,我已经用“react-native-otp-verify”实现了这个,但是它需要哈希来捕获otp,我已经找到了几个其他的软件包,它们都需要在sms中有一个哈希代码来读取它,但是我不想用哈希。(因为我没有看到任何散列代码在OTP短信的日常使用的应用程序)有没有任何软件包可以捕获OTP不使用散列或如果有一个替代的方式来做到这一点?请抛出一些光在这一点上。

zf9nrax1

zf9nrax11#

我使用了另一种方法来检测传入消息,您可以从该消息中提取OTP
你可以使用react-本机-android-sms-listener

SmsListener.addListener(message => {
    //put your code to capture message & verify
});
czq61nw1

czq61nw12#

我使用了@twotalltotems/react-native-otp-input npm包

import OTPInput from "@twotalltotems/react-native-otp-input";
import {Alert} from "react-native"

<OTPInput
    placeholderTextColor="#e2379"
    placeholderCharacter="0"
    // how many digits 
    pinCount={6}
    // define style for the input
    codeInputFieldStyle={styles.otpInput}
    codeInputHighlightStyle={styles.otpActivaInputBox}
    onCodeFilled={code => {
        confirmCode(code);
    }}

定义confirmCode

const confirmCode = async (code: string) => {
    try {
        await yourConfirmSignUpLogic();
        // if confirmed successfully navigate to "Login"
        navigation.navigate("Login");
        Alert.alert("Success", "You can now login");
    } catch (e) {
        Alert.alert("Error", e.message || "Authentication failed");
    }
};

从文件上看
在Android上,当你按下通知栏中的复制代码按钮(见上面的GIF)时,它会自动填充。只有在加载视图后发送代码时,它才会这样做。因此,请确保在加载此视图后请求代码。

相关问题