如何实现反应原生 otp 检索器并为应用程序生成哈希键答案

【问题标题】：How to Implement react native otp retriever and generate hash key for application如何实现反应原生 otp 检索器并为应用程序生成哈希键
【发布时间】：2019-09-24 08:35:53
【问题描述】：

React Native 初学者

我正在尝试使用 react-native-sms-retriever 自动验证 OTP 我在项目中实现了以下示例

Example implemented 这个例子不是获取哈希键的方法。您必须通过执行命令手动获取它

当我执行命令时，它不会要求输入密码。应该问because of here it is

我已经使用下面的命令生成了 debug hash key 在“java/bin”文件夹中执行。但它不是

keytool -exportcert -alias androiddebugkey -keystore '~\.android\debug.keystore' | xxd -p | tr -d "[:space:]" | echo -n com.opick.app cat | sha256sum | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11

如何为发布构建生成哈希键尝试以下返回错误的键

keytool -exportcert -alias my-key-alias -keystore my-key.keystore | xxd -p | tr -d "[:space:]" | echo -n com.opick.app `cat` | sha256sum | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11

我已经阅读了他们说你需要在上面的命令中为release keystore 添加path 的文件。对于我来说我不工作，请更新相同

主要挑战是cmd 和bash 上生成的密钥不同

【问题讨论】：

您面临哪些问题？
@RishavKumar 解决方案在 `SmsRetriever.addSmsListener((event)=>{console.log('registeredOtp'+" "+event.message);}` 上给出超时异常
我在等这个。您的哈希码不正确。请尝试检索正确的十六进制代码。调试构建和生产构建是不同的。我遇到过这种情况。 :)
我更新了我的答案，请看。 github.com/Bruno-Furtado/react-native-sms-retriever/issues/4
总是，你无法隐藏

标签： react-native react-native-android one-time-password sms-verification

【解决方案1】：

我已经尝试了两个三个示例，但我无法为 release 和 debug 获得 hash key，然后我尝试了以下解决方案它工作得很好。您也可以使用此代码获取hash key，然后您可以继续实施

react-native-otp-verify

以下代码将为您提供发布和调试 apk 的哈希密钥，只需获取密钥并将其复制到某处以供使用

import RNOtpVerify from 'react-native-otp-verify';

getHash = () =>
   RNOtpVerify.getHash()
  .then(console.log)
  .catch(console.log);

startListeningForOtp = () =>
    RNOtpVerify.getOtp()
    .then(p => RNOtpVerify.addListener(this.otpHandler))
    .catch(p => console.log(p));

otpHandler = (message: string) => {
    const otp = /(\d{4})/g.exec(message)[1];
    this.setState({ otp });
    RNOtpVerify.removeListener();
    Keyboard.dismiss();
  }

 componentWillUnmount() {
   RNOtpVerify.removeListener();
 }

【讨论】：

如何测试它是否正常工作。我正在尝试从另一部手机以确切的格式和哈希将 SMS 发送到手机，但它没有检测到 OTP。

【解决方案2】：

import SmsRetriever from 'react-native-sms-retriever';

// Get the phone number (first gif)
 _onPhoneNumberPressed = async () => {
  try {
    const phoneNumber = await SmsRetriever.requestPhoneNumber();
  } catch (error) {
    console.log(JSON.stringify(error));
  }
 };

// Get the SMS message (second gif)
_onSmsListenerPressed = async () => {
  try {
    const registered = await SmsRetriever.startSmsRetriever();
    if (registered) {
      SmsRetriever.addSmsListener(event => {
        console.log(event.message);
        SmsRetriever.removeSmsListener();
      }); 
    }
  } catch (error) {
    console.log(JSON.stringify(error));
  }
};

超时错误请见：https://github.com/Bruno-Furtado/react-native-sms-retriever/issues/4

【讨论】：

使用这个库。我已经亲自使用并得到了结果
这个短信需要权限吗？
我们可以在不违反短信/日志权限政策的情况下将应用上传到 Play 商店吗
不，这就是需要它的原因。无需权限，Play 商店允许这样做，因为它使用谷歌 API
当然，你需要找出你的应用的生产十六进制密钥并用短信发送

【解决方案3】：

有一篇很棒的文章教程介绍了如何在 React Native 中实现 OTP 自动验证而无需获得许可。

Link1

但为此，您需要生成 11 位唯一哈希密钥。你会在link2中找到它；

Link2

【讨论】：

【解决方案4】：

react-native-otp-verify 就像一个魅力:)。好东西，它还为您提供了哈希值。您需要做的就是在短信末尾附加哈希值。

【讨论】：