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

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. https://stackoverflow.com/questions/46522726/firebase-phone- 
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的Users部分中应该有一个条目，并导航到SetupCoverVideo。

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

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

Answer 1

显然，最近的一些Android版本足够智能，可以接收短信验证码，并使用它来验证用户身份。当用户尝试输入验证码时，他/她会收到一条消息，告诉他/她验证码已经过期了，因为安卓已经在后台使用过验证码并且已经登录了用户！要再检查一遍，请检查控制台。您应该会发现此新用户已添加到用户列表中。

为了避免收到验证码过期消息，我们需要为“changes”设置一个监听器。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,
            });
        }
    });
};  

Answer 2

您需要使用以下命令检查后台身份验证：

conponentDidMount() {    
firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                // alert(JSON.stringify(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: 
            }
        });
}

然后你需要注销你的用户，一旦你完成了它(我遇到了这个问题，旧用户会话已经存在，而新用户正在进行身份验证)

因此，在注销时使用：

if (firebase.auth().currentUser)
            firebase.auth().currentUser.delete();

你已经准备好了！