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的“用户”部分中输入一个条目，然后导航到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,
            });
        }
    });
};

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

1 个答案: