Question

我可能对firebase在这里尝试做什么感到困惑。我可以让用户使用现有的firebase代码登录我的网站，但是当我尝试获取该用户的用户名时（所以我可以在屏幕上打印出来），我不会得到任何东西。

我的react应用程序的文件结构是index.jsx，它加载了Login.jsx。 Login.jsx看起来像这样：

import React from 'react';
import axios from 'axios';
import * as firebase from 'firebase';



class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {email: '', password: ''};
    this.engageLogin = this.engageLogin.bind(this);
    var config = {
      apiKey: "-------------------",
      authDomain: "--------.firebaseapp.com",
      databaseURL: "https://------.firebaseio.com",
      projectId: "-------",
      storageBucket: "-------.appspot.com",
      messagingSenderId: "------------"
    };
    firebase.initializeApp(config);
  }


  engageLogin (event) {
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
    // This gives you a Google Access Token.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    });
    event.preventDefault();
  }

  render() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log('This is the user: ', user)
      } else {
        // No user is signed in.
        console.log('There is no logged in user');
      }
    });
    return (
      <div>
        <div className="container">
          <h2 className="title"> Stream Labs </h2>
          <form onSubmit={this.engageLogin}>
            <div className="form-group row">
                <div type="submit" className="g-signin2">Sign in</div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Login;

根据我的理解，firebase.auth（）。onAuthStateChanged应该在用户登录时触发和console.log，但我只得到'没有登录用户'消息。谁能指出我在这方面的正确方向？

Answer 1

这将显示当前用户的电子邮件。

    import React from 'react';
    import firebase from "firebase/app";
    import "firebase/auth";
        
    class Profile extends React.Component {
       render () {
          let user = firebase.auth().currentUser;
             return (
                 <p> I'm the current user: {user.email} </p>
             );
       }
    }
        
   export default Profile;

但是，如果您想显示当前用户的姓名，则必须使用其他 Firebase 身份验证方法，例如； Google 登录、Facebook 登录、twitter、电话号码 等，但不能使用密码验证。

Answer 2

你能试试吗

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        console.log('This is the user: ', user)
    } else {
        // No user is signed in.
        console.log('There is no logged in user');
    }
});

从render到constructor的结尾？

Answer 3

我想与@Ronald Namwanza 不同，因为他说使用电子邮件和密码身份验证时无法获取用户名，但实际上可以您可以获得用户的数字道具，而不仅仅是名称，所有道具都可以在这里找到：https://firebase.google.com/docs/reference/js/firebase.User

您可以在用户注册时为其输入一个显示名称。例子：

function signUp() {
  auth.createUserWithEmailAndPassword(email, password).then((authUser) => {
    authUser.updateProfile({
      displayName: thisCanBeAnyVariableOrInputYouTookFromTheUser,
})
})
}

这样你就可以给用户一个名字并得到名字：

const user = firebase.auth().currentUser;

// Then get the username by using:
const name = user.displayName;

如何从firebase中获取对当前用户的响应？

3 个答案: