How to Implement react native otp retriever and generate hash key for application

问题

Beginner to React native

I am trying to verify OTP automatically using react-native-sms-retriever I have implemented following example in project

Example implemented This exampleis not provudung way to get hash key. you have to get it manually by executing command

When I execute command, it won't ask for password. It should ask because of here it is

I have generated debug hash key using bellow command executed in 'java/bin' folder. But its not

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

How to generate hash key for release build tried following returns wrong key

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

I have read document they says you need to add path for release keystore in above command.for me i is not working please update on same

Main challenge is the generated key is different on cmd and bash

回答1:

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));
  }
};

For timeout error please see : https://github.com/Bruno-Furtado/react-native-sms-retriever/issues/4

回答2:

I have tried two three examples but I was not able to get the hash key for release ad debug then I have tried following solution It worked perfectly. Also you can use this code to get hash key and you can continue with your implementation

react-native-otp-verify

The following code will give you hash key for both release and debug apk just get the key and copy it somewhere for use

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();
 }

来源：https://stackoverflow.com/questions/58076214/how-to-implement-react-native-otp-retriever-and-generate-hash-key-for-applicatio