Блог

После того, как я выполнил часть руководства «вход пользователя», я обязательно проверил «http://localhost:5000 » чтобы убедиться, что мой вход в систему работает правильно. Я сделал раздел «Чтение сообщений», и теперь я ничего не вижу для входа.

Я также не вижу ни одного из сообщений, которые я импортировал… FriendlyChat.prototype.initFirebase = function() { // Ярлыки для функций Firebase SDK. это.auth = firebase.auth(); this.database = firebase.database(); this.storage = firebase.storage(); // Инициирует аутентификацию Firebase и прослушивает изменения состояния аутентификации. this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this)); // ЗАДАЧА (РАЗРАБОТЧИК): инициализировать Firebase. };

 // Loads chat messages history and listens for upcoming ones.
FriendlyChat.prototype.loadMessages = function() {
  // TODO(DEVELOPER): Load and listens for new messages.
// Reference to the /messages/ database path.
  this.messagesRef = this.database.ref('messages');
  // Make sure we remove all previous listeners.
  this.messagesRef.off();

  // Loads the last 12 messages and listen for new ones.
    var setMessage = function(data) {
        var val = data.val();
        this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
  }.bind(this);
  this.messagesRef.limitToLast(12).on('child_added', setMessage);
  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
};

};

// Saves a new message on the Firebase DB.
FriendlyChat.prototype.saveMessage = function(e) {
  e.preventDefault();
  // Check that the user entered a message and is signed in.
  if (this.messageInput.value amp;amp; this.checkSignedInWithMessage()) {

    // TODO(DEVELOPER): push new message to Firebase.

  }
};
...
FriendlyChat.prototype.signIn = function() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider);

  // TODO(DEVELOPER): Sign in Firebase with credential from the Google user.
};

// Signs-out of Friendly Chat.
FriendlyChat.prototype.signOut = function() {
  // TODO(DEVELOPER): Sign out of Firebase.
  // Sign out of Firebase.
     this.auth.signOut();
};
riendlyChat.prototype.onAuthStateChanged = function(user) {
  if (user) { // User is signed in!
    // Get profile pic and user's name from the Firebase user object.
    var profilePicUrl = user.photoURL;   // TODO(DEVELOPER): Get profile pic.
    var userName = user.displayName;        // TODO(DEVELOPER): Get user's name.

    // Set the user's profile pic and name.
    this.userPic.style.backgroundImage = 'url('   profilePicUrl   ')';
    this.userName.textContent = userName;

    // Show user's profile and sign-out button.
    this.userName.removeAttribute('hidden');
    this.userPic.removeAttribute('hidden');
    this.signOutButton.removeAttribute('hidden');

    // Hide sign-in button.
    this.signInButton.setAttribute('hidden', 'true');

    // We load currently existing chant messages.
    this.loadMessages();
  } else { // User is signed out!
    // Hide user's profile and sign-out button.
    this.userName.setAttribute('hidden', 'true');
    this.userPic.setAttribute('hidden', 'true');
    this.signOutButton.setAttribute('hidden', 'true');

    // Show sign-in button.
    this.signInButton.removeAttribute('hidden');
  }
};

// Returns true if user is signed-in. Otherwise false and displays a message.
FriendlyChat.prototype.checkSignedInWithMessage = function() {
  /* TODO(DEVELOPER): Check if user is signed-in Firebase. */
   // Return true if the user is signed in Firebase
  if (this.auth.currentUser) {
    return true;
  }
  // Display a message to the user using a Toast.
  var data = {
    message: 'You must sign-in first',
    timeout: 2000
  };
  this.signInSnackbar.MaterialSnackbar.showSnackbar(data);
  return false;
};
 

Это функции, которые мне пришлось изменить. Что я мог сделать, чтобы переопределить мою ранее правильную реализацию входа в систему, а также не получить доступ к сообщениям базы данных, которые я импортировал?

В любой момент вы можете сверить свой код с веб-папкой, которая содержит готовый рабочий код для codelab.

В частности, у вас есть это:

 // Sets up shortcuts to Firebase features and initiate firebase auth.
FriendlyChat.prototype.initFirebase = function() {
  // Shortcuts to Firebase SDK features.
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  // Initiates Firebase auth and listen to auth state changes.
  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};
 

и это:

 // Triggers when the auth state change for instance when the user signs-in or signs-out.
FriendlyChat.prototype.onAuthStateChanged = function(user) {
  if (user) { // User is signed in!
    // Get profile pic and user's name from the Firebase user object.
    var profilePicUrl = user.photoURL;
    var userName = user.displayName;

    // Set the user's profile pic and name.
    this.userPic.style.backgroundImage = 'url('   (profilePicUrl || '/images/profile_placeholder.png')   ')';
    this.userName.textContent = userName;

    // Show user's profile and sign-out button.
    this.userName.removeAttribute('hidden');
    this.userPic.removeAttribute('hidden');
    this.signOutButton.removeAttribute('hidden');

    // Hide sign-in button.
    this.signInButton.setAttribute('hidden', 'true');

    // We load currently existing chant messages.
    this.loadMessages();
  } else { // User is signed out!
    // Hide user's profile and sign-out button.
    this.userName.setAttribute('hidden', 'true');
    this.userPic.setAttribute('hidden', 'true');
    this.signOutButton.setAttribute('hidden', 'true');

    // Show sign-in button.
    this.signInButton.removeAttribute('hidden');
  }
};
 

Две вышеперечисленные функции гарантируют, что пользовательский интерфейс обновляется в зависимости от того, входит ли пользователь в систему или выходит из системы (и, следовательно, скрывает / показывает кнопку «ВОЙТИ»).

Что касается сообщений вашей базы данных, они будут отображаться только при правильной работе входа в систему, поэтому, надеюсь, исправление вышеизложенного поможет отображать ваши сообщения.

Обсуждение на github может быть полезным: https://github.com/firebase/friendlychat/issues/134

Если код, управляющий скрытым атрибутом в связанных с логином <div> ‘s и <button> ‘s, не может быть запущен, код входа по умолчанию будет скрыт.