开发者问题收集

React Native Firebase 身份验证错误

2017-07-19
4260

我正在尝试创建登录用户帐户系统,但出于某种原因,它在导航到主屏幕后而不是之前识别出错误的密码。(我指的代码是 login() 函数)。我放置了控制台日志语句来确定这一点,并且“console.log(errorCode);”是最后输出的内容。有人可以解释一下我编写的代码的逻辑以及为什么只有在最后才能识别错误的密码吗? 控制台输出的顺序是 “登录” “导航到主页” “登录完成” “auth/错误密码? 非常感谢。

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView
} from 'react-native';
import Input from './Input';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {firebaseApp} from './App';
import {Tabs} from './Router';
import {StackNavigator, TabNavigator} from 'react-navigation';
import { Root } from './Router';

export default class LoginScreen extends Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',
      password: '',
      status: '',
      success: ''
    }

    this.login = this.login.bind(this);

  }

  login(){
    console.log("Logging in");
    var errorCode;
    var errorMessage;
    firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch(function(error) {
        errorCode = error.code;
        console.log(errorCode);
        errorMessage = error.message;
    });

      if (errorCode === 'auth/wrong-password') {
        console.log("Wrong password");
        alert('Wrong password.');
      } else {
        console.log("Navigate to Home");
        this.props.navigation.navigate('Home');
      }

      //console.log(error);
      console.log("Login finish");


    /*firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
    })

    this.props.navigation.navigate('Home');

    console.log("Navigate to Home");*/
  }

  render() {
    var styles = require('./Styles');
    const {navigate} = this.props.navigation;

    return(
      <KeyboardAvoidingView behavior='padding' style={styles.loginContainer}>
        <Text style={styles.loginHeader}>PRINCETON EVENTS</Text>
        <TextInput
          style={styles.loginInput}
          placeholder="Email"
          autoCapitalize='none'
          onChangeText={(text) => this.setState({email: text})}
          value={this.state.email}
          returnKeyType='next'/>
        <TextInput
          secureTextEntry
          style={styles.loginInput} placeholder="Password"
          onChangeText={(text) => this.setState({password: text})}
          value={this.state.password}
          autoCapitalize='none'
          returnKeyType='go'/>
        <TouchableOpacity style={styles.loginButton}>
          <Text style={styles.loginText} onPress={this.login}>LOGIN</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.loginButton}
          onPress = {() => navigate('CreateAccount')}>
          <Text style={styles.loginText}> CREATE ACCOUNT </Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    );

}
}
2个回答

您需要在 then 和 catch 块中处理成功/错误情况。

firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
.then(function() { //Auth is successful
   this.props.navigation.navigate('Home');
}
.catch(function(error) {
    errorCode = error.code;
    errorMessage = error.message;
  if (errorCode === 'auth/wrong-password') {
    console.log("Wrong password");
    alert('Wrong password.');
  } else {
    console.log("Navigate to Home");
    this.props.navigation.navigate('Home');
  }
});
tugce
2017-07-19

有点晚了,但对于下一个,请检查这个答案 https://stackoverflow.com/a/63958584/9300663

仍然有效:2021 年 1 月 13 日。

对于您的情况,您可以使用 substr() 从您的 errorCode 中删除“auth/”。

像这样:

switch (errorCode.substr(5)) {
    case 'ERROR_EMAIL_ALREADY_IN_USE':
    case 'account-exists-with-different-credential':
    case 'email-already-in-use':
      return 'Email already used. Go to login page.';
    case 'ERROR_WRONG_PASSWORD':
    case 'wrong-password':
      return 'Wrong email/password combination.';
    case 'ERROR_USER_NOT_FOUND':
    case 'user-not-found':
      return 'No user found with this email.';
    case 'ERROR_USER_DISABLED':
    case 'user-disabled':
      return 'User disabled.';
    case 'ERROR_TOO_MANY_REQUESTS':
    case 'operation-not-allowed':
      return 'Too many requests to log into this account.';
    case 'ERROR_OPERATION_NOT_ALLOWED':
    case 'operation-not-allowed':
      return 'Server error, please try again later.';
    case 'ERROR_INVALID_EMAIL':
    case 'invalid-email':
      return 'Email address is invalid.';
    default:
      return 'Login failed. Please try again.';
  }
XplosiVe06
2021-01-13