短信代码已过期。请重新发送验证码重试

Question

每当我尝试使用 react-native-firebase sdk 使用电话号码登录时，我都会通过短信收到 OTP 代码，当我提交收到的代码时，会出现错误消息：“短信代码已过期。请重新发送验证码再试一次。” 在这里要注意的是，即使出现错误，相应电话号码的条目也会写入 firebase 的“用户”部分。

我正在使用以下内容：

NodeJS: v8.11.1,
NPM: v5.6.0,
react-native: "^0.59.9",
react-native-firebase: "^5.5.3"

我已经尝试过的一些链接是：

1. https://github.com/invertase/react-native-firebase- 
docs/blob/master/docs/auth/phone-auth.md
2. /sf/ask/3256590851/ 
authentication-error-the-sms-code-has-expired
3. https://www.bountysource.com/issues/45308170-firebase-phone- 
number-auth-integration
4. https://medium.com/@chrisbianca/getting-started-with-firebase- 
authentication-on-react-native-a1ed3d2d6d91
5. https://invertase.io/oss/react-native-firebase/v6/auth/phone- 
auth

在 MobileRegistration.js 中：

navigateToOtpScreen() {
console.log("Phone number: ", "+91" + this.state.phoneNumber)
firebase.auth().signInWithPhoneNumber("+91" + 
this.state.phoneNumber)
.then(confirmResult => {
   this.setState({ confirmResult, message: 'Code has been sent!'})
   this.props.navigation.navigate('EnterOtp', { 'confirmResult': 
   confirmResult})
 })
 .catch(error => {
      alert(error.message);
      this.setState({ message: `Sign In With Phone Number Error: 
      ${error.message}` })
  });

};

在 EnterOtp.js 中：

componentDidMount() {
this.unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    alert(JSON.stringify(user));
    if (user) {
        this.setState({
            user: user.toJSON()
        });
    } else {
        // User has been signed out, reset the state
        this.setState({
            user: null,
            message: '',
            otp: '',
            otp1: '',
            otp2: '',
            otp3: '',
            otp4: '',
            otp5: '',
            otp6: ''

        });
    }
});

}

componentWillUnmount() {
if (this.unsubscribe) this.unsubscribe();

}

verifyOTP = async () => {
const {
    confirmResult,
} = this.props.navigation.state.params;
let otp = this.state.otp + "" + this.state.otp1 + "" + this.state.otp2 + "" + this.state.otp3 + "" + this.state.otp4 + "" + this.state.otp5 + "" + this.state.otp6
if (confirmResult && otp.length) {

    alert(otp);
    confirmResult.confirm(otp).then((user) => {
            AsyncStorage.setItem('accessToken', confirmResult._verificationId);
            this.props.navigation.navigate('SetupCoverVideo');
            this.setState({
                message: 'Code Confirmed!'
            });
        })
        .catch(error => {
            alert(error.message) && this.setState({
                message: `Code Confirm Error: ${error.message}`
            })
        });
}

}

预期结果：应验证代码，并且条目应位于 firebase 的“用户”部分并导航到 SetupCoverVideo。

实际结果：遇到错误提示：“短信验证码已过期，请重新发送验证码重试。” 在这里要注意的是，即使出现错误，相应电话号码的条目也会写入 firebase 的“用户”部分。

我想知道解决方案。任何人请帮助我。

Answer 1

显然，一些最新版本的 Android 足够智能，可以接收 SMS 验证码并使用它来验证用户。此身份验证在后台进行，而用户仍会收到 SMS 中的验证码。当用户尝试输入验证码时，他/她收到验证码已过期的消息，因为Android已经使用了它（在后台）并且已经登录了用户！要仔细检查，请检查 Firebase 控制台。您应该会发现此新用户已添加到用户列表中。

为了避免收到验证码过期消息，我们需要设置一个监听器进行“认证更改”。一旦 Android 在后台登录用户，此侦听器应引导用户离开登录屏幕，他/她应该在该屏幕中输入验证码。下面演示了如何实现这一点。我会将以下代码添加到登录屏幕。

与功能组件一起使用的示例代码：

useEffect( () => {
    firebase.auth().onAuthStateChanged( (user) => {
        if (user) {
            // Obviously, you can add more statements here, 
            //       e.g. call an action creator if you use Redux. 

            // navigate the user away from the login screens: 
            props.navigation.navigate("PermissionsScreen");
        } 
        else 
        {
            // reset state if you need to  
            dispatch({ type: "reset_user" });
        }
    });
}, []);  

用于类组件的示例代码：

// I did NOT test this version, because I use functional components. 
componentDidMount() {
    firebase.auth().onAuthStateChanged( (user) => {
        if (user) {
            // Obviously, you can add more statements here, 
            //       e.g. call an action creator if you use Redux. 

            // navigate the user away from the login screens: 
            props.navigation.navigate("PermissionsScreen");
        } 
        else 
        {
            // reset state if you need to 
            this.setState({
                user: null,
                messageText: '',
                codeInput: '',
                phoneNo: '',
                confirmResult: null,
            });
        }
    });
};