2016-10-15 7 views
1

튜토리얼의 "사용자 로그인"부분을 완료 한 후에 "http://localhost:5000"을 확인하여 내 로그인이 올바르게 작동하는지 확인했습니다. "메시지 읽기"섹션을했는데 이제 로그인이 보이지 않습니다. 나는 또한 내가 가져온 메시지가 표시되지 않습니다 enter image description hereFirebase 로그인이 작동하지 않습니다

... 중포 기지 SDK 기능에 FriendlyChat.prototype.initFirebase = 함수() { // 바로 가기. this.auth = firebase.auth(); this.database = firebase.database(); this.storage = firebase.storage(); // Firebase auth를 시작하고 auth 상태 변경 내용을 수신합니다. this.auth.onAuthStateChanged (this.onAuthStateChanged.bind (this)); // TODO (개발자) : 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 && 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; 
}; 

다음은 변경해야하는 기능입니다. 이전에 올바른 로그인 구현을 무시하고 내가 가져온 데이터베이스 메시지에 액세스하지 못하게하려면 어떻게해야합니까?

답변

0

코드 테이블의 완성 된 작업 코드가 들어있는 web 폴더에서 코드를 확인할 수 있습니다.

// 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'); 
    } 
}; 

두 기능은 위의 UI는 사용자가-로그인 또는 서명 어떠했는지에 따라 새로 고쳐 있는지 확인합니다 특히

은 당신이해야합니까 -out (따라서 "SIGN IN"버튼을 숨기거나 표시하십시오).

데이터베이스 메시지의 경우 로그인이 올바르게 작동 할 때만 표시되므로 희망 사항을 수정하면 메시지를 표시하는 데 도움이됩니다.

-1

토론 GitHub의에서 도움이 될 수 있습니다 숨겨진 로그인 관련 <div>의 속성 's 및 <button>의 제어 코드를 실행할 수없는 경우, 로그인 코드는 기본적으로 숨겨집니다

https://github.com/firebase/friendlychat/issues/134 .

관련 문제